ajax基本用法介绍

一、基于jQuery的ajax

此时需要在模板中引用jQuery，ajax的本质是利用浏览器自带的XMLHttpRequest对象并通过jQuery将数据和请求头进行封装再发送。ajax基本使用方法如下：

$.ajax({
        url:'url',
        type:'POST',
        data:{'k1':v1,'k2':v2,},
        dataType:'JSON',
        traditional:true,
        success:function (arg) {
        }
        error:function () {
        }
    })     

整个ajax的内容包含在$.ajax({  })中

第一行url：指定ajax发送给哪个url进行处理，再通过urls.py文件去执行对应的处理函数

第二行type：ajax发送数据的方式，可以是GET或者POST，如果使用POST方法可先注释掉csvf中间件

第三行data：ajax发送的数据，需要是字典格式，且v默认是数字或者字符串

第六行success：表示后台处理函数处理成功后，前端再执行的函数，参数arg表示处理函数的返回值，即HttpResponse的返回值，且只能接收字符串格式

第四行dataType：由于success的function函数默认只能接收字符串格式的返回值，因此如果处理函数需要返回其他格式如字典、列表形式的值，需要通过HttpResponse(json.dumps(返回值))传递给arg，而在ajax中需要再通过JSON.parse(arg)再将返回值还原为原来的格式，而dataType:'JSON'可以省略前端的JSON.parse(arg)，直接将返回值通过JSON还原为原来的格式后再传递给arg。

第五行traditional：ajax发送的数据字典的值默认是数字或者字符串，如果值是列表(不能是字典)，则需要指定traditional:true

第七行error：例如当指定的url错误、网络错误等，会执行此函数。

ajax不接收处理函数返回的redirect跳转，只会根据函数返回的消息内容主动决定是否做刷新或跳转。

 1.ajax发送get请求

.btn{display:inline-block;background-color: darkgoldenrod;padding: 5px 10px;color: white;cursor: pointer}
……
<a class="btn" onclick="ajaxSubmit3()">点我</a>
……
function ajaxSubmit3() {
    $.ajax({
        url:'ajax1',
        type:'POST',
        data:{'p':123},
        dataType:'json',
        success:function (arg) {
        console.log(arg.status,arg.data)
        }
    })
}

模板和使用ajax发送get请求