JavaWeb 에서 Ajax 가 JSon 형식 에 대한 분석

Json 형식 에 대한 Ajax 해석       JSON 소개        JSON 구 조 는 두 가지 구조 가 있 습 니 다. json 은 쉽게 말 하면 자바 script 의 대상 과 배열 입 니 다. 그래서 이 두 가지 구 조 는 대상 과 배열 의 두 가지 구조 입 니 다. 이 두 가지 구 조 를 통 해 각종 복잡 한 구조 1, 대상 을 나 타 낼 수 있 습 니 다. 대상 은 js 에서 '{}' 로 묶 인 내용 을 나타 내 고 데이터 구 조 는 {key: value, key: value,...} 의 키 값 이 맞 는 구조 입 니 다.대상 을 대상 으로 하 는 언어 에서 key 는 대상 의 속성 이 고 value 는 대응 하 는 속성 값 이기 때문에 쉽게 이해 할 수 있 습 니 다. 값 을 얻 는 방법 은 대상 입 니 다. key 는 속성 값 을 얻 습 니 다. 이 속성 값 의 유형 은 숫자, 문자열, 배열, 대상 몇 가지 일 수 있 습 니 다.2. 배열: 배열 은 js 에서 괄호 '[]' 로 묶 인 내용 입 니 다. 데이터 구 조 는 ['자바', '자바 script', 'vb',...] 이 고 수치 채취 방식 은 모든 언어 와 마찬가지 로 색인 으로 가 져 옵 니 다. 필드 값 의 유형 은 숫자, 문자열, 배열, 이미지 몇 가지 일 수 있 습 니 다.대상, 배열 두 가지 구 조 를 거 쳐 복잡 한 데이터 구조 로 조합 할 수 있다.       위 와 같은 구성 원 리 를 바탕 으로 JSON 은 JavaScript 대상 에 표 시 된 데 이 터 를 문자열 로 변환 한 다음 에 함수 간 에 이 문자열 을 쉽게 전달 하거나 비동기 응용 프로그램 에서 문자열 을 웹 클 라 이언 트 에서 서버 엔 드 프로그램 에 전달 할 수 있 습 니 다. 마찬가지 로 JSON 도 자바 대상 에 표 시 된 데 이 터 를 문자열 로 변환 할 수 있 습 니 다.전단 에 전 달 된 Ajax 로 해석 합 니 다.        가장 간단 한 형식 으로 다음 과 같은 JSON 으로 이름 / 값 대 를 표시 할 수 있 습 니 다. {"firstName": "Brett"}        이러한 키 / 값 은 여러 개 일 수 있 습 니 다: {"name": "aaa", "sex": "남", "age": "20"}        문법 적 으로 는 명칭 / 값 대 에 비해 큰 장점 이 없 지만, 이 경우 JSON 이 사용 하기 쉽 고 가 독성 이 좋다.값 의 배열 - 한 조 의 값 을 표시 해 야 할 때 JSON 은 가 독성 을 높 일 뿐만 아니 라 복잡성 도 줄 일 수 있다.JSON 을 사용 하면 괄호 가 있 는 여러 개의 기록 을 묶 으 면 됩 니 다.
{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "111111" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "22222" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "33333" }
]}
같은 문법 으로 여러 개의 값 (값 마다 여러 개의 기록 포함) 을 표시 할 수 있 습 니 다.
{ "programmers": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "3333" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "1222" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "3333" }
 ],
