AJAX局部刷新和异步技术
Posted 青红*皂了个白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX局部刷新和异步技术相关的知识，希望对你有一定的参考价值。
用ajax实现简单的局部刷新技术：求乘法
稍微简单的ajax依赖于jQuery 所以首先要导入jQuery包，在写ajax 代码块
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
7 <title>首页</title>
8 </head>
9 <body>
10 <h4>这是home页面</h4>
11 <input type="text" id="s1">+
12 <input type="text" id="s2">=
13 <input type="text" id="s">
14 <button type="button" id="b1">提交</button>
15 <script src="/static/jquery-3.3.1.min.js"></script>
16 <script src="/static/bootstrap/js/bootstrap.min.js"></script>
17 <script>
18 $("#b1").on("click",function () {
19 $.ajax({
20 url:"/ajax_do/", #对应去执行哪个视图操作
21 type:"GET", #以哪种方式请求
22 data:{"s1":$("#s1").val(),"s2":$("#s2").val()}, #要传送过去的数据
23 success:function (data) { # data是后台返回的结果
24 $("#s").val(data); #将结果指定给文本框的值
25 }
26 })
27 })
28 </script>
29 </body>
30 </html>
后端对应的方法操作：
1 from django.views.decorators.csrf import csrf_exempt
2 @csrf_exempt
3 def home(request):
4 return render(request,‘home.html‘)
5 @csrf_exempt
6 def ajax_do(request):
7 s1=int(request.GET.get(‘s1‘))
8 s2=int(request.GET.get(‘s2‘))
9 print(s1,s2)
10 s=s1*s2 #后台得到的两个数据进行处理
11 return HttpResponse(s) #结果返回
以上是关于AJAX局部刷新和异步技术的主要内容，如果未能解决你的问题，请参考以下文章