码迷,mamicode.com
首页 > Web开发 > 详细

AJAX

时间:2018-10-17 00:07:03      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:ati   open   doctype   head   这一   数据   图片   close   query   

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)

 

  

AJAX

标签:ati   open   doctype   head   这一   数据   图片   close   query   

原文地址:https://www.cnblogs.com/caodneg7/p/9801106.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!