轻淘客网站建设,急招工地土建施工员,西安建站,wordpress 自定义函数Ajax的特点
异步提交#xff1a;Ajax采用异步通信方式#xff0c;能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据#xff0c;提升了用户体验。无需插件#xff1a;Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的#xff0c;无需安装插件或…Ajax的特点
异步提交Ajax采用异步通信方式能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据提升了用户体验。无需插件Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的无需安装插件或控件。局部刷新Ajax能够实现局部刷新只更新需要更新的部分而不是整个页面。支持多种格式数据交互Ajax不仅支持XML格式数据交互还支持JSON、HTML、文本等多种格式的数据交互。提高性能因为Ajax可以在页面保留数据只更新需要更新的部分减少了不必要的请求和响应从而提高了网站性能。提供多种编程语言支持Ajax不仅支持Javascript编程还支持其他编程语言如PHP、ASP、Python等。可以实现动态效果Ajax可以用来实现动态效果如自动补全、搜索框提示、无限滚动等。 Ajax案列 views from django.shortcuts import render, HttpResponsedef a_ajax(request):if request.method POST:接受ajax提交的数据print(request.POST) # QueryDict: {inp1: [1], inp2: [1]}# d1 request.POST.get(inp1)# d2 request.POST.get(inp2)# d3 int(d1)int(d2)# print(d3)l_dict {username: kk, password: 123}import jsonreturn HttpResponse(json.dumps(l_dict))return render(request, a_ajax.html)HTML文件 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/scriptlink hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css relstylesheet
{# script srchttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js/script#}
/head
body
input typetext idinp1
input typetext idinp2
input typetext idinp3
button classbtn提交/button
/body
/htmlscript$(.btn).click(function() {var inp1 $(#inp1).val();var inp2 $(#inp2).val();//获取到的数据返回到后端使用python来计算$.ajax({url: ,//不写默认朝当前地址传递type: post,//默认为getdata: {inp1: inp1, inp2: inp2},//回调函数用来压接受后端返回的数据success: function (res) {console.log(res)//获取值{#$(#inp3).val(res)#}//进行返序列化//后端返回的数据别忘记返序列化后端记得序列化res JSON.parse(res)console.log(res.username)console.log(res.password)}})})
/script 前后端传输数据的编码格式 我们只研究post请求方式get没有请求方式他的格式为 getindex地址a1b2 参数直接在url后面 post的请求方式 form表单 Ajax api工具 1. form表单的post请求
默认的编码格式urlencode
数据的传输方式titledasdasprice2312datepublish2authors3k,v形式的键值对传输
后端如何接收把前端提交的数据封装到request.POST中而传输的文件则在request.FILES中
提交form-data文件数据enctypeform-data
传输方式titledasdasprice2312datepublish2authors3 2. Ajax提交POST请求
默认Ajax提交数据 还是在request,POST中接受默认编码格式urlencode
需要修改的contypejson 3. Ajax提交json的格式数据
json格式的数据提交后
设置提交json格式 $.ajax({url: ,//不写默认朝当前地址传递type: post,//默认为getdata: JSON.stringify({inp1:inp1, inp2:inp2}),contentType: application/json,//回调函数用来压接受后端返回的数据success: function (res) {console.log(res) 4. Ajax提交文件数据 script$(.btn).click(function (ev) {console.log(123);// 要获取到文件数据{#console.log($(#myfile)[0].files[0]) // C:\fakepath\123.png#}// 提交文件数据需要借助于formdata对象var myFormDataObj new FormData;var username $(#username).val();var myfile $(#myfile)[0].files[0];myFormDataObj.append(username, username);myFormDataObj.append(myfile,myfile);$.ajax({url: ,type: post,{#data: JSON.stringify({a: 1, b: 2}), // 序列化的 {a:1, b:2}#}data: myFormDataObj, // 序列化的 {a:1, b:2}{#contentType: application/json, // json格式的#}contentType:false, // 告诉浏览器不要给我的编码格式做任何的处理processData: false, //success: function (res) {}})})
/script
