Vue Ajax请求

最新推荐文章于 2024-04-19 09:28:55 发布

XWenXiang

最新推荐文章于 2024-04-19 09:28:55 发布

阅读量4.3k

点赞数 1

分类专栏： Vue 文章标签： vue.js ajax django

本文链接：https://blog.csdn.net/m0_58987515/article/details/125509720

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了在Vue应用中通过三种不同的方式与后端进行Ajax请求：jQuery的ajax、原生fetch API以及axios库。每个方案都提供了后端视图函数的实现，并展示了前端如何发送GET请求并更新UI展示返回的数据。文章强调了跨域请求时添加'Access-Control-Allow-Origin'头的重要性。

摘要由CSDN通过智能技术生成

文章目录

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

<div id="app">
    <p><button @click="func">点我向后端发请求，获取用户信息</button></p>
    <p>用户名：{{ name }}</p>
    <p>年龄是：{{ age }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            func() {
                $.ajax({
                    'url': 'http://127.0.0.1:8000/index/',
                    'type': 'get',
                    success: data => {
                        console.log(data)
                        this.name = data.name
                        this.age = data.age
                    }
                })
            }
        },
    })
</script>

在这里插入图片描述

3. 方案二

前端发送Ajax请求

<div id="app">
    <p>
        <button @click="func">点我向后端发请求，获取用户信息</button>
    </p>
    <p>用户名：{{ name }}</p>
    <p>年龄是：{{ age }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            func() {
                fetch('http://127.0.0.1:8000/index/').then(res => res.json()).then(res => {
                    console.log(res)
                    this.name = res.name
                    this.age = res.age
                })
            },
        }
    })
</script>

4. 方案四

前端发送Ajax请求

<div id="app">
    <p>
        <button @click="func">点我向后端发请求，获取用户信息</button>
    </p>
    <p>用户名：{{ name }}</p>
    <p>年龄是：{{ age }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            func() {
                axios.get('http://127.0.0.1:8000/index/').then(res => {
                    console.log(res.data)
                    this.name = res.data.name
                    this.age = res.data.age
                })
            },
        }
    })
</script>