AJAX 不是新的编程语言,而是一种使用现有标准的新方法
场景:
优点:
-
- $(".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);#}
- }
- })
-
- })
-
- 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')