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的简单使用：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
 6     <title>login</title>
 7 </head>
 8 <body>
 9 <div>
10     用户名：<input type="text" name="username" id="username">
11     密码：<input type="password" name="password" id="password">
12     <input type="button" id="submit" value="提交">{% csrf_token %}
13     <span id="status"></span>
14 </div>
15 </body>
16 <script>
17     //以post方式请求(csrf)
18     $(function () {
19         $('#submit').click(function () {
20             $.ajax({
21                 url: "{% url 'auth' %}",//请求路径
22                 type: 'post',            //请求方式
23                 data: {                  //请求数据(post请求的csrf认证键值对固定)
24                     username: $('#username').val(),
25                     password: $('#password').val(),
26                     csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
27                 },
28                 success: function (response) {//请求回调函数
29                     if (response == 1) {
30                         location.href = "{% url 'index' %}"
31                     } else {
32                         $('#status').text('账号或密码有误！')
33                     }
34                 }
35             })
36         })
37     })
38  
39     //以get方式请求
40     $(function () {
41         $('#submit').click(function () {
42             $.ajax({
43                 url:"{% url 'auth' %}",
44                 type:'get',
45                 data:{
46                     username: $('#username').val(),
47                     password: $('#password').val(),
48                 },
49                 success:function (response) {
50                     if(response==1){
51                         location.href="{% url 'index' %}"
52                     }else{
53                        $('#status').text('账号或密码有误！')
54                     }
55                 }
56             })
57         })
58     })
59 </script>
60  
61 </html>

login.html