当前位置：首页 > news >正文

关于建设公司网站的建议手机百度正式版

news 2025/7/28 20:59:23

关于建设公司网站的建议,手机百度正式版,临安网站建设,保定做网站的公司目录一、什么是Ajax 二、Ajax引入案例小结三、前后端数据传输的编码格式(contentType) 【1】form表单【2】编码格式【3】Ajax 【4】代码演示四、Ajax发送JSON格式数据【1】引入【2】后端【3】总结五、Ajax提交文件数据【发送文件数据的格式】【结…

一、什么是Ajax

二、Ajax引入

案例

小结

三、前后端数据传输的编码格式(contentType)

【1】form表单

【2】编码格式

【3】Ajax

【4】代码演示

四、Ajax发送JSON格式数据

【1】引入

【2】后端

【3】总结

五、Ajax提交文件数据

【发送文件数据的格式】

【结论】

六、Ajax结合layer弹窗实现二次确认

七、批量插入数据

【1】项目需求

【2】解决方案

一、什么是Ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。
即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，现在更多使用json数据）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：
  - 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：
  - 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

场景：

优点：

异步提交
局部刷新

二、Ajax引入

案例

<script>//给input框绑定一个失去焦点的事件$(".btn").click(function () {var inp1 = $("#inp1").val();var inp2 = $("#inp2").val();// 把获取到的两个值提交到后端，然后让Python来计算，然后返回//$.ajax为固定用法，表示启用ajax$.ajax({//url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交    url:'', //type为标定你这个ajax请求的方法type:'post',dataType:'json',// 回调函数用来接收后端返回的数据data:{inp1:inp1, inp2:inp2},//success为回调函数，参数data即后端给你返回的数据success:function (res) {// {"username": "kevin", "password": 123}console.log(res,)  // 就是拿后端返回的数据// 反序列化{#res=JSON.stringify()#}// 后端返回的数据别忘了反序列化，但是你的护短别往了序列化{#res=JSON.parse(res)#}console.log(typeof res)  // 就是拿后端返回的数据console.log(res.username)  // 就是拿后端返回的数据console.log(res.password)  // 就是拿后端返回的数据{#$("#inp3").val(res);#}}})})
</script>def ab_ajax(request):# if request.is_ajax():if request.method=='POST':'''接收ajax提交过来的数据'''# <QueryDict: {'inp1': ['1'], 'inp2': ['1']}>print(request.POST)# d1 = request.POST.get('inp1') # str# d2 = request.POST.get('inp2') # str# d3 = int(d1) + int(d2)# 序列化import json# json.dumps(d3)user_dict = {"username":"kevin", "password":123}# return HttpResponse(json.dumps(d3))return HttpResponse(json.dumps(user_dict))# return JsonResponse(user_dict)return render(request, 'ab_ajax.html')

小结

(1)基本语法

<script>// 先给按钮绑定点击事件$('#btn').click(function () {// 向后端发送Ajax请求$.ajax({// (1)指定发送后端的请求接口url: '',// 不写就是朝当前地址发送请求// (2)请求方式type: "post", // 不指定默认就是 get 全小写// (3)提交数据data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},// (4)异步提交有一个回调函数 (异步回调机制)// 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果success: function (args) {{#alert(args)#}// 通过DOM操作动态数据渲染到第三个 input 框中console.log(args) // string$('#d3').val(args)},})})
</script>

(2)注意

针对后端如果是用 HttpResponse 返回的数据，回调函数不会自动帮我们反序列化
针对后端如果是用 JsonResponse 返回的数据，回调函数会自动帮我们反序列化

(3)HttpResponse 解决方式

后端先进行序列化，再返回数据给前端
前端加参数进行反序列化