Ajax简介
Ajax翻译成中文就是"异步Javascript和XML",即使用Javascript语言与服务器进行异步交互,传输的数据为XML(现在更多使用json数据).
同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求.
异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.
Ajax除了异步的特点外,还有一个就是:浏览器页面局部刷新(这一特点给用户的感受是在不知不觉中完成请求和响应过程).
场景:
优点:
Ajax使用Javascript技术向服务器发送异步请求.
Ajax无需刷新整个页面.
基于jquery的Ajax实现
<button class="send_Ajax">send_Ajax</button> <script> $(".send_Ajax").click(function(){ $.ajax({ url:"/handle_Ajax/", type:"POST", data:{username:"Yuan",password:123}, success:function(data){ console.log(data) }, error: function (jqXHR, textStatus, err) { console.log(arguments); }, complete: function (jqXHR, textStatus) { console.log(textStatus); }, statusCode: { '403': function (jqXHR, textStatus, err) { console.log(arguments); }, '400': function (jqXHR, textStatus, err) { console.log(arguments); } } }) }) </script>
案例:
用户名是否已被注册
在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求.服务器返回true或false,返回true表示这个用户名已经被注册过,返回false表示没有注册过.客户端得到服务器返回的结果后,确定是否在用户名文本框后显示"用户名已被注册"的错误信息.
基于Ajax进行登录验证
用户在表单输入用户名与密码,通过Ajax提交给服务器,服务器验证后返回响应信息,客户端通过响应信息确定是否登录成功.成功,则跳转到首页,否则,在页面上显示响应的错误信息.
文件上传
请求头ContentType
ContentType指的是请求体的编码类型,常见的类型有3中:
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=abc&age=12
2.multipart/form-data
这也是一个常见的POST数据提交的方式,我们使用form表单上传文件时,必须让<form>表单的enctype等于multipart/form-data
3.application/json
application/json用来告诉服务端消息主题是序列化后的JSON字符串
基于form表单的文件上传
模板部分
<form action="/file_put/" method="post" enctype="multipart/form-data"> 姓名<input type="text" name="user"> 文件<input type="file" name="file_obj"> <input type="submit"> </form>
视图部分
def index(request): print(request.body) #原始的请求体数据 print(request.GET) #GET请求数据 print(request.POST) #POST请求数据 print(request.FILES) #上传的文件数据 return render(request, "index.html")
基于Ajax的文件上传
模板
<form> 用户名 <input type="text" id="user"> 文件 <input type="file" id="avatar"> <input type="button" id="ajax-submit" value="ajax-submit"> </form> <script> $("#ajax-submit").click(function(){ var formdata=new FormData() formdata.append("user",$("#user").val()); formdata.append("avatar_img",$("#avatar")[0].files[0]); $.ajax({ url:"", type:"post", data:formdata, processData:false, #不处理数据 contentType:false, #不设置内容类型 success:function(data){ console.log(data) } }) }) </script>
视图
def index(request): if request.is_ajax(): print(request.body) #原始的请求体数据 print(reqeust.GET) #GET请求数据 print(request.POST) #POST请求数据 print(request.FILES) #上传的文件数据 return HttpResponse("OK") return render(request, "index.html")