当前位置：首页 > 编程语言 > Ajax(2) —— Ajax接收JSON数据

Ajax(2) —— Ajax接收JSON数据

2021-02-05 13:17

阅读：442

标签：amp   相对   获取   this   联动   循环   rtm   整数   col   

1.   Ajax接收JSON数据

JSON：JavaScript对象表示法（JavaScript Object Notation）。JSON是一种存储和交换文本信息的语法。因为JSON比XML更轻量，效率更高，更易解析，所以在Ajax中前后台传输数据一般都使用的是JSON格式。

1.1.JSON与XML的对比

数据格式

特点

JSON

JSON 是纯文本

JSON 具有“自我描述性”（人类可读）

JSON 具有层级结构（值中存在值）

JSON 可通过 JavaScript eval()进行解析

JSON 数据可使用 AJAX 进行传输

XML

XML是文档结构，节点复杂

XML可以通过JavaScript解析，需要循环遍历DOM读取节点信息

XML厚重且读取效率低

 

 

 

 

 

 

 

 

 

 

 

 

1.2.JSON语法

JSON语法是JavaScript语法的子集。

JSON语法的规则：

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

JSON数据的书写格式时：名称/值对，即字段名称（在双引号中），后面一个冒号，对应是值，JSON的值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true或false）、数组（在方括号中）、对象（在花括号中）、null。

常见的JSON语法书写：

1.3.JSON文件

  • JSON 文件的文件类型是 ".json"
  • JSON 文本的 MIME 类型是 "application/json"

1.4.JSON使用

JSON最常见的用法之一，是从web服务器上读取JSON格式的字符串数据，将JSON数据转化为JavaScript对象，然后在网页上使用该数据。

转化JSON格式字符串为JSON对象的方式有两种：

①使用JavaScript函数eval()

②使用JSON解析器

eval()函数可以编译并执行任何JavaScript代码，使用eval()隐藏了一个潜在的安全问题。

使用JSON解析器将JSON字符串转换为JavaScript对象是更安全的做法。

JSON解析器只能识别JSON字符串文本，不会编译脚本，相对解析速度更快，具有拿来即用的便捷。

使用JSON解析器：

①需要导入JSON转换JSONObj相关jar包；

技术图片

 

②转换对象可以是任何JSON字符串格式的文本，但是必须是标准的JSON格式：

//②jsonStr转json对象方式二：
var jsonStr2 = ‘{"name" : "黄小邪", "age" : 23, "sex" : true}‘;
//注意：使用JSON.parse转换jsonStr必须保证jsonStr是标准格式的字符串
var jsonObj2 = JSON.parse(jsonStr2);
console.debug(jsonObj2);

1.5.JSON与Ajax实现二级联动实例

这里使用JSON字符串操作并向前台传输JSON格式的数据来展示JSON与Ajax之间的操作实现。

后台：

虚拟了两个省、市Domain并提供加载获取省、市的方法供Servlet向前台传输数据：

City.java：

/**
 * 城市对象
 * 
 */
public class City {
    private Long id;
    private String name;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public City() {

    }

    public City(Long id, String name) {
        super();
        this.id = id;
        this.name = name;
    }

    /**
     * 根据省份id查询省份中的城市!
     * 
     * @return
     */
    public static List getCityByProvinceId(Long id) {
        
        List citys = new ArrayList();
        
        if (id == 1) {
            citys = Arrays.asList(
                    new City(1L,"成都"),
                    new City(2L,"南充"),
                    new City(3L,"绵阳"),
                    new City(4L,"遂林"),
                    new City(5L,"达州"),
                    new City(6L,"德阳"),
                    new City(7L,"乐山")
            );
        } else if (id == 2) {
            citys = Arrays.asList(
                    new City(11L,"广州"),
                    new City(12L,"佛山"),
                    new City(13L,"东莞")
            );
        } else if (id == 3) {
            citys = Arrays.asList(
                    new City(21L,"昆明"),
                    new City(22L,"玉溪"),
                    new City(23L,"丽江")
            );
        }
        return citys;
    }
}

Province.java：

public class Province {

    private Long id;
    private String name;

