一，AJAX简介
AJAX，（Asynchronous Javascript And XML），也就是异步的Javascript和XML。使用JavaScipt语言服务器进行交互。
AJAX最大的优点实在不重新加载整个页面的情况下，可以与服务器交换数据并且部分更新网页内容。
ps：
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
异步交互：客户端发出一个请求后，无需等待服务器响应结束，姐可以发出第二个请求。
二，AJAX基本操作介绍
页面输入两个整数，通过AJAX传输到后端计算出结果并返回。
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <button id="b1" class="button">Ajax Test</button> <script> {#生成id是‘b1’的jQuery对象，触发点击事件#} $('#b1').click(function () { $.ajax({ {#提交地址，默认是当前后端#} url:'', {#提交的方式#} type:'POST', {#提交的数据是id为i1的对象的value值和id为i2的对象的value值#} data:{i1:$('#i1').val(),i2:$('#i2').val()}, {#回调函数，向前端发出指令#} success:function (data) { $('#i3').val(data) } }) }) </script> </body> </html>
view.py：
def test(request): if request.method == 'POST': res1 = request.POST.get('i1') res2 = request.POST.get('i2') res3 = int(res1)+int(res2) # 向前端传入参数 return HttpResponse(res3) return render(request,'test.html')
ps：ajax默认的数据数据的编码给是也是urlencoded。
三，JSON介绍
一：JSON指的是JavaScript对象表示法（JavaScript Object Notation）。
二：JSON是轻量级文本传输交换格式。
三：JSON独立于语言。
四：JSON具有自我描述性，更易理解。
JSON对象和字符串转换的两个方法：
方法一：用于将一个JSON字符串转化为JavaScript对象（json只认双引的字符串格式）
JSON.parse('{"name":"Howker"}');
方法二：用于将JavaScript值转化为JSON字符串。
JSON.stringify({"name":"Tonny"})
四，其他案例
ajax传输json格式数据：
test.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <button id="b1" class="button">Ajax Test</button> <script> $('#b1').click(function () { $.ajax({ url:'', // url参数可以不写，默认就是当前页面打开的地址 type:'post', {#告诉django你传入的data数据是什么格式的#} contentType:'application/json', data:JSON.stringify({'name':'jason','hobby':'study'}), success:function (data) { alert(data); $('#i3').val(data) } }) }) </script> </body> </html>
views.py:
def test(request): if request.method == 'POST': # 取出json数据格式的方式 data = request.body res = str(data,encoding='utf-8') name = json.loads(res).get('name') return HttpResponse(name) return render(request,'test.html')
ajax传输文件：
test.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <input type="file" id="i1" name="myfile"> <input type="text" id="'i2"> <button id="b1" class="button">Ajax Test</button> <script> $('#b1').click(function () { {#定义要给变量名formdata来存储new FormData对象#} let formdata = new FormData(); // FormData对象不仅仅可以传文件还可以传普通的键值对 formdata.append('name','jason'); // 获取input框存放的文件 //$('#i1')[0].files[0] formdata.append('myfile',$('#i1')[0].files[0]); //将jQuery对象转化为js对象 $.ajax({ url:'', type:'post', data:formdata, // ajax发送文件需要修改两个固定的参数 processData:false, // 告诉浏览器不要处理我的数据 contentType:false, // 不要用任何的编码，就用我formdata自带的编码格式，django能够自动识别改formdata对象 // 回调函数 success:function (data) { alert(data) } }) }); </script> </body> </html>
views.py:
from django.shortcuts import HttpResponse,redirect,render import json def test(request): if request.method == 'POST': # 获取文件对象 file = request.FILES # 获取字符串对象 res = request.POST print(file,' ',res) return HttpResponse('okokok') return render(request,'test.html')
总结：
form表单与ajax异同点：
1，form表单不支持异步提交局部刷新
2，form表单不支持传输json格式数据
3，form表单与ajax默认传输的编码格式都是 urlencoded