$.ajax()방법 으로 서버 에서 json 데 이 터 를 가 져 오 는 몇 가지 방법 을 요약 합 니 다.
json 은 xml 를 대체 하 는 데이터 구조 로 xml 에 비해 작 지만 설명 능력 이 강하 고 네트워크 전송 데이터 의 사용 유량 이 적 으 며 속도 가 빠르다.
json 은 다음 기호 로 표 시 된 문자열 입 니 다.
{키 쌍}:json 대상
[{},{},{}]:json 배열
"":작은 따옴표 안에 속성 이나 값 이 있 습 니 다.
::사칭 전 키,후 값(이 값 은 기본 데이터 형식의 값 일 수도 있 고 배열 이나 대상 일 수도 있 습 니 다)이기 때문에{"age":18}은 age 를 18 로 포함 하 는 json 대상 으로 이해 할 수 있 습 니 다.[{"age":18},{"age":20}]는 두 대상 을 포함 하 는 json 배열 을 표시 합 니 다.{"age":[18,20]}을 사용 하여 위의 json 배열 을 간소화 할 수 있 습 니 다.이것 은 age 배열 을 가 진 대상 입 니 다.
2.$.ajax()방법 에서 dataType 속성의 값 을 추출 합 니 다.
$.aajax()방법 에서 dataType 속성 은 String 형식의 매개 변 수 를 요구 합 니 다.서버 가 되 돌아 올 것 으로 예상 되 는 데이터 형식 입 니 다.지정 하지 않 으 면 JQuery 는 http 패키지 mime 정보 에 따라 responseXML 또는 responseText[세 번 째 부분 에서 설명]를 자동 으로 되 돌려 주 고 리 셋 함수 매개 변수 로 전달 합 니 다.사용 가능 한 종 류 는 다음 과 같 습 니 다:
xml:XML 문 서 를 되 돌려 줍 니 다.JQuery 로 처리 할 수 있 습 니 다.
html:텍스트 HTML 정 보 를 되 돌려 줍 니 다.포 함 된 script 탭 은 DOM 을 삽입 할 때 실 행 됩 니 다.
script:텍스트 자 바스 크 립 트 코드 를 되 돌려 줍 니 다.결 과 를 자동 으로 캐 시 하지 않 습 니 다.cache 인 자 를 설정 하지 않 는 한원 격 요청 시(같은 필드 에 있 지 않 음)모든 post 요청 이 get 요청 으로 전 환 됩 니 다.
json:JSON 데 이 터 를 되 돌려 줍 니 다.
jsonp:JSONP 형식 입 니 다.SONP 형식 으로 함 수 를 호출 할 때,예 를 들 어 myurl?callback=?,JQuery 는 다음"?"를 자동 으로 바 꿉 니 다.정확 한 함수 명 을 위해 리 셋 함 수 를 실행 합 니 다.
3.Mime 데이터 형식 및 response 의 set ContentType()방법
MIME 타 입 이 뭐 예요?출력 결 과 를 브 라 우 저 에 전송 할 때 브 라 우 저 는 출력 문 서 를 처리 하기 위해 적당 한 프로그램 을 시작 해 야 합 니 다.다양한 유형의 MIME(다기 능 인터넷 메 일 확장 프로 토 콜)를 통 해 완성 할 수 있다.HTTP 에서 MIME 형식 은 Content-type header 에 정의 되 어 있 습 니 다.
예 를 들 어 클 라 이언 트 에 Microsoft Excel 파일 을 전송 하려 고 설정 합 니 다.그렇다면 이때 의 MIME 유형 은'응용 프로그램/vnd.ms-excel'이다.대부분의 실제 상황 에서 이 파일 은 Execl 에 전송 되 어 처 리 됩 니 다.자바 에서 MIME 종 류 를 설정 하 는 방법 은 Response 대상 을 통한 ContentType 속성 입 니 다.예 를 들 어 상용:response.setContentType("text/html;charset=UTF-8")을 설정 합 니 다.
최초의 HTTP 프로 토 콜 에는 추가 적 인 데이터 형식 정보 가 없 었 고 모든 전송 데 이 터 는 클 라 이언 트 프로그램 에 의 해 하이퍼텍스트 표기 언어 인 HTML 문서 로 해석 되 었 으 며 멀티미디어 데이터 형식 을 지원 하기 위해 HTTP 프로 토 콜 에 서 는 문서 앞 에 추 가 된 MIME 데이터 형식 메 시 지 를 사용 하여 데이터 형식 을 표시 했다.
각 MIME 유형 은 두 부분 으로 구성 되 어 있 으 며 앞 에는 데이터 의 큰 유형,예 를 들 어 텍스트 text,이미지 이미지 이미지 등 이 있 고 뒤에 구체 적 인 종 류 를 정의 합 니 다.
일반적인 MIME 종류:
하이퍼텍스트 태그 언어 텍스트.html,.html text/html
일반 텍스트.txt text/plain
RTF 텍스트.rtf 응용 프로그램/rtf
GIF 도형.gif image/gif
JPEG 도형.ipeg,.jpg image/jpeg
au 사 운 드 파일.au audio/basic
MIDI 음악 파일 mid,.midi audio/midi,audio/x-midi
RealAudio 음악 파일.ra,.ram audio/x-pn-realaudio
MPEG 파일.MPG,.MPEG 비디오/MPEG
AVI 파일.avi 비디오/x-msvideo
GZIP 파일.gz 응용 프로그램/x-gzip
TAR 파일.tar 응용 프로그램/x-tar
클 라 이언 트 프로그램 이 서버 에서 데 이 터 를 받 을 때 서버 에서 데이터 흐름 만 받 을 뿐 문서 의 이름 을 알 지 못 하기 때문에 서버 는 추가 정 보 를 사용 하여 클 라 이언 트 프로그램 데이터 의 MIME 형식 을 알려 야 합 니 다.
서버 는 실제 데 이 터 를 보 내기 전에 로고 데이터 의 MIME 형식의 정 보 를 먼저 보 내야 한다.이 정 보 는 Content-type 키 워드 를 사용 하여 정의 한다.예 를 들 어 HTML 문서 에 대해 서버 는 먼저 다음 두 줄 의 MIME 표지 정 보 를 보 낼 것 이다.이 표 지 는 실제 데이터 파일 의 일부분 이 아니다.
Content-type: text/html
두 번 째 행 위 는 빈 줄 입 니 다.이것 은 필수 적 입 니 다.이 빈 줄 을 사용 하 는 목적 은 MIME 정보 와 실제 데이터 내용 을 분리 하 는 것 입 니 다.
앞에서 말 한 바 와 같이 자바 에서 MIME 형식 을 설정 하 는 방법 은 Response 대상 의 ContentType 속성 을 통 해 설정 하 는 것 입 니 다.설정 하 는 방법 은 response.setContentType(MIME)문 구 를 사용 하 는 것 입 니 다.response.setContentType(MIME)의 역할 은 클 라 이언 트 브 라 우 저 를 다양한 종류의 데 이 터 를 구분 하 는 것 입 니 다.또한 서로 다른 MIME 호출 브 라 우 저 에 있 는 프로그램 삽입 모듈 에 따라 해당 하 는 데 이 터 를 처리 합 니 다.
Tomcat 의 설치 디 렉 터 리\conf\웹.xml 에서 대량의 MIME 형식 을 정 의 했 습 니 다.참고 하 실 수 있 습 니 다.예 를 들 어 설정 할 수 있 습 니 다:
response.setContentType("text/html; charset=utf-8"); html
response.setContentType("text/plain; charset=utf-8"); 텍스트
응용 프로그램/json json 데이터
이 방법 은 클 라 이언 트 에 보 내 는 응답 내용 형식 을 설정 합 니 다.이 때 응답 이 제출 되 지 않 았 습 니 다.제 시 된 내용 형식 은 문자 인 코딩 설명 을 포함 할 수 있 습 니 다.예 를 들 어 text/html;charset=UTF-8。이 방법 이 getWriter()방법 이 호출 되 기 전에 호출 되면 응답 하 는 문자 인 코딩 은 제 시 된 내용 형식 에서 만 설 정 됩 니 다.이 방법 은 getWriter()방법 이 호출 되 거나 제출 된 후에 호출 되면 응답 하 는 문자 인 코딩 을 설정 하지 않 습 니 다.http 프로 토 콜 을 사용 하 는 경우 이 방법 은 Content-type 실체 헤더 를 설정 합 니 다.
4.$.ajax()방법 으로 json 데 이 터 를 얻 는 세 가지 방법
dataType 매개 변수 설정 은 jquery 가 서버 가 돌아 오 는 데 이 터 를 자동 으로 분석 하 는 데 도움 을 주 는 방법 을 결정 합 니 다.배경 에서 돌아 오 는 json 문자열 을 얻 고 json 대상 으로 해석 할 수 있 는 몇 가지 방법 이 있 습 니 다.다음은 자바 의 예 로 설명 합 니 다.아래 3 중 방식 의 결 과 는 모두 그림 1 과 같 습 니 다.항목 은 내부 네트워크 에서 실행 되 고 캡 처 할 수 없 으 며 사진 만 찍 을 수 있 습 니 다.양해 해 주 십시오.
1.$.ajax()매개 변수 에 dataType 을 설정 하지 않 고 배경 response 도 반환 형식 을 설정 하지 않 으 면 기본 값 은 일반 텍스트 로 처리 합 니 다[response.setContentType("text/html;").charset=utf-8");또한 텍스트 처리 로 서 js 에 서 는 eval()이나$.parseJSON()등 을 수 동 으로 사용 하여 되 돌아 오 는 문자열 을 json 대상 으로 변환 해 야 합 니 다.
//Java ：
public void getHistorySingleData() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setContentType("text/html;charset=utf-8");
String deviceName = request.getParameter("deviceName");
String startDate= request.getParameter("startDate");
String endDate = request.getParameter("endDate");
SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
System.out.println(singleHistoryData.length);
System.out.println(JSONArray.fromObject(singleHistoryData).toString());// ：[{"time":"2016-11-11 10:00:00","state":" ","ball":" ",....},{"time":"2016-11-11 10:00:05","state":" ","ball":" ",....},{},{}....] singleHistoryData {"time":"2016-11-11 10:00:05","state":" ","ball":" ",....}
response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
}
/*js ： ， */
$("#search").click(function () {
var data1 = [];
var n;
var deviceName=$("body").attr("id");
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
$.ajax({
url:"/avvii/chart/getHistorySingleData",
type:"post",
data:{
"deviceName":deviceName,
"startDate": startDate,
"endDate": endDate
},
success: function (data) {
alert(data);//----> [{"time":"2016-11-11 10:00:00","state":" ","ball":" ",....},{"time":"2016-11-11 10:00:05","state":" ","ball":" ",....},{},{}....]， singleHistoryData {"time":"2016-11-11 10:00:05","state":" ","ball":" ",....}
alert(Object.prototype.toString.call(data)); //---> [object String]， String
var JsonObjs = eval("(" + data + ")"); // ：var JsonObjs = $.parseJSON(data);
alert(JsonObjs);//alert(JsonObjs);----> [object Object],[object Object],[object Object][object Object],[object Object],[object Object]…… singleHistoryData [object Object]
n=JsonObjs.length;
if(n==0){
alert(" ， ");
}
for(var i = 0; i < JsonObjs.length; i++){
var name = JsonObjs[i]['time'];// ：JsonObjs[i]， ：JsonObjs[i].time
var state = JsonObjs[i]['state'];
var ball = JsonObjs[i]['ball'];
var xd = JsonObjs[i]['xd'];
var yd = JsonObjs[i]['yd'];
var zd = JsonObjs[i]['zd'];
var xf = JsonObjs[i]['xf'];
var yf = JsonObjs[i]['yf'];
var zf = JsonObjs[i]['zf'];
data1[i] = {name:name,state:state,ball:ball,xd:xd,yd:yd,zd:zd,xf:xf,yf:yf,zf:zf};// ，
}
if(JsonObjs.length != 10){
for(var j=0;j<(10-((JsonObjs.length)%10));j++){ // ，
data1[j+JsonObjs.length] = {name:" ",state:"",ball:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};
}
}
var userOptions = {
"id":"kingTable", // id
"head":[" "," "," ","X /mm","Y /mm","Z /mm","X /Kg","Y /Kg","Z /Kg"], // thead
"body":data1, // tbody
"foot":true, // true/false tfoot --- false
"displayNum": 10, // 10
"groupDataNum":6, // 10
sort:false, // true/false --- false
search:false, // false
lang:{
gopageButtonSearchText:" "
}
}
var cs = new KingTable(null,userOptions);
}
});
});
//Java ：
public void getHistorySingleData() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setContentType("text/html;charset=utf-8");
String deviceName = request.getParameter("deviceName");
String startDate= request.getParameter("startDate");
String endDate = request.getParameter("endDate");
SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
System.out.println(singleHistoryData.length);
System.out.println(JSONArray.fromObject(singleHistoryData).toString());// ：[{"time":"2016-11-11 10:00:00","state":" ","ball":" ",....},{"time":"2016-11-11 10:00:05","state":" ","ball":" ",....},{},{}....] singleHistoryData {"time":"2016-11-11 10:00:05","state":" ","ball":" ",....}
response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
}
/*js ： ， */
var data1 = [];
var deviceName=$("body").attr("id");
var startDate = $("#startDate").val("2000-01-01 00:00:00");
var endDate = $("#endDate").val("2018-01-01 00:00:00");
$.ajax({
url:"/avvii/chart/getHistorySingleData",
type:"post",
data:{
"deviceName":deviceName,
"startDate": "2000-01-01 00:00:00",
"endDate": "2018-01-01 00:00:00"
},
dataType:"json",
success: function (data) {
alert(data);//----> [object Object],[object Object],[object Object][object Object],[object Object],[object Object]…… singleHistoryData json ：[object Object]
for(var i = 0; i < data.length; i++){
var name = data[i]['time'];
var state = data[i]['state'];
var ball = data[i]['ball'];
var xd = data[i]['xd'];
var yd = data[i]['yd'];
var zd = data[i]['zd'];
var xf = data[i]['xf'];
var yf = data[i]['yf'];
var zf = data[i]['zf'];
data1[i] = {name:name,state:state,ball:ball,xd:xd,yd:yd,zd:zd,xf:xf,yf:yf,zf:zf};
}
if(data.length != 10){
for(var j=0;j<(10-((data.length)%10));j++){ // ，
data1[j+data.length] = {name:" ",state:"",ball:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};
}
}
var userOptions = {
"id":"kingTable", // id
"head":[" "," "," ","X /mm","Y /mm","Z /mm","X /Kg","Y /Kg","Z /Kg"], // thead
"body":data1, // tbody
"foot":true, // true/false tfoot --- false
"displayNum": 10, // 10
"groupDataNum":6, // 10
sort:false, // true/false --- false
search:false, // false
lang:{
gopageButtonSearchText:" "
}
}
var cs = new KingTable(null,userOptions);
}
});
//Java ：
public void getHistorySingleData() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setContentType("application/json;charset=utf-8");
String deviceName = request.getParameter("deviceName");
String startDate= request.getParameter("startDate");
String endDate = request.getParameter("endDate");
SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
System.out.println(singleHistoryData.length);
System.out.println(JSONArray.fromObject(singleHistoryData).toString());// ：[{"time":"2016-11-11 10:00:00","state":" ","ball":" ",....},{"time":"2016-11-11 10:00:05","state":" ","ball":" ",....},{},{}....] singleHistoryData {"time":"2016-11-11 10:00:05","state":" ","ball":" ",....}
response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
}
/*js ： ， */
var data1 = [];
var deviceName=$("body").attr("id");
var startDate = $("#startDate").val("2000-01-01 00:00:00");
var endDate = $("#endDate").val("2018-01-01 00:00:00");
$.ajax({
url:"/avvii/chart/getHistorySingleData",
type:"post",
data:{
"deviceName":deviceName,
"startDate": "2000-01-01 00:00:00",
"endDate": "2018-01-01 00:00:00"
},
success: function (data) {
alert(data);//----> [object Object],[object Object],[object Object][object Object],[object Object],[object Object]…… singleHistoryData json ：[object Object]
for(var i = 0; i < data.length; i++){
var name = data[i]['time'];
var state = data[i]['state'];
var ball = data[i]['ball'];
var xd = data[i]['xd'];
var yd = data[i]['yd'];
var zd = data[i]['zd'];
var xf = data[i]['xf'];
var yf = data[i]['yf'];
var zf = data[i]['zf'];
data1[i] = {name:name,state:state,ball:ball,xd:xd,yd:yd,zd:zd,xf:xf,yf:yf,zf:zf};
}
if(data.length != 10){
for(var j=0;j<(10-((data.length)%10));j++){ // ，
data1[j+data.length] = {name:" ",state:"",ball:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};
}
}
var userOptions = {
"id":"kingTable", // id
"head":[" "," "," ","X /mm","Y /mm","Z /mm","X /Kg","Y /Kg","Z /Kg"], // thead
"body":data1, // tbody
"foot":true, // true/false tfoot --- false
"displayNum": 10, // 10
"groupDataNum":6, // 10
sort:false, // true/false --- false
search:false, // false
lang:{
gopageButtonSearchText:" "
}
}
var cs = new KingTable(null,userOptions);
}
}); 결론:상기 몇 가지 방식 은 두 번 째 방식 을 추천 합 니 다.편리 하고 실수 하기 쉽 지 않 습 니 다.
5.eval()방법
var json 대상=eval('+json 데이터+')';대괄호 로 묶 인 내용 이 eval()에 의 해 실 행 된 후 되 돌아 오 는 것 은 JSON 대상 입 니 다.
eval 함수 의 작업 원리:eval 함 수 는 자바 스 크 립 트 코드 가 포 함 된 문자열 을 평가 하고 문자열 에 포 함 된 표현 식 이나 일련의 합 법 적 인 자바 스 크 립 트 문 구 를 실행 하려 고 합 니 다.eval 함 수 는 마지막 표현 식 이나 문장 에 포 함 된 값 이나 인용 을 반환 값 으로 합 니 다.
eval 에"("+data+")"를 추가 하 는 이 유 는 무엇 입 니까?/"네?
이 유 는 eval 자체 의 문제 때문이다.json 은'{}'방식 으로 시작 하고 끝 납 니 다.JS 에 서 는 하나의 구문 블록 으로 처리 되 기 때문에 표현 식 으로 강제 적 으로 변환 해 야 합 니 다.괄호 를 붙 이 는 목적 은 eval 함수 가 자 바스 크 립 트 코드 를 처리 할 때 괄호 안의 표현 식(expression)을 문장(statement)이 아 닌 대상 으로 강제로 전환 하도록 하 는 것 이다.예 를 들 어 대상 글자 의 양{},외부 괄호 를 넣 지 않 으 면 eval 은 큰 괄호 를 자바 스 크 립 트 코드 블록 의 시작 과 끝 표시 로 인식 합 니 다.{}은 빈 문 구 를 실행 한 것 으로 여 겨 집 니 다.이상 의 이 편 은$.ajax()방법 을 바탕 으로 서버 에서 json 데 이 터 를 얻 는 몇 가지 방식 으로 요약 하면 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
깊이 분석$.ajax()방법Object 나 String 형식의 인자 로 서버 에 보 낼 데 이 터 를 요구 합 니 다.문자열 이 아니라면 자동 으로 문자열 형식 으로 변 환 됩 니 다.get 요청 은 URL 뒤에 추 가 됩 니 다.이러한 자동...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
