Ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
优点：
1.AJAX使用Javascript技术向服务器发送异步请求
2.AJAX无须刷新整个页面
Ajax往后台发送数据
<body> <button class="btn">点我朝后台发数据</button> </body>
$(".btn").click(function () {
$.ajax({
//url:向后台发送请求的地址
url:'/index/',
//以什么方式发请求
type:'post',
//data:往后台提交的数据
data:{'name':'lll','age':18},
//成功的时候回调这个函数
success:function (data) {
alert(data)
}
})
})
通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jquery-3.3.1.js"> </script> <title>Title</title> </head> <body> <p><input type="text" name="add1" id="add1">+<input type="text" name="add2" id="add2">=<input type="text" name="sum" id="sum"></p> <button class="btn">点我</button> </body> <script> $(".btn").click(function () { $.ajax({ url:'add', type:'post', //$("#add1").val() 取到id为add1这个控件的value值 data:{'add1':$("#add1").val(),'add2':$("#add2").val()}, success:function (data) { //赋值 $("#sum").val(data) location.href='/index/' } }) }) </script> </html>
def add(request): if request.method=='GET': return render(request,'add.html') add1=request.POST.get('add1') add2=request.POST.get('add2') sum=int(add1)+int(add2) return HttpResponse(str(sum))
通过Ajax上传文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jquery-3.3.1.js"></script> <title>Title</title> </head> <body> <form action="/files/" method="post" enctype="multipart/form-data"> <p><input type="file" name="myfile" id="myfile"></p> </form> <button class="btn">ajax提交</button> </body> <script> $("。btn").click(function () { //上传文件,必须用FormData,生产一个formdata对象 var formdata=new FormData(); formdata.append('name',$("#name").val()); //取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来 formdata.append('myfile',$("#myfile")[0].files[0]); $.ajax({ url:'/files_ajax/', type:'post', //不预处理数据,(name=lqz&age=18) processData:false, //指定往后台传数据的编码格式(urlencoded,formdata,json) //现在用formdata对象处理了,就不需要指定编码格式了,不要给我编码了 contentType:false, data:formdata, success:function (data) { alert(data) } }) </script> </html>
def files_ajax(request): if request.method == 'GET': return render(request, 'files.html') else: # 提交文件从,request.FILES中取,提交的数据,从request.POST中取 myfiles = request.FILES.get('myfile') with open('img/%s' % (myfiles), 'wb') as f: for line in myfiles: f.write(line) return HttpResponse('上传成功')
通过Ajax提交json格式数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jquery-3.3.1.js"></script> <title>Title</title> </head> <body> <form > <p>用户名:<input type="text" name="name" id="name"></p> <p>密码:<input type="password" name="pwd" id="pwd"></p> </form> <button id="btn">ajax提交json格式</button> </body> <script> $('#btn').click(function () { var post_data={'user':$("#user").val(),'pwd':$("#pwd").val()}; console.log(typeof post_data); // 如何把post_data这个字典,转成json格式字符串 //JSON.stringify相当于python中json.dumpus(post_data) //pos是个字符串,json格式字符串 var pos=JSON.stringify(post_data); console.log(typeof pos); $.ajax({ url:'/json/', type:'post', data:pos, contentType:'application/json', //dataType:'json', success:function (data) { //如果data是json格式字符串,如何转成对象(字典)? //data=JSON.parse(data) console.log(typeof data) console.log(data) var ret=JSON.parse(data) console.log(typeof ret) console.log(ret.status) //alert(data) } }) }) </script> </html>
def add_json(request): if request.method=='GET': return render(request,'json.html') print(request.POST) print(request.GET) print(request.body) import json # res是个字典 res=json.loads(request.body.decode('utf-8')) print(res) print(type(res)) dic={'status':'100','msg':'登录成功'} # return HttpResponse('ok') # 返回给前台json格式 return HttpResponse(json.dumps(dic)) # return JsonResponse(dic)
请求的编码方式:
contentType:'application/json',
响应回来解析的方式
dataType:'json', --ajax这个方法调用这句 完成 data=JSON.parse(data) 如果后台使用HttpResponse(json.dumps('ok'))到前台返回一个object对象，不使用就是返回字符串（前提是 json.dumps传的是字典等，如果传的是字符串不管怎么样都都是字符串）
JsonResponse(dic) jsonresponse内部是进行('content_type', 'application/json')编码返回前台，直接返回一个object对象如果是字典直接用例如data.name取值，
就不需要前台进行转换，前台写了dataType:'json',那么JsonResponse就不会内部进行转换了，还是返回一个object对象
ajax方法内写了datatype：‘json’ 的后台可以返回字符串的也可以返回contenttype指定json的