Vue 发送Ajax请求多种方式

1. 发送ajax请求的方式

• 方案一：jq 的ajax（在 vue 中不推荐同时使用）
• 方案二：js 原始官方 fetch方法
• 方案三：axios 第三方

2. 方案一

• 后端视图函数

from rest_framework.viewsets import ViewSet
from rest_framework.response import Response


class Index(ViewSet):
    def index(self, request):
        res = Response({'name': 'xwx', 'age': 123})
        res['Access-Control-Allow-Origin'] = '*'
        return res

需要注意的是，需要添加 Access-Control-Allow-Origin 在请求头

• 后端路由

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.Index.as_view({'get': 'index'})),
]

• 前端发送 Ajax

    
点我向后端发请求，获取用户信息
    
用户名：{{ name }}
    
年龄是：{{ age }}

3. 方案二

• 前端发送Ajax请求

    

        点我向后端发请求，获取用户信息
    
    
用户名：{{ name }}
    
年龄是：{{ age }}

4. 方案四

• 前端发送Ajax请求

    

        点我向后端发请求，获取用户信息
    
    
用户名：{{ name }}
    
年龄是：{{ age }}