一、简介:
1、异步提交,局部刷新:可以动态且实时捕捉前端的输入同时反馈给后端进行逻辑处理后再展示到前端,并且这种展示是局部页面的刷新,不会跳转或重置url。
2、Ajax不是某种独立的语言格式,只是现有方法的一种使用技巧。
3、Ajax最大的用途就是能够在不重载页面的情况下,可以与服务器进行数据交互并实时更新页面的部分内容。
4、原生的JS语法以及大部分衍生的框架都可以使用Ajax机制,以jQuery为例,可以直接使用jQuery的语法实现Ajax,所以使用前需要先导入jQuery模块。
5、之前通过url或form表单发送的get或post请求,也可以通过Ajax发送。
6、Ajax的基本形式:
①templates:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> {% load static %} <link rel="stylesheet" href="{% static ‘Bootstrap337/css/bootstrap.min.css‘ %}"> <script src="{% static ‘Bootstrap337/js/bootstrap.min.js‘ %}"></script> <script src="{% static ‘jQuery351.js‘ %}"></script> </head> <body> 即将显示后端传来的内容:<input type="text" value="" id="d1"> <input type="submit" value="点击显示" id="d2"> </body> <script> $d1Ele = $(‘#d1‘) $d2Ele = $(‘#d2‘) $d2Ele.on(‘click‘,function () { $.ajax({ // 向后端发ajax请求 url:‘‘, // 声明向哪个url对应的视图函数发请求,不写还是自身 type:‘post‘, // 声明请求方式,不写就是默认 get data:{‘name‘:‘tom‘, ‘age‘:18}, // 发给后端的数据 success:function (args) { // 定义回调函数,一旦后端反馈结果则触发该函数的执行 $d1Ele.val(args) } }) }) </script> </html>
②views.py:
def xxx(request):
if request.method == ‘POST‘:
name = request.POST.get(‘name‘)
age = request.POST.get(‘age‘)
info = ‘姓名是{},年龄是{}‘.format(name, str(age))
return HttpResponse(info)
return render(request, ‘xxx.html‘)
7、Ajax与JSON:
①如果后端是用的是JsonResponse返回的数据,Ajax的回调函数会自动反序列化成对象。
②如果后端是用HttpResponse返回的数据,Ajax的回调函数不会自动反序列化,还是JSON格式的字符串。
③实现HttpResponse反序列化的两种方式:
a、前端拿到数据后,再用JSON.parse()。
b、在Ajax请求内加个参数dataType:‘json‘。