初始-＞Ajax请求

员大头硬花生

已于 2024-08-17 16:19:16 修改

阅读量122

点赞数 2

分类专栏： jquery 文章标签： ajax 前端 javascript

于 2024-08-16 14:48:28 首次发布

本文链接：https://blog.csdn.net/m0_59362850/article/details/141258383

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浏览器向网站发送请求时：URL和表单的形式提交

GET
POST

特点：页面刷新

除此之外，也可以基于Ajax向后台发送请求（偷偷的发送请求）。

依赖jQuery
编写ajax代码

$.ajax({
    url:"发送的地址",
    type:"post",
    data:{
        n1:123,
        n2:456
    },
    success:function(res){
        console.log(res);
    }
})

一.GET请求

$.ajax({
    url:"/task/ajax",
    type:"get",
    data:{
        n1:123,
        n2:456
    },
    success:function(res){
        console.log(res);
    }
})

from django.shortcuts import render, HttpResponse
def task_ajax(request):
    print(request.GET)
    return HttpResponse("成功了")

二.POST请求

$.ajax({
    url:"/task/ajax",
    type:"post",
    data:{
        n1:123,
        n2:456
    },
    success:function(res){
        console.log(res);
    }
})

from django,views.decorators.csrf import csrf exempt
@csrf_exempt
def task_ajax(request):
    print(request.GET)
    print(request.POST)
    return HttpResponse("成功了")

三、vue初体验

基于vue.js框架来编写项目需要以下几个步骤：

导入vue.js包（CDN）

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

# 当然，也可以将文件下载下来再通过本地导入。

应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1.引入vue.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<!-- 2.指定区域，该区域的内容希望由vue.js来接管。 -->
<div id="app">
    <h1>欢迎学习Vue.js</h1>
    <div>我叫{{name}}，微信{{wechat}}</div>
    
    <input type="button" value="点我" v-on:click="clickMe">
</div>


<script>
	// 3.创建Vue对象，并关联指定HTML区域。
    var app = new Vue({
        el: '#app',
        data: {
            name: '武沛齐',
            wechat: 'wupeiqi888'
        },
        methods: {
            clickMe: function () {
                // 获取值this.name
                // 修改值this.name = "xx"
                this.name = "alex";
                this.wechat = "wupeiqi666";
            }
        }
    })
</script>
</body>
</html>