- 第十篇：Django之Ajax
- 一、Ajax简介
- 二、jQuery实现AJAX
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法【类比python中的登录认证装饰器】。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）。
Ajax最大的特点是：异步提交和局部刷新。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
Ajax常见的应用场景
-
搜索引擎根据用户输入的关键字，自动提示检索关键字。【类比百度搜索，直接对当前输入数据进行检索】
-
网站注册时用户数据的查重【局部刷新】
其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。
整个过程中页面没有刷新，只是刷新页面中的局部位置而已。
当请求发出后，浏览器还可以进行其他 *** 作，无需等待服务器的响应。
补充：
"""向服务器发送请求的方式""" 1.浏览器地址栏直接输入url回车 GET请求 2.a标签href属性 GET请求 3.form表单 GET请求/POST请求 4.ajax GET请求/POST请求 二、jQuery实现AJAXAjax我们只了解jQuery封装之后的版本(不学原生的，因为原生ajax的比较复杂，同时在实际项目中也一般不用)，所以我们在前端页面使用ajax的时候需要确保导入了jQuery【CDN或者本地均可】。(并不只有jQuery能够实现ajax，其他的框架也可以，但是原理基本相同)
<!--CDN导入jQuery--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>1、Ajax简单小案例
要求：页面中有三个input框，在前两个框中输入数字，点击按钮，朝后端发送ajax请求，后端计算出结果，再返回给前端动态展示的到第三个input框中。【注意：整个过程页面不准有刷新，也不能在前端计算】
我们先简单搭建一个前端页面。
那么该如何进行 *** 作呢？
不急，我们先对ajax进行一个简单的测试，使用jQery方法给按钮添加绑定事件，具体代码如下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3"> <button id="btn">计算</button> <script> $(‘#btn‘).click(function () { // 朝后端发送ajax请求 $.ajax({ // 1.指定朝哪个后端发送ajax请求 url:‘‘, //不写就是朝当前地址提交【与form表单类似】 // 2.请求方式 type:‘post‘, // 不指定默认就是get，都是小写 // 3.数据 data:{‘username‘:‘yangyi‘, ‘password‘: 123}, // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果 success:function (args) { alert(args) } }) }) </script> </body> </html>我们在服务器中先进行测试。
def ab_ajax(request): if request.method == ‘POST‘: print(request.POST) return render(request, ‘ajaxtest.html‘)好了，到了这里，我们便可以解决上面的案例了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3"> <button id="btn">计算</button> <script> $(‘#btn‘).click(function () { // 朝后端发送ajax请求 $.ajax({ // 1.指定朝哪个后端发送ajax请求 url:‘‘, //不写就是朝当前地址提交【与form表单类似】 // 2.请求方式 type:‘post‘, // 不指定默认就是get，都是小写 // 3.数据 {#data:{‘username‘:‘yangyi‘, ‘password‘: 123},#} data:{‘num1‘:$(‘#d1‘).val(), ‘num2‘:$(‘#d2‘).val()}, // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果 success:function (args) { {#alert(args)#} $(‘#d3‘).val(args) } }) }) </script> </body> </html>服务器中进行如下修改，即可返回计算后的值。
def ab_ajax(request): if request.method == ‘POST‘: num1 = request.POST.get(‘num1‘) num2 = request.POST.get(‘num2‘) num = int(num1)+int(num2) return HttpResponse(str(num)) return render(request, ‘ajaxtest.html‘)那么，我们在后端传递一个Json格式的数据，使用HttpResponse返回。代码如下。
"""views.py""" import json def ab_ajax(request): if request.method == ‘POST‘: # 定义一个字典 dic = { ‘name‘: ‘yangyi‘, ‘age‘: 18, ‘gender‘: ‘male‘ } # 对字典进行序列化,然后进行返回 return HttpResponse(json.dumps(dic)) return render(request, ‘ajaxtest.html‘) """ajaxtest.html""" success:function (args) { # 异步回调函数 console.log(args) console.log(typeof args) args = JSON.parse(args) # 反序列化 console.log(args) console.log(typeof args) } """ HttpResponse解决方式 1.自己在前端利用JSON.parse() 2.在ajax里面配置一个参数 """那么我们使用JsonResponse对象来进行测试，看看传递过来的Json数据是都已经被反序列化？
"""views.py""" from django.http import JsonResponse def ab_ajax(request): if request.method == ‘POST‘: # 定义一个字典 dic = { ‘name‘: ‘yangyi‘, ‘age‘: 18, ‘gender‘: ‘male‘ } # 对字典进行序列化,然后进行返回 return JsonResponse(dic) return render(request, ‘ajaxtest.html‘) """ajaxtest.html""" success:function (args) { console.log(args) console.log(typeof args) }我们发现，使用JsonResponse对象传递的Json格式数据已经被反序列化，不需要在前端进行再次反序列，可以说是十分方便。【真的厉害】
总结：我们可以使用HttpResponse返回数据，回调函数不会自动帮你反序列化；但是如果后端直接用的是JsonResponse返回的数据，回调函数会自动帮你反序列化。
第十篇：Django之Ajax
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）