Django之AJAX简单使用

AJAX简介：

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

　　　　AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

　　　　AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

　　　　AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

　　　　　　a.同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

　　　　　　b.异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

　　AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；

AJAX请求‘Content-Type'三种类型：

前端js进行http请求和后端代码进行数据传输的消息格式：

&连接的赋值序列：'Content-Type':'application/x-www-form-urlencoded'(默认)

片段数据:'Content-Type':'multipart/form-data'（上传文件使用，同时请求方式为post，django自动识别解析，文件为request.FILES）

json字符串:'Content-Type':'application/json'(请求数据为json字符串时需要指定,django不能自动识别，需要对request.body进行手动解析操作)

AJAX的简单使用：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

     <title>login</title>

 </head>

 <body>

 <div>

     用户名：<input type="text" name="username" id="username">

     密码：<input type="password" name="password" id="password">

     <input type="button" id="submit" value="提交">{% csrf_token %}

     <span id="status"></span>

 </div>

 </body>

 <script>

     //以post方式请求(csrf)

     $(function () {

         $('#submit').click(function () {

             $.ajax({

                 url: "{% url 'auth' %}",//请求路径

                 type: 'post',            //请求方式

                 data: {                  //请求数据(post请求的csrf认证键值对固定)

                     username: $('#username').val(),

                     password: $('#password').val(),

                     csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),

                 },

                 success: function (response) {//请求回调函数

                     if (response == 1) {

                         location.href = "{% url 'index' %}"

                     } else {

                         $('#status').text('账号或密码有误！')

                     }

                 }

             })

         })

     })

     //以get方式请求

     $(function () {

         $('#submit').click(function () {

             $.ajax({

                 url:"{% url 'auth' %}",

                 type:'get',

                 data:{

                     username: $('#username').val(),

                     password: $('#password').val(),

                 },

                 success:function (response) {

                     if(response==1){

                         location.href="{% url 'index' %}"

                     }else{

                        $('#status').text('账号或密码有误！')

                     }

                 }

             })

         })

     })

 </script>

 </html>

urls.py

 urlpatterns = [

     url(r'^login/',views.login,name='login'),

     url(r'^auth/',views.auth,name='auth'),

     url(r'^index/',views.index,name='index'),

 ]

views.py

 def login(request):

     if request.method == 'GET':

         return render(request, 'login.html')

 #ajax请求的处理视图函数

 def auth(request):

     #POST请求

 if request.method == 'POST':

     name = request.POST.get('username')

     psd = request.POST.get('password')

     print(name, psd, type(name), type(psd))

     if name == "yang" and psd == '':

         status = 1

     else:

         status = 0

     return HttpResponse(status)

 #GET请求

 if request.method == 'GET':

     if request.GET.get('username') == 'yang' and request.GET.get('password') == '':

         status = 1

     else:

         status = 0

     return HttpResponse(status)

 def index(request):

     return render(request, 'index.html')

views.py

AJAX请求CSRF认证cookie处理：

<script src="{% static 'js/jquery.cookie.js' %}"></script>

<script>

$.ajax({

url: "/cookie_ajax/",

type: "POST",

headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 从Cookie取csrftoken，并设置到请求头中

data: {"username": "chao", "password": 123456},

success: function (data) {

console.log(data);

}

})

</script>