Ajax实现接收JSON数据的方法
发布时间：2020-06-24 14:54:04
来源：亿速云
阅读：127
作者：元一
这篇文章将为大家详细讲解有关Ajax实现接收JSON数据的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
JSON：(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
Ajax(Asynchronous JavaScript and XML)，直译为“异步的JavaScript与XML技术”，是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页，由杰西·詹姆士·贾瑞特所提出。与传统的Web应用相比，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。
与XML的对比
JSON
JSON 是纯文本
JSON 具有“自我描述性”(人类可读)
JSON 具有层级结构(值中存在值)
JSON 可通过 JavaScript eval()进行解析
JSON 数据可使用 AJAX 进行传输
XML
XML是文档结构，节点复杂
XML可以通过JavaScript解析，需要循环遍历DOM读取节点信息
XML厚重且读取效率低
语法
JSON语法是JavaScript语法的子集。
JSON语法的规则：数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
JSON数据的书写格式时：名称/值对，即字段名称(在双引号中)，后面一个冒号，对应是值，JSON的值可以是：数字(整数或浮点数)、字符串(在双引号中)、逻辑值(true或false)、数组(在方括号中)、对象(在花括号中)、null。
常见的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
}
];
文件JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/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 +")");
(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}';
//注意：使用转换jsonStr必须保证jsonStr是标准格式的字符串
var jsonObj2 = (jsonStr2);
(jsonObj2);
与Ajax实现二级联动实例
这里使用JSON字符串操作并向前台传输JSON格式的数据来展示JSON与Ajax之间的操作实现。
后台：
虚拟了两个省、市Domain并提供加载获取省、市的方法供Servlet向前台传输数据：
：/**
* 城市对象
*
*/
public class City {
private Long id;
private String name;
public Long getId() {
return id;
}
public void setId(Long id) {
= id;
}
public String getName() {
return name;
}
public void setName(String name) {
= name;
}
public City() {
}
public City(Long id, String name) {
super();
= id;
= name;
}
/**
* 根据省份id查询省份中的城市!
*
* @return
*/
public static List getCityByProvinceId(Long id) {
List citys = new ArrayList();
if (id == 1) {
citys = (
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 = (
new City(11L,"广州"),
new City(12L,"佛山"),
new City(13L,"东莞")
);
} else if (id == 3) {
citys = (
new City(21L,"昆明"),
new City(22L,"玉溪"),
new City(23L,"丽江")
);
}
return citys;
}
}
：public class Province {
private Long id;
private String name;
public Province(Long id, String name) {
super();
= id;
= name;
}
public Long getId() {
return id;
}
public void setId(Long id) {
= id;
}
public String getName() {
return name;
}
public void setName(String name) {
= name;
}
public Province() {
super();
}
public static List getAllProvince() {
List provinces = new ArrayList();
(new Province(1L, "四川"));
(new Province(2L, "广东"));
(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 = ("cmd");
String id = ("id");
("UTF-8");
("text/json;charset=UTF-8");
//加载省
if(("province")){
List provinceList = ();
().print((provinceList));
("加载省！");
}
//加载市
else {
if(id != null && id != ""){
List cityList = ((id));
().print((cityList));
("加载市！");
}
}
}
}
前台对应使用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();
("GET", "/loadData?cmd=province");
= function () {
if( == 4 && == 200){
//provinces：[{"id":1,"name":"四川"},{"id":2,"name":"广东"},{"id":3,"name":"云南"}]
var provinces = ;
var jsonObjArr = (provinces);
//操作DOM往省级option进行填充数据
//首先先创建每个option元素
//将jsonObj数据填充进option中
(
function (obj) {
var option = ("option");
("value", );
= ;
("province").appendChild(option);
}
);
}
};
();
}
loadProvince();
function loadCity() {
//得到id
var id = ("province").value;
//如果是请选择，对应就不加载
if(id == -1){
("city").innerHTML = "----请选择----";
return;
}
//每次加载都初始化一次
("city").innerHTML = "";
var xhr = getAjax();
("GET", "/loadData?cmd=city&id":1,"name":"成都"},{"id":2,"name":"南充"},{"id":3,"name":"绵阳"},{"id":4,"name":"遂林"},{"id":5,"name":"达州"},
// {"id":6,"name":"德阳"},{"id":7,"name":"乐山"}]
var cityes = ;
var jsonObjArr = (cityes);
(
function (obj) {
var option = ("option");
("value", );
= ;
("city").appendChild(option);
}
);
//去除掉----请选择------
("city").(0);
}
};
();
}
省级：
----请选择----
市级：
----请选择----
实现效果如下：
关于Ajax实现接收JSON数据的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。