Ajax
1.前端有哪些方式可以朝后端发请
浏览器窗口手动输入网址 get请求
a标签的href属性 get请求
form表单 get/post请求(默认是get请求)
ajax get/post请求
前后端传输数据编码格式contentType
urlencoded
对应的数据格式:name=jason&password=666
后端获取数据:request.POST
ps；django会将urlencoded编码的数据解析自动放到request.POST
formdata
form表单传输文件的编码格式
后端获取文件格式数据:request.FILES
后端获取普通键值对数据:request.POST
application/json
ajax发送json格式数据
需要注意的点
编码与数据格式要一致
Ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求
页面输入两个整数，通过AJAX传输到后端计算出结果并返回。
ajax基本语法 ：
# 提交的地址(url)
# 提交的方式(type)
# 提交的数据(data)
# 回调函数(success)
$('#d1').click(function () {
$.ajax({
// 提交的地址
url:'/index/',
// 提交的方式
type:'post',
// 提交的数据
data:{'name':'jason','password':'123'},
// 回调函数
success:function (data) { // data接收的就是异步提交返回的结果
alert(data)
}
})
})
HTML 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <button id="b1">Ajax Test</button> <script src="/static/jquery-3.3.1.min.js"></script> <script> $('#b1').click(function () { $.ajax({ url:'', type:'POST', data:{i1:$('#i1').val(),i2:$('#i2').val()}, success:function (data) { $('#i3').val(data) } }) }) </script> </body> </html>
VIEWS.py
def ajax_test(request): if request.method=='POST': i1=request.POST.get('i1') i2=request.POST.get('i2') ret=int(i1)+int(i2) return HttpResponse(ret) return render(request,'ajax_test.html')
URL.PY
from django.conf.urls import url from app01 import views urlpatterns=[ url(r'^ajax_test/',views.ajax_test), ]
Ajax 传输json 格式数据（ajax默认传输数据的编码格式也是urlencoded）
前端（前后端数据格式要一样）
$('#d1').click(function () {
$.ajax({
url:'', // url参数可以不写，默认就是当前页面打开的地址
type:'post',
contentType:'application/json',
data:JSON.stringify({'name':'jason','hobby':'study'}),
success:function (data) {
alert(data)
$('#i3').val(data)
}
})
后端
# import json data = request.body #第一种解码的方式 res1 = data.decode('utf-8') # print(res1, type(res1)) #第二种解码的方式 # res2 = str(data,encoding='utf-8') # print(res2,type(res2)) #反序列化成字典 # res3 = json.loads(res2) # print(res3,type(res3))
Ajax 传输文件
前端
script>
$('#d1').click(function () {
let formdata = new FormData();
// FormData对象不仅仅可以传文件还可以传普通的键值对
formdata.append('name','jason');
// 获取input框存放的文件
//$('#i1')[0].files[0]
formdata.append('myfile',$('#i1')[0].files[0]);
$.ajax({
url:'',
type:'post',
data:formdata,
// ajax发送文件需要修改两个固定的参数
processData:false, // 告诉浏览器不要处理我的数据
contentType:false, // 不要用任何的编码，就用我formdata自带的编码格式，django能够自动识别改formdata对象
// 回调函数
success:function (data) {
alert(data)
}
})
});
// ajax传输文件需要借助于内置对象FormData
后端获取数据
print(request.FILES)
form表单与ajax 的异同点：
1、form表单不支持异步提交数据：
2、form表单不支持传输json 格式数据：
3、form表单与ajax默认传输数据的编码格式都是urlencoded
图片的解释：
