Ajax介绍及基础应用(二)

最新推荐文章于 2024-09-26 20:24:43 发布
最新推荐文章于 2024-09-26 20:24:43 发布
阅读量122 收藏
点赞数
分类专栏： Python Ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu673153041/article/details/94876175
版权

四、JSON

一.介绍JSON

  • JSON:JavaScript(JS) Object(对象) Notation(表现方式)
  • 以JS对象的格式来约束前后端交互的字符串数据

二.JSO - JS对象

var obj = {
  uname:"zhangsan",
  uage:30,
  ugender:"男"
}

三.JSON规范

1.使用JSON表示单个对象

  1. 使用{}来表示一个对象
  2. 在{}中使用key:value来表示属性(数据)
  3. key必须使用""(双引号)引起来
  4. value如果是字符串也必须使用""(双引号)引起来
  5. 多个key:value使用,(逗号)来分隔

    • 示例:

      var obj = '{"uname":"zhangsan","uage":30,}';

2.使用JSON表示一组对象

  • 使用[]表示一组对象

  • 示例:

    var users = '[{"uname":"zhangsan","uage":30},{"uname":"lisi","uage":40}]';

四.前端中处理JSON

1.语法

作用:将后端传递过来的JSON格式字符串转换为JSON对象
var js对象 = JSON.parse(JSON串);

  • 示例:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json - 前端中处理</title>
</head>
<body>
<script src="/static/js/jquery-1.11.3.js"></script>
<script>
    // 模拟一个JSON格式的字符串
    var jsonStr = '{"uname":"wang","uage":30}';
    // 通过JSON.parse()将jsonStr转换为JS对象
    var obj = JSON.parse(jsonStr);
    console.log("姓名:"+obj.uname);
    console.log("年龄:"+obj.uage);

    // 用JSON字符串来表示一组对象(uname,uage)
    // 将JSON字符串转换为JS对象/数组
    // 循环遍历数组,将每个人的信息输出在控制台上
    var users = '[{"uname":"zhangsan","uage":30},{"uname":"lisi","uage":40},{"uname":"wangwu","uage":34},{"uname":"jinlian","uage":30}]';
    var user = JSON.parse(users);
    for (var i = 0;i<user.length;i++){
        console.log("姓名:"+user[i].uname);
        console.log("年龄:"+user[i].uage);
    }
    console.log("使用jq循环遍历:");

    $(user).each(function (i,obj) {
        console.log("each姓名:"+obj.uname);
        console.log("each年龄:"+obj.uage);
    });
</script>
</body>
</html>

五.后端中处理JSON

1.在Python中的处理 - dumps

  1. 允许将元祖,列表,字典转换成JSON字符串
  2. 元祖,列表,字典中可以是字符串,也可以是元祖,列表,字典
  3. Python中提供了json模块,json模块中提供dumps方法实现JSON字符串的转换

2.在Django中的处理 - serializers

  1. 使用Django中提供的序列化类来完成QuerySet(查询集,是从服务器url里获取到的查询内容)到JSON字符串的转换

    • 语法示例:

      from django.core import serializers
QuerySet_Name = models.py中的类名.objects.all()
str = serializers.serialize('json',QuerySet_Name)
return HttpResponse(str)

3.后端中处理JSON总体示例

# django_app_name/views.py

def json_server(request):
    # 1.通过字典来模拟单个对象
    dic = {'uname':'maria','uage':30,'ugender':'male'}
    jsonStr = json.dumps(dic)
    # return HttpResponse(jsonStr)

    # 2.通过列表+字典模拟多个对象
    users = [{'uname':'maria','uage':30,'ugender':'male'},{'uname':'wangwu','uage':33,'ugender':'male'},{'uname':'jinlian','uage':28,'ugender':'女'}]
    # return HttpResponse(json.dumps(users))

    # 3.读取User实体中所有的数据并转换成JSON格式的字符串
    users = User.objects.all()
    str = serializers.serialize('json',users)
    return HttpResponse(str)

<!-- templates/json_server.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示所有注册表</title>
    <script src="/static/js/common.js"></script>
    <script src="/static/js/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $("#show").click(function () {
                var xhr = createXhr();
                xhr.open('get','/users/json_server',true);
                xhr.onreadystatechange = function(){
                    if (xhr.readyState === 4 && xhr.status === 200){
                        var str = xhr.responseText;
                        console.log(str);
                        var obj = JSON.parse(str);
                        console.log(obj);
                        var html = "";
                        for (var i = 0;i<obj.length;i++){
                            html += "<tr>";
                            html += "<td>"+obj[i].pk+"</td>";
                            html += "<td>"+obj[i].fields.uname+"</td>";
                            html += "<td>"+obj[i].fields.upwd+"</td>";
                            html += "<td>"+obj[i].fields.nickname+"</td>";
                            html += "</tr>";
                        }
                        $("#content").html(html)
                    }
                };
                xhr.send();
            });
        });
    </script>
