AJAX

AJAX准备知识:JSON

什么是JSON?

  • JSON指的是JavaScript对象表示法(JavaScript Object Notation )

  • JSON是轻量级的文本数据交换格式

  • JSON独立语言

  • JSON具有自我描述,更易理解

JSON使用JavaScript语法来描叙数据对象,但是JSON仍然独立于语言和平台.JSON解析器和JSON库支持许多不同的编程语言.

AJAX介绍

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

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

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行.

  • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才会发出第二个请求.

  • 异步交互:客户端发出请求后,无需等待服务器响应结束,就可以发出第二个请求.

需求示例:

页面输入两个整数,通过AJAX传输到后端计算结果并返回:

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>AJAX局部刷新示例</title>
 8 </head>
 9 <body>
10 <div>
11     <input type="text" id="i1"> +
12     <input type="text" id="i2"> =
13     <input type="text" id="i3">
14     <input  type="submit" value="AJAX结果提交" id="b1">
15 </div>
16 {#上传文件#}
17 <div>
18     <input type="file" id="f1">
19     <input type="submit" value="提交" id="b2" >
20 </div>
21 <script src="/static/jquery-3.3.1.min.js"></script>
22 {#CSS内容#}
23 <script>
24     {#b1触发点击事件#}
25     $('#b1').on('click', function () {
26         $.ajax({
27 
28             url: '/ajax_add/',
29             type: 'GET',
30             data: {"i1":$("#i1").val(),"i2":$("#i2").val()},
31             success: function (data) {
32                 $('#i3').val(data);
33             }
34         })
35     })
36 </script>
37 </body>
38 </html>
View Code

 views文件:

# 视图函数
def login(request):

    return render(request, 'login.html')


# 运算视图函数
def ajax_add(request):
    i1 = int(request.GET.get('i1'))
    i2 = int(request.GET.get('i2'))
    ret = i1 + i2
    return JsonResponse(ret, safe=False)

 

　　

posted @ 2018-10-16 22:22  Hear7  阅读(214)  评论(0)  编辑  收藏  举报