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>

urls.py

1 urlpatterns = [
2     url(r'^login/',views.login,name='login'),
3     url(r'^auth/',views.auth,name='auth'),
4     url(r'^index/',views.index,name='index'),
5 ]

views.py

 1 def login(request):
 2     if request.method == 'GET':
 3         return render(request, 'login.html')
 4 #ajax请求的处理视图函数
 5 def auth(request):
 6     #POST请求
 7 if request.method == 'POST':
 8     name = request.POST.get('username')
 9     psd = request.POST.get('password')
10     print(name, psd, type(name), type(psd))
11     if name == "yang" and psd == '123':
12         status = 1
13     else:
14         status = 0
15     return HttpResponse(status)
16 #GET请求
17 if request.method == 'GET':
18     if request.GET.get('username') == 'yang' and request.GET.get('password') == '123':
19         status = 1
20     else:
21         status = 0
22     return HttpResponse(status)
23  
24 def index(request):
25     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>