</head>
<body>
    <button id="show">显示</button>
    <table width="400px" border="1">
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>密码</th>
            <th>昵称</th>
        </tr>
        <tbody id="content"></tbody>
    </table>
</body>
</html>

六.前端传递JSON数据给服务器端

1.前端:将数据封装成JS对象/数组

var params = {
  uname:"zhangsan",
  uage:30,
  ugender: "male",
}

2.前端:将JS对象转换成JSON格式的字符串

  • 方法:JSON.stringify()

  • 作用:将JS对象转换成JSON字符串

  • 示例:

    var jsonStr = JSON.stringify(params)

3.服务器端:接受响应数据

jsonStr = request.GET['xxxx']

4.服务器端:将JSON字符串转换为Python字典/列表

  • 方法:json.loads()

  • 作用:将JSON字符串转换成Python字典/列表

  • 示例:

    dic = json.loads(jsonStr)
通过dic['key']取值

  • 字典遍历:

    def server04():
    dic = {"cname": "python基础", "teacher": "wangwu"}
    for key,value in dic.items():
        print(key,value) # cname python基础 teacher wangwu
    for i in dic.values():
        print(i) # python基础 wangwu
    for j in dic.keys():
        print(j) # cname teacher
    print(dic.keys()) # dict_keys(['cname', 'teacher'])
    print(dic.values()) # dict_values(['python基础', 'wangwu'])
    print(dic.items()) # dict_items([('cname', 'python基础'), ('teacher', 'wangwu')])
server04()

5.前端传递JSON数据给服务器端总体示例

# django_app_name/views.py

def front_server(request):
    jsonStr = request.GET['params']
    # 通过json.loads()将jsonStr转换为Python字典
    dic = json.loads(jsonStr)
    print(dic,type(dic))
    msg = "姓名:%s,年龄:%s,性别:%s"%(dic['uname'],dic['uage'],dic['ugender'])
    return HttpResponse(msg)

<!-- templates/front_server.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>front_json</title>
    <script src="/static/js/common.js"></script>
    <script src="/static/js/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $("#btnJSON").click(function () {
                var xhr = createXhr();
                var params = {
                    uname:"zhangsan",
                    uage:30,
                    ugender:"male"
                };
                // 将params转换成JSON格式的字符串
                params = JSON.stringify(params);

                xhr.open('get','/users/front_server?params='+params,true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200){
                        alert(xhr.responseText)
                    }
                };
                xhr.send(null);
            });
        });
    </script>
</head>
<body>
    <button id="btnJSON">发送JSON数据</button>
