Ajax
文章参考：https://www.cnblogs.com/Dominic-Ji/p/9234099.html
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
Ajax传输数据
<!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>
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')
from django.conf.urls import url
from app01 import views
urlpatterns=[
url(r'^ajax_test/',views.ajax_test),
]
Ajax 提交文件格式
前端提交数据的编码方式------------->contentType
urlencoded name=jason&pwd=123&xxx=xxx
formdata 文件格式
application/json {“name”:“jason”}
注意:在写web相关的项目的时候,一定要指定你提交的数据到底是什么编码格式
你在提交数据的时候,不能骗后端
ajax提交提交json格式数据
$('#b1').click(function(){
$.ajax({
url:'', # 不写默认朝当前路径提交
type:'post', # 提交数据的方式
data:JSON.stringify({'name':'jason'}),
contentType:'application/json'
success:function(data){
console.log(data)
}
})
})
Ajax传输文件
html中
<body>
<input type='file' id ='i1'>
<button id='b1'>提交文件</button>
<scrpipt>
$('#b1').click(function(){
//传输文件必须使用内置对象formdata
let formdata = new FormData;
formdata.append('name'='Jason')
dormdata.append('myfile',$('#i1')[0].files[0]);
$.ajax({
url:'',
type:'post',
data:formdata,
processData:false //不要处理我的数据 name=jason&password=123
contentType:false //不需要指定任何编码，按照我formData内部的数据格式即可
success:function(data){
alert(data)
}
})
})