    public Province(Long id, String name) {
        super();
        this.id = id;
        this.name = name;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Province() {
        super();
    }

    public static List getAllProvince() {
        List provinces = new ArrayList();
        provinces.add(new Province(1L, "四川"));
        provinces.add(new Province(2L, "广东"));
        provinces.add(new Province(3L, "云南"));
        return provinces;
    }
}

提供一个CityProvinceServlet向Ajax提供请求地址：

@WebServlet("/loadData")
public class CityProvinceServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String cmd = req.getParameter("cmd");
        String id = req.getParameter("id");
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/json;charset=UTF-8");

        //加载省
        if(cmd.equals("province")){
            List provinceList = Province.getAllProvince();
            resp.getWriter().print(JSONSerializer.toJSON(provinceList));
            System.out.println("加载省！");
        }
        //加载市
        else {
            if(id != null && id != ""){
                List cityList = City.getCityByProvinceId(Long.parseLong(id));
                resp.getWriter().print(JSONSerializer.toJSON(cityList));
                System.out.println("加载市！");
            }

        }
    }
}

前台对应使用Ajax与JSON来解析传递过来的JSON格式数据：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>省市二级联动title>
    script type="text/javascript">
        function getAjax(){
            var ajax = null;
            if(XMLHttpRequest){
                ajax = new XMLHttpRequest();
            }else if(ActiveXObject){
                ajax = new ActiveXObject("Microsoft XMLHTTP");
            }
            return ajax;
        }

        function loadProvince() {
            var xhr = getAjax();
            xhr.open("GET", "/loadData?cmd=province");
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && xhr.status == 200){
                    //provinces：[{"id":1,"name":"四川"},{"id":2,"name":"广东"},{"id":3,"name":"云南"}]
                    var provinces = xhr.responseText;
                    var jsonObjArr = JSON.parse(provinces);
                    //操作DOM往省级option进行填充数据
                    //首先先创建每个option元素
                    //将jsonObj数据填充进option中
                    jsonObjArr.forEach(
                        function (obj) {
                            var option = document.createElement("option");
                            option.setAttribute("value", obj.id);
                            option.innerHTML = obj.name;
                            document.getElementById("province").appendChild(option);
                        }
                    );
                }
            };
            xhr.send();
        }
        loadProvince();

        function loadCity() {
            //得到id
            var id = document.getElementById("province").value;
            //如果是请选择，对应就不加载
            if(id == -1){
                document.getElementById("city").innerHTML = "";
                return;
            }
            //每次加载都初始化一次
            document.getElementById("city").innerHTML = "";
            var xhr = getAjax();
            xhr.open("GET", "/loadData?cmd=city&id=" + id);
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && xhr.status == 200){
                    //[{"id":1,"name":"成都"},{"id":2,"name":"南充"},{"id":3,"name":"绵阳"},{"id":4,"name":"遂林"},{"id":5,"name":"达州"},
                    // {"id":6,"name":"德阳"},{"id":7,"name":"乐山"}]
                    var cityes = xhr.responseText;
                    var jsonObjArr = JSON.parse(cityes);
                    jsonObjArr.forEach(
                        function (obj) {
                            var option = document.createElement("option");
                            option.setAttribute("value", obj.id);
                            option.innerHTML = obj.name;
                            document.getElementById("city").appendChild(option);
                        }
                    );
                    //去除掉----请选择------
                    document.getElementById("city").options.remove(0);
                }
            };
            xhr.send();
        }
    script>
head>
body>
    省级：select id="province" onchange="loadCity()">
        option value="-1">----请选择----option>
    select>
    市级：select id="city">
        option>----请选择----option>
    select>
body>
html>

实现效果如下：

技术图片

 

Ajax(2) —— Ajax接收JSON数据

标签：amp   相对   获取   this   联动   循环   rtm   整数   col   

原文地址：https://www.cnblogs.com/yif0118/p/13125751.html

上一篇：vfb运行js

下一篇：上传第一个个人github项目总结(基于QT TLE下载工具)

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Ajax(2) —— Ajax接收JSON数据
文章链接：http://soscw.com/index.php/essay/51350.html

评论

亲，登录后才可以留言！

热门文章

推荐文章

最新文章

置顶文章

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
Copyright © 2024 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1