一、什么是Ajax

• AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。
• 即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，现在更多使用json数据）。

• AJAX 不是新的编程语言，而是一种使用现有标准的新方法

• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
  • 同步交互：
    • 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：
    • 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

场景：

优点：

1. 异步提交
2. 局部刷新

二、Ajax的案例

<script>$(".btn").click(function () {var inp1 = $("#inp1").val();var inp2 = $("#inp2").val();// 把获取到的两个值提交到后端，然后让Python来计算，然后返回$.ajax({url:'', // 默认不写，就是朝当前地址传递type:'post',dataType:'json',data:{inp1:inp1, inp2:inp2},// 回调函数用来接收后端返回的数据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')