您的位置 首页 技术

Ajax接收JSON数据

1. Ajax接收JSON数据 JSON:JavaScript对象表示法(JavaScript Object Notation)。JSON是一种存储和交换文本信息的语法。因为JSO…

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语法书写:

<script type="text/javascript">        var json01 = {}; //json的第一种写法:json对象        var json02 = []; //json的第二种写法:json数组        // json对象一般写法        var json03 = {            name:"张小三",            age:45,            sex:true        };             // json对象标准格式        var json03_1 = {                              "name":"张小三",                              "age":45,                              "sex":true        };             //json数组        var json04 = [{            name:"张小三",            age:45,            sex:true        },{            name:"李华",            age:20,            sex:false        }        ];              var json05 = [{            name:"张小三",            age:45,            sex:true,            department:{                id:1,                name:"IT部",                employees:[                {name:"xxx", age:23},                {name:"yyy", age:24}                ]            }        },{            name:"李华",            age:20,            sex:false        }        ];</script>

1.3.JSON文件

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

1.4.JSON使用

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

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

①使用JavaScript函数eval()

<script type="text/javascript">        //最标准的json格式:key必须要加双引号        var formatJson = {            "name" : "黄小邪",            "age" : 23,            "sex" : true        };        //①jsonStr转json对象方式一:        //eval:计算javascript字符串,并把它作为脚本代码来执行        //前台接收到的是json字符串格式,拿数据需要把字符串转化成json对象        var jsonStr = '{name : "黄小邪", age : 23, "sex" : true}';        //注意:使用eval转换jsonStr,必须前后加括号,这里不区分是否标准格式        var jsonObj = eval("("+ jsonStr +")");        console.debug(jsonObj);</script>

②使用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<City> getCityByProvinceId(Long id) {                List<City> citys = new ArrayList<City>();                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<Province> getAllProvince() {        List<Province> provinces = new ArrayList<Province>();        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<Province> provinceList = Province.getAllProvince();            resp.getWriter().print(JSONSerializer.toJSON(provinceList));            System.out.println("加载省!");        }        //加载市        else {            if(id != null && id != ""){                List<City> cityList = City.getCityByProvinceId(Long.parseLong(id));                resp.getWriter().print(JSONSerializer.toJSON(cityList));                System.out.println("加载市!");            }        }    }}

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

<!DOCTYPE html><html><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 = "<option>----请选择----</option>";                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>

实现效果如下:

推荐教程:《JS教程》

以上就是Ajax接收JSON数据的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:http://www.24ketang.cn/87316.html

为您推荐

返回顶部