Ajax는 JSON 데이터를 수신합니다.
- hzc앞으로
- 2020-06-24 09:39:173231검색
1. Ajax는 JSON 데이터를 받습니다
JSON: JavaScript Object Notation. JSON은 텍스트 정보를 저장하고 교환하기 위한 구문입니다. JSON은 XML보다 가볍고 효율적이며 구문 분석하기 쉽기 때문에 일반적으로 JSON 형식은 Ajax의 프런트엔드와 백엔드에서 데이터를 전송하는 데 사용됩니다.
1.1 JSON과 XML의 비교
JSON
JSON은 일반 텍스트입니다.
JSON은 "자기 설명적"(사람이 읽을 수 있음)
JSON은 계층 구조를 가집니다(값 내에 값이 존재함).
JSON은 JavaScript eval()을 통해 구문 분석 가능JSON 데이터는 AJAX를 사용하여 전송 가능XMLXML은 복잡한 노드가 있는 문서 구조입니다.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의 가장 일반적인 용도 중 하나는 웹 서버에서 JSON 형식의 문자열 데이터를 읽고 JSON 데이터를 JavaScript 개체로 변환한 다음 해당 데이터를 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 문자열을 JavaScript 개체로 변환하려면 JSON 파서를 사용하는 것이 더 안전합니다. JSON 파서는 JSON 문자열 텍스트만 인식할 수 있으며 스크립트를 컴파일하지 않습니다. 파싱 속도가 상대적으로 빠르고 바로 사용할 수 있다는 편리함이 있습니다. JSON 파서 사용: ①JSON 변환 JSONObj 관련 jar 패키지를 가져와야 합니다.
//②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 간의 연산 구현을 보여줍니다. 백엔드: 두 개의 지방 및 도시 도메인을 가상화하고 서블릿이 프런트엔드에 데이터를 전송할 수 있도록 지방 및 도시를 로드 및 획득하는 방법 제공: 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;
}
}제공 Ajax에 대한 CityProvinceServlet은 요청 주소를 제공합니다:
@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 Tutorial"
위 내용은 Ajax는 JSON 데이터를 수신합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제