"authors": [
  { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
  { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
  { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
 ],
"musicians": [
  { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
 ]
}
JSon 도 이렇게 쓸 수 있 습 니 다. {"listacountsresponse": {"count": 1, "account": [ {"id":5,"name":"xian1","accounttype":0,"domainid" :2,"domain":"Server","receivedbytes":649444,"sentbytes":175467975,"vmlimit":"20","vmtotal":2,"vmavailable" :"18","iplimit":"20","iptotal":1,"ipavailable":"19","volumelimit":"20","volumetotal":2,"volumeavailable" :"18","snapshotlimit":"20","snapshottotal":0,"snapshotavailable":"20","templatelimit":"20","templatetotal" :0,"templateavailable":"20","vmstopped":0,"vmrunning":2,"state":"enabled","user":[{"id":5,"username" :"xian1","firstname":"Eric","lastname":"Tang","email":"[email protected]","created":"2012-03-22T09 :36:44+0800","state":"enabled","account":"xian1","accounttype":0,"domainid":2,"domain":"Server","timezone" :"Asia/Shanghai"}]}} 주: 제 이 슨 은 ajax 개발 에 점점 더 많이 사용 되 고 있 습 니 다. 물론 백 엔 드 (phop, 자바 등 도 많이 사용 되 고 있 습 니 다) 에서 일반 프로그램 에서 진 제 이 슨 코드 는 한 줄 로 줄 어 들 었 습 니 다. 전단 개발 자 에 게 는 가 독성 이 매우 떨 어 져 사용 하기 어렵 습 니 다.      JSON 형식 이 xml 를 대체 하여 네트워크 전송 에 큰 편 의 를 가 져 왔 지만 xml 의 일목요연 함 이 없 었 다. 특히 json 데이터 가 길 때 우 리 는 번 거 롭 고 복잡 한 데이터 노드 검색 에 빠 질 것 이다. JSON 데이터 형식 이 정확 한 지, 적 거나 다 중 기호 가 있 는 지 판단 할 방법 이 없어 서 프로그램 이 해석 할 수 없다.하지만 내 국 인의 온라인 도구 인 베 제 이 슨 은 많은 프로그래머 들 에 게 시원 한 바람 을 불 어 넣 었 다. json 데 이 터 를 온라인 으로 포맷 하 는 도 구 를 추천 합 니 다.       json. parser. online. fr (브 라 우 저 에서 사용, 강력 추천)       http://www.kjson.com/        http://www.bejson.com/go.php?u=http://www.bejson.com/index.php        http://jsonformatter.curiousconcept.com/  2. ajax 가 JSon 형식 데이터 에 대한 분석  1. 간단 한 제 이 슨 형식 에 대한 해석: {"firstName": "Brett"}:
$.ajax({
url:"          ",
data:{"id":id}, //  /     
async : false,
dataType : "json",
success : function(data) {
alert("firstName = " + data.firstName);
}
});
주: 여기 data 는 배경 에서 지나 온 제 이 슨 문자 문자열 입 니 다. 배경 쓰기:
response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=UTF-8");
		PrintWriter out = null;
		String count = "{ "firstName": "Brett" }

;
		try {
			out = response.getWriter();
		} catch (Exception e) {
			e.printStackTrace();
		}
		out.print(count);
		out.flush();
이렇게 하면 프론트 페이지 에 알림 상 자 를 팝 업 할 수 있 습 니 다: firstName = Brett. 2. 여러 개의 키 / 값 이 위의 상황 과 같 습 니 다. JSon 을 분석 하면 다음 과 같은 배열 입 니 다.
{
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "111111" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "22222" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "33333" }
}
$.ajax({
url:"          ",
data:{"id":id}, //  /     
async : false,
dataType : "json",
success : function(data) {
for(int i = 0; i < data.length; i++) { //        Json  
     var datas = data[i];
     alert(datas.firstName);
     alert(datas.lastName);
     alert(datas.email);
}
}
});
4. 다음 JSon 데이터 분석
{ "programmers": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "3333" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "1222" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "3333" }
 ],
"authors": [
  { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
  { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
  { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
 ],
"musicians": [
  { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
 ]
}
$.ajax({
url:"          ",
data:{"id":id}, //  /     
async : false,
dataType : "json",
success : function(data) {
var pro = data.programmers; // pro programmers     
for(int i = 0; i < pro.length; i++) { //        Json  
     var datas = pro[i];
     alert(pro.firstName);
     alert(pro.lastName);
     alert(pro.email);
}
var aut = data.authors; // aut authors     
for(int i = 0; i < aut.length; i++) { //        Json  
     var datas = aut[i];
     alert(aut.firstName);
     alert(aut.lastName);
     alert(aut.genre);
}
var mus = data.musicians; // aut authors     
for(int i = 0; i < mus.length; i++) { //        Json  
     var datas = mus[i];
     alert(mus.firstName);
     alert(mus.lastName);
     alert(mus.instrument);
}

}
});

5.
{ "listaccountsresponse" : { "count":1 ,"account" : [  {"id":5,"name":"xian1","accounttype":0,"domainid" :2,"domain":"Server","receivedbytes":649444,"sentbytes":175467975,"vmlimit":"20","vmtotal":2,"vmavailable" :"18","iplimit":"20","iptotal":1,"ipavailable":"19","volumelimit":"20","volumetotal":2,"volumeavailable" :"18","snapshotlimit":"20","snapshottotal":0,"snapshotavailable":"20","templatelimit":"20","templatetotal" :0,"templateavailable":"20","vmstopped":0,"vmrunning":2,"state":"enabled","user":[{"id":5,"username" :"xian1","firstname":"Eric","lastname":"Tang","email":"[email protected]","created":"2012-03-22T09 :36:44+0800","state":"enabled","account":"xian1","accounttype":0,"domainid":2,"domain":"Server","timezone" :"Asia/Shanghai"}]} ] } }
$.ajax({
url:"          ",
data:{"id":id}, //  /     
async : false,
dataType : "json",
success : function(data) {
var accounts = data.listaccountsresponse.account; //  “account”    
for(int i = 0; i < accounts.length; i++) { //        Json  
     var datas = accounts[i];
     alert(datas.id);
     alert(datas.name);
     alert(datas.accounttype);
     ..........
}
}
});

여 기 는 자신 이 쓴 백 스테이지 패스 입 니 다.
@RequestMapping(value="/applyVm/listApplyVmCount", method={RequestMethod.GET, RequestMethod.POST})
	public void listApplyVmCount(HttpServletRequest request, HttpServletResponse response) {
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=UTF-8");
		PrintWriter out = null;
		String count = "";
		try {
			out = response.getWriter();
			Map map = applyVmService.findApplyVmCount();
			Gson gson = new Gson();
			count = gson.toJson(map);
		} catch (Exception e) {
			e.printStackTrace();
		}
		out.print(count);
		out.flush();
	} 

본문 참고:http://xiaoxiong-it.iteye.com/blog/1485121

좋은 웹페이지 즐겨찾기