ajax介绍
一、什么是Ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步JavaScript和XML”。JavaScript语言与服务器进行一步交互，传输的数据为XML（传输的数据不只是XML，现在更多的是json数据）。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发送第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器结束就可以发送第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；
优点：
1、AJAX使用JavaScript技术向服务器发送 异步请求
2、AJAX无需刷新整个页面
二、案例
一、通过Ajax,实现前端输入两个数字，服务器加法，返回到前端页面
def add(request): if request.method == 'GET': return render(request, 'add.html') add1 = request.POST.get('add1') add2 = request.POST.get('add2') print(type(add2)) sum = int(add1) + int(add2) return HttpResponse(str(sum))
<!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 () { {#alert(dta)#} {#赋值#} $('#sum').val(data) location.href='/index/' } }) }) </script> </html>
基于Ajax进行登录验证：
用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，成功，则跳转到首页，否则，在页面上显示相应的错误信息
def login(request): if request.method == 'GET': return render(request, 'login.html') import json from app01 import models res = json.loads(request.body.decode('utf-8')) print(res['name']) # print(res[0]) name=request.POST.get('name') pwd=request.POST.get('pwd') # 方法一： # user=models.User.objects.filter(name=res['name'],pwd=res['pwd']) # 方法二 user=models.User.objects.filter(name=name,pwd=pwd).first() if user: dic = {'status': '100', 'msg': '登录成功'} else: dic={'status': '200', 'msg': '用户名错误或密码错误'} return JsonResponse(dic)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"> <script src="/static/jquery-3.3.1.js"></script> <title>登录</title> </head> <body> <div class="col-md-3 col-md-offset-3"> <form action=" login"> <p>用户名：<input type="text" name="name" id="name" class="form-control"></p> <p>密码：<input type="password" name="pwd" id="pwd" class="form-control"></p> </form> <button id="btn">ajax提交json格式</button> </div> </body> <script> $('#btn').click(function () { var post_data={'name':$("#name").val(),'pwd':$("#pwd").val()}; console.log(typeof post_data); var pos=JSON.stringify(post_data); console.log(typeof pos); $.ajax({ url:'/login/', type:'post', data:pos, contentType:'application/json', {#dataType:'json',#} success:function (data) { console.log(typeof data) console.log(data.status) if(data.status==100){ location.href='https://www.baidu.com/' } else {alert(data.msg)} } }) }) </script> </html>
三、上传文件
请求头ContentType
1 application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：
POST http://www.example.com HTTP/1.1 Content-Type: application/x-www-form-urlencoded;charset=utf-8 user=lqz&age=22
2 multipart/form-data
这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data。直接来看一个请求示例：
3 application/json
application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。
JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得我几年前做一个项目时，需要提交的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。
基于Ajax上传文件
def add_file(request): if request.method == 'GET': return render(request, 'add_files.html') # 这是个字典 dic_files = request.FILES myfile = dic_files.get('myfile') with open(myfile.name, 'wb') as f: # 循环上传过来的文件 for line in myfile: # 往空文件中写 f.write(line) return HttpResponse('ok')
<!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="text" name="name" id="name"></p>#} <p><input type="file" name="myfile" id="myfile"></p> <input type="submit" value="提交"> </form> <button id="btn">ajax提交文件</button> </body> <script> $("#btn").click(function () { //上传文件,必须用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>
四、Ajax提交json格式数据
$("#ajax_test").click(function () { var dic={'name':'lqz','age':18} $.ajax({ url:'', type:'post', contentType:'application/json', //一定要指定格式 contentType: 'application/json;charset=utf-8', data:JSON.stringify(dic), //转换成json字符串格式 success:function (data) { console.log(data) } }) })
提交到服务器的数据都在Request.body里，取出来自行处理
