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语法书写：
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 } ];
登录后复制
1.3.JSON文件
JSON 文件的文件类型是 “.json”JSON 文本的 MIME 类型是 “application/json”
1.4.JSON使用
JSON最常见的用法之一，是从web服务器上读取JSON格式的字符串数据，将JSON数据转化为JavaScript对象，然后在网页上使用该数据。
转化JSON格式字符串为JSON对象的方式有两种：
①使用JavaScript函数eval()
//最标准的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);
登录后复制
②使用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格式数据：
省市二级联动 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(); } 省级： ----请选择---- 市级： ----请选择----
登录后复制
实现效果如下：
推荐教程：《JS教程》
以上就是Ajax接收JSON数据的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2727500.html
