django中使用Ajax

内容：

1.Ajax原理与基本使用

2.Ajax发送get请求

3.Ajax发送post请求

4.Ajax设置csrf_token

5.django序列化

参考：https://www.cnblogs.com/liwenzhou/p/8718861.html

1.Ajax原理与基本使用

关于Ajax的原理及其基本使用，直接看这篇博文即可：https://www.cnblogs.com/wyb666/p/9387488.html

2.Ajax发送get请求

views.py：

 1 # Ajax get请求的后端处理函数
 2 def ajax_add(request):
 3     print(request.GET)
 4     print(request.GET.get("i1"))
 5     print(request.GET.get("i2"))
 6 
 7     i1 = int(request.GET.get("i1"))
 8     i2 = int(request.GET.get("i2"))
 9 
10     ret = i1 + i2
11     return HttpResponse(ret)

前端代码：

 1 <input type="text" id="i1">+
 2 <input type="text" id="i2">=
 3 <input type="text" id="i3">
 4 <input type="button" value="AJAX get提交" id="b1">
 5 
 6 <script src="/static/jquery-3.3.1.js"></script>
 7 <script>
 8     $("#b1").on("click", function () { 9 var i1 = $("#i1").val() 10 var i2 = $("#i2").val() 11 // 往后端发数据 12  $.ajax({ 13  url: "/ajax_add/", 14  type: "get", 15  data: {"i1": i1, "i2": i2}, 16  success: function (arg) { 17  {#alert(arg);#} 18 // 把返回的结果填充到 id是i3的input框中 19  $("#i3").val(arg) 20  } 21  }) 22  }) 23 </script>

3.Ajax发送post请求

views.py：

1 # Ajax post请求的后端处理函数
2 def ajax_add3(request):
3     print(request.POST)
4     print("-" * 120)
5     i1 = int(request.POST.get("i1"))
6     i2 = int(request.POST.get("i2"))
7 
8     ret = i1 + i2
9     return HttpResponse(ret)

前端代码：

 1 <input type="text" id="i1">+
 2 <input type="text" id="i2">=
 3 <input type="text" id="i3">
 4 <input type="button" value="AJAX post提交" id="b3">
 5 
 6 <script src="/static/jquery-3.3.1.js"></script>
 7 <script src="/static/setupajax.js"></script>
 8 <script>
 9     $("#b3").on("click", function () {
10         var i1 = $("#i1").val()
11         var i2 = $("#i2").val()
12         // 往后端发数据
13         $.ajax({
14             url: "/ajax_add3/",
15             type: "post",
16             data: {"i1": i1, "i2": i2},
17             success: function (arg) {
18                 {#alert(arg);#}
19                 // 把返回的结果填充到 id是i3的input框中
20                 $("#i3").val(arg)
21             }
22         })
23     })
24 </script>

4.Ajax设置csrf_token

5.django序列化