中堂东莞网站建设,合肥大型网站设计,泉州网站建设方案服务,响应式网站404页面怎么做一、什么是Ajax AJAX#xff08;Asynchronous Javascript And XML#xff09;翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互#xff0c;传输的数据为XML#xff08;当然#xff0c;传输的数据不只是XML,现在更多使用json数据#xf…一、什么是Ajax AJAXAsynchronous Javascript And XML翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互传输的数据为XML当然传输的数据不只是XML,现在更多使用json数据。 同步交互客户端发出一个请求后需要等待服务器响应结束后才能发出第二个请求异步交互客户端发出一个请求后无需等待服务器响应结束就可以发出第二个请求。二、Ajax的特点 1、异步 客户端发出一个请求后无需等待服务器响应结束就可以发出第二个请求 2、局部刷新 例如 邮箱没写会局部刷新邮箱区域判断邮箱 三、Ajax优点 AJAX使用 Javascript 技术向服务器发送异步请求AJAX无须刷新整个页面四、 基于jquery的Ajax使用 1、基本语法 // 在templates模板层使用 $.ajax({url:/index/,type:post,//data:往后台提交的数据data:{name:lqz,age:18},//成功的时候回调这个函数success:function (data) {alert(data)} }) 2、完整使用语法 !-- 先导入jQuery -- script src/static/jquery-3.3.1.js /script button classsend_Ajaxsend_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 3、利用ajax提交表单中的数据 pinput typetext nameadd1 idadd1input typetext nameadd2 idadd2input typetext namesum idsum/p button classbtn点我/buttonscript$(.btn).click(function(){$.ajax({url:add,type:post,// 通过 .val() 获取值data:{add1:$(#add1).val(),add2:$(#add2).val},success:function(data){// 将数据写在val(data)中可以赋值$(#sum).val(data)location.href/index/}})}) /script 五、Ajax的执行流程 六、基于ajax进行文件上传 1、请求头ContentType 1application/x-www-form-urlencoded方式 这是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单如果不设置 enctype 属性那么最终就会以 application/x-www-form-urlencoded 方式提交数据。 2multipart/form-data方式 这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时必须让 form 表单的 enctype 等于 multipart/form-data 上面提到的这两种 POST 数据的方式都是浏览器原生支持的而且现阶段标准中原生 form 表单也只支持这两种方式通过 form 元素的 enctype 属性指定默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain不过用得非常少。   3application/json方式 现在越来越多的人把它作为请求头用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify服务端语言也都有处理 JSON 的函数使用 JSON 不会遇上什么麻烦。 2、基于Form表单上传文件 1模板层 !-- 必须指定 enctypemultipart/form-data -- form action/files/ methodpost enctypemultipart/form-datap用户名:input typetext namename idname/p!-- 必须指定typefile --pinput typefile namemyfile idmyfile/pinput typesubmit value提交 /form button idbtnajax提交文件/buttonscript$(#btn).click(function () {// 上传文件,必须用FormDatavar formdatanew FormData();formdata.append(name,$(#name).val());// 取出文件$(#myfile)[0].files拿到的是文件列表,取第0个把具体的文件取出来formdata.append(myfile,$(#myfile)[0].files[0]);$.ajax({url:/files_ajax/,type:post,// 告诉jQuery不要去处理发送的数据,(namelqzage18)processData:false,// 指定往后台传数据的编码格式(urlencoded,formdata,json)// 现在用formdata对象处理了,就不需要指定编码格式了,不要编码了contentType:false,data:formdata,success:function (data) {alert(data)}})}) /script 2视图层 def add_file(request):if request.methodGET:return render(request,add_files.html)# 这是个字典dic_filesrequest.FILESmyfiledic_files.get(myfile)with open(myfile.name,wb) as f:# 循环上传过来的文件for line in myfile:# 往空文件中写f.write(line)return HttpResponse(ok)def files_ajax(request):# 提交文件从,request.FILES中取,提交的数据,从request.POST中取namerequest.POST.get(name)print(name)dic_files request.FILESmyfile dic_files.get(myfile)with open(myfile.name, wb) as f:# 循环上传过来的文件for line in myfile:# 往空文件中写f.write(line)return HttpResponse(ok) 3路由层 url(r^files/$, views.add_file), url(r^files_ajax/, views.files_ajax), 注意点 1、基于form表单上传文件需要指定编码格式那么ajax一样也是首先我们先创建一个FormData的一个对象 2、我们通过append方法给对象传值append(value1,value2),相当于value1value2 3、processData:false, # 告诉jQuery不要去处理发送的数据contentType:false, # 告诉jQuery不要去设置Content-Type请求头 4、processData的值只能是布尔值因为这时的data的值是一个对象所以不需要进行处理了 六、基于ajax提交json格式数据 1、模板层 form p用户名:input typetext namename idname/pp密码:input typepassword namepwd idpwd/pinput typesubmit value提交 /formbutton idbtnajax提交json格式/button /bodyscript$(#btn).click(function () {var post_data{name:$(#name).val(),pwd:$(#pwd).val()};console.log(typeof post_data);//JSON.stringify相当于python中json.dumpus(post_data)把数据装换位json格式字符串//pos是个json格式字符串var posJSON.stringify(post_data);console.log(typeof pos);$.ajax({url:/json/, // url这里为空的话默认向该页面发出ajax请求 type:post, // type值为空的话默认为get方法data:pos,contentType:application/json,dataType:json,success:function (data) {//如果data是json格式字符串,如何转成对象(字典)?//dataJSON.parse(data)console.log(typeof data)console.log(data.status)/*console.log(data)var retJSON.parse(data)console.log(typeof ret)console.log(ret.status)*///alert(data)}})}) /script 2、视图层 def add_json(request):if request.methodGET:return render(request,json.html)print(request.POST)print(request.GET)print(request.body)import json# res是个字典resjson.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) 3、路由层 url(r^json/, views.add_json), 总结 1、如果是文件就先创建一个FormData对象,以keyvalue的位置参传数进去在ajax方法里data对应的值就是这个FormData对象所以在processData的值应该为falsecontentType的值也为false(让jquery不设置请求头)注意它文件在后面中request.FILES里面如果有其他input框所对应的value它的值在POST中取 2、如果不是上传文件就是form表单的里input的话就直接传了contentType默认为urlencoded编码方法 3、json格式数据首先是把对象给造出来并且把数据放里面然后转换成json格式字符串这里contentType必须为application/json这样它的的数据在request.body里是二进制格式 4、在前端接收到后台json格式数据可以在ajax那里写dataType:json它会自动转换成对象  转载于:https://www.cnblogs.com/zhangbingsheng/p/10663808.html