</body>
</html>
Mr.刘胖胖
关注
专栏目录
Ajax 基础
流楚丶格念的博客
01-26 4923
AJAX基础1. 概述2. 快速上手2.1. readyState2.1.1. 时间轴2.2. 遵循 HTTP 1. 概述 Web 程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。 在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据： 地址栏输入地址，回车，刷新特定元素的 href 或 src 属性表单提交 这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应），如果我们可以通过 JavaScrip
AJAX技术基础介绍
10-30
#### 二、AJAX技术的关键组成部分 ##### 1. XMLHttpRequest XMLHttpRequest对象是AJAX技术的基础，它允许JavaScript在不重新加载整个页面的情况下与服务器进行异步通信。这意味着可以在不中断用户操作的情况下从...
Ajax基础知识+项目应用案例
辰兮要努力
02-29 1610
文章目录一.什么是Ajax，为什么要使用Ajax?二.同步、异步交互概念三.AJAX实现四.原生JS中的Ajax原理（五个步骤） 一.什么是Ajax，为什么要使用Ajax? AJAX是“Asynchronous JavaScript and XML”的缩写。 ① 他是指一种创建交互式网页应用的网页开发技术。 ②客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯...
Ajax基础（应用场景｜jquery实现Ajax｜注意事项｜Ajax发送json数据｜Ajax携带文件数据）
Mchen的博客
11-20 5718
AJAX翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互也是用XML进行数据传输（当然，传输的数据不只是XML，目前更多的使用Json数据）。（XML应用于Web开发的许多方面，常用于简化数据的存储和共享）AJAX不是什么新的编程语言，而是一种使用现有标准的新方法AJAX最大的优点就是不需要重新加载整个页面的情况下，可以与服务器交换数据并更新网页内容（简单来说就是，在网页前端刚输入完数据，后端其实已经验证完数据了，不需要等点击提交了）
Ajax基础语法总结
xzd2333的博客
03-14 1378
Ajax技术：在网页不跳转的情况下，向服务器请求数据 应用场景：局部刷新
ajax介绍及实现步骤
crkres9527
05-16 2376
ajax并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一起，在共同的协作中发挥各种作用 使用XHTML和CSS标准化呈现； 使用DOM实现动态显示和交互； 使用XML和XSLT进行数据交换与处理； 使用XMLHttpRequest进行异步数据处理； 使用JavaScript绑定和处理所有数据； ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响...
Ajax（阿贾克斯）基础
weixin_47672177的博客
09-26 7846
Ajax是什么？服务器是什么？如何实现前后端数据交互？实际开发中，网页的数据需要从服务器获取。而Ajax技术就是来实现这一功能的。
数据请求：Ajax基础
illion booked
05-02 2万+
Ajax 概述 它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。 Ajax 的应用场景 页面上拉加载更多数据 列表数据无刷新分页 表单项离开焦点数据验证 搜索框提示文字下拉列表 Ajax 运行原理及实现 Ajax 运行原理 Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。 Ajax 的...
AJAX 详解
热门推荐
06-19 2万+
Ajax基础知识，及常见问题详解
Ajax之二 Ajax基础
张晨光老师的播客
06-03 2567
[学习目标] F理解并掌握XMLHttpRequest对象的相关属性和方法的使用 F理解并掌握如何利用XMLHttpRequest对象读取xml格式文档 【本章简介】 Ajax是一组技术的集合，Asp.Net AJAX就是建立在这组技术的基础之上的。虽然Asp.Net AJAX尽量隐藏了Ajax的技术细节，但是要想明白Asp.Net
Ajax介绍和Axios基本使用
Carson's Blog
12-11 4514
Ajax介绍 Ajax本身就是Asynchronous JavaScript And XML的缩写，直译为：异步的JavaScript和XML。 在实际应用中Ajax指的是：不刷新浏览器窗口，不做页面跳转，局部更新页面内容的技术。 『同步』和『异步』是一对相对的概念，那么什么是同步，什么是异步呢？ 1. 同步和异步 1.1. 同步 多个操作按顺序执行，前面的操作没有完成，后面的操作就必须等待。所以同步操作通常是串行的。 1.2. 异步 多个操作相继开始并发执行，即使开始的先后顺序不同，但是由于它们各自是在
JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri
10-01
在"JavaScript语言与Ajax应用（第二版）"这本书中，作者董宁深入探讨了这两者的核心概念和技术应用。 1. **JavaScript基础**：JavaScript语言的基础包括变量、数据类型、运算符、流程控制（条件语句、循环语句）、...
asp.net中AJAX技术基础及应用 PPT
01-01
Web应用与桌面应用有着完全不同的运行环境和编程模型，在目前的技术条件下，Web应用要完全超越已发展多年的桌面应用所拥有的丰富交互特性，还是很困难的。
ajax及PHP操作数据库增删改查的基础应用实例.zip
03-27
"ajax及PHP操作数据库增删改查的基础应用实例.zip"是一个学习资源，旨在帮助初学者理解如何使用AJAX和PHP来实现数据库的增删改查操作。 首先，了解AJAX的基本工作原理是关键。它通过JavaScript创建XMLHttpRequest...
VUE 开发——AJAX学习（一）
weixin_74113429的博客
09-25 982
异步的javascript和XML，就是使用XMLHttp Request对象与服务器通信，浏览器和服务器进行数据交换的技术。语法：http://xxxx.com/xxx/xxx?1.请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容，可以在网络中查看。3.URL查询参数：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据。接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数。1.定义：统一资源定位符，简称网址，用于访问网络上的资源。URL：协议://域名/资源路径。
详解Ajax与axios的区别
weixin_56187723的博客
09-22 1160
Ajax与Axios在Web开发中都是用于发送HTTP请求的技术，但它们在多个方面存在显著的差异。
VUE 开发——AJAX学习（二）
weixin_74113429的博客
09-26 447
异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数；Promise：用于表示一个异步操作的最终完成（或失败）及其结果值。Promise对象一旦被兑现/拒绝，就是已敲定，状态无法再被改变。待定（pending）：初始状态，既没有被兑现，也没有被拒绝。同步代码：逐行执行，需原地等待结果后，才继续向下执行。成功调用：resolve（值）触发then（）执行。失败调用：reject（值）触发catch（）执行。功能：不离开当前页面，显示单独内容，供用户操作。
基于asp.net的工作流程审批系统设计与实现.docx
09-30
基于asp.net的工作流程审批系统设计与实现.docx
这是各种对象检测数据集的预处理相关工具脚本的集合.zip
最新发布
09-30
这是各种对象检测数据集的预处理相关工具脚本的集合
AJAX基础与实战应用
AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种网页开发技术，它允许在不刷新整个网页...掌握AJAX的工作原理和回调机制是前端开发人员必备的技能，尤其是在构建动态网页和实时数据交互的应用时。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值