转载自 https://www.cnblogs.com/chenchao1990/p/5288385.html
Ajax
很多时候，我们在网页上请求操作时，不需要刷新页面。实现这种功能的技术就要Ajax！（本人定义，不可迷信）
jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能，我们仍然用它来做django中的ajax，所以先把jquey下载下来，版本越高越好。
一、ajax发送简单数据类型：
html代码：在这里我们仅发送一个简单的字符串
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8
9 <input type="button" onclick="AjaxSubmit();" value="提交">
10
11
12 <script src="/static/jquery-1.12.1.min.js"></script>
13 <script>
14 function AjaxSubmit(){
15 var host = '1.1.1.1';
16 var port = '1111';
17 $.ajax({
18 url:"/app01/ajax_submit/",
19 type:'POST',
20 data:{host:host,port:port},
21 success: function (arg) {
23 }
24
25 });
26 }
30 </script>
31
32 </body>
33 </html>
django下app里views.py
# coding:utf-8
from django.shortcuts import render,HttpResponse
def ajax_submit(request):
print request.POST #客户端发来的数据
return render(request,'ajax_submit.html')
打印出来的数据样式:
二、ajax发送复杂的数据类型：
html代码：在这里我们仅发送一个列表中包含字典数据类型
由于发送的数据类型为列表 字典的格式，我们提前要把它们转换成字符串形式，否则后台程序接收到的数据格式不是我们想要的类型，所以在ajax传输数据时需要JSON
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8
9 <input type="button" onclick="AjaxSubmit_set();" value="提交集合">
10
11 <script src="/static/jquery-1.12.1.min.js"></script>
12 <script>
13
14
15 function AjaxSubmit_set(){
16 var data_list = [
17 {'name':'chenchao','age':18},
18 {'name':'lisi','age':19},
19 {'name':'wangwu','age':13}
20
21 ];
22
23 $.ajax({
24 url:"/app01/ajax_submit_set/",
25 type:'POST',
26 tradition:true, 原生模式
27 data:{data:JSON.stringify(data_list)},
28 success: function (arg) {
29
30 }
31
32 });
33 }
34
35 </script>
36
37 </body>
38 </html>
django下app里views.py
1 def ajax_submit_set(request):
2 print request.POST
3 return render(request,'ajax_submit.html')
打印出来的数据样式:
三、稍等、还没完。
虽然我们实现了功能，但这还不够，因为显得不是很专业，所以我们稍作处理。
success: function (arg) { } 如果ajax提交数据成功，那么就会自动执行这里面的函数
html代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8
9 <input type="button" onclick="AjaxSubmit();" value="提交">
10 <input type="button" onclick="AjaxSubmit_set();" value="提交集合">
11
12 <script src="/static/jquery-1.12.1.min.js"></script>
13 <script>
14 function AjaxSubmit(){
15 var host = '1.1.1.1';
16 var port = '1111';
17 $.ajax({
18 url:"/app01/ajax_submit/",
19 type:'POST',
20 data:{host:host,port:port},
21 success: function (arg) {
22 }
23 });
24 }
25
26 function AjaxSubmit_set(){
27 var data_list = [
28 {'name':'chenchao','age':18},
29 {'name':'lisi','age':19},
30 {'name':'wangwu','age':13}
31 ];
32
33 $.ajax({
34 url:"/app01/ajax_submit_set/",
35 type:'POST',
36 tradition:true,
37 data:{data:JSON.stringify(data_list)},
38 success: function (arg) { //如果程序执行成功就会执行这里的函数
39 var callback_dic = $.parseJSON(arg);
40
41 if(callback_dic.status){
42 alert('成功');
43 }else{
44 alert(callback_dic.error); //把错误的信息从后台提出展示出来
45 }
46 }
47 });
48 }
49
50 </script>
51
52 </body>
53 </html>
django下app里views.py
1 # coding:utf-8
2 from django.shortcuts import render,HttpResponse,redirect
3 def ajax_submit(request):
4
5 print request.POST
6 return render(request,'ajax_submit.html')
7
8
9 import json
10
11
12 def ajax_submit_set(request):
13 ret = {'status': True,'error': ""}
14 try:
15 print request.POS
16 except Exception, e:
17 ret['status'] = False
18 ret['error'] = str(e)
19 j_ret = json.dumps(ret)
20 return HttpResponse(j_ret)