$.ajax() 메소드를 사용하여 서버에서 json 데이터를 얻는 방법
- php中世界最好的语言원래의
- 2018-04-13 09:38:492879검색
이번에는 $.ajax() 메소드를 사용하여 서버에서 json 데이터를 가져오는 방법을 보여드리겠습니다. $.ajax() 메소드를 사용하여 서버에서 json 데이터를 가져올 때 사용해야 할 주의사항은 무엇인가요? 다음은 실제 사례를 한 번 살펴보겠습니다.
하나. json이란
json은 xml을 대체하는 데이터 구조로, 크기는 작지만 강력한 설명 기능을 가지며 네트워크를 통해 데이터를 전송하는 속도가 더 빠릅니다.
json은 다음 기호로 표시된 문자열입니다.
{키-값 쌍}: json 객체
[{},{},{}]: json 배열
"": 큰따옴표는 속성 또는 값입니다
: : 콜론 앞에는 키가 오고 그 뒤에 값이 옵니다(이 값은 기본 데이터 유형의 값이거나 배열 또는 객체일 수 있음). 따라서 {"age": 18} 이는 18세 및 [{"age": 18},{"age":를 포함하는 json 객체로 이해될 수 있습니다. 20}]는 두 개의 객체를 포함하는 json 배열을 나타냅니다. 또한 {"age":[18,20]}를 사용하여 age 배열이 있는 객체인 위의 json 배열을 단순화할 수도 있습니다.
2. $.ajax() 메소드의 dataType 속성 값
$.ajax() 메소드의 dataType 속성은 서버에서 반환할 것으로 예상되는 데이터 유형인 String 유형 매개변수여야 합니다. 지정하지 않으면 JQuery는 http 패키지 MIME 정보를 기반으로 responseXML 또는 responseText [3부에서 설명]을 자동으로 반환하고 이를 콜백 함수 매개변수 로 전달합니다. 사용 가능한 유형은 다음과 같습니다.
xml: JQuery로 처리할 수 있는 XML 문서를 반환합니다.
html: 일반 텍스트 HTML 정보를 반환합니다. 포함된 스크립트 태그는 DOM에 삽입될 때 실행됩니다.
script: 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. 캐시 매개변수가 설정되지 않은 경우. (동일한 도메인이 아닌) 원격 요청을 하면 모든 post 요청이 가져오기 요청으로 변환됩니다.
json: JSON 데이터를 반환합니다.
jsonp: JSONP 형식입니다. myurl?callback=?과 같은 SONP 형식을 사용하여 함수를 호출하면 JQuery는 자동으로 마지막 "?"를 올바른 함수 이름으로 바꿔 콜백 함수를 실행합니다.
셋. MIME 데이터 유형 및 응답 setContentType() 메소드
MIME 유형이란 무엇입니까? 출력 결과를 브라우저로 전송할 때 브라우저는 출력 문서를 처리하기 위해 적절한 응용 프로그램을 시작해야 합니다. 이는 다양한 유형의 MIME(다목적 인터넷 메일 확장)을 통해 수행될 수 있습니다. HTTP에서 MIME 유형은 Content-Type 헤더에 정의됩니다.
예를 들어 Microsoft에 메시지를 보내고 싶다고 가정해 보겠습니다. 클라이언트에 Excel 파일을 보냅니다. 그러면 이때 MIME 유형은 "application/vnd.ms-excel"입니다. 대부분의 실제 사례에서 이 파일은 다음으로 전송됩니다. 처리할 Execl(특별한 MIME 유형의 응용 프로그램을 처리하도록 Execl을 설정했다고 가정) Java에서 MIME 유형을 설정하는 방법은 Response 객체의 ContentType 속성을 사용하는 것입니다. 예를 들어 일반적으로 사용되는 response.setContentType("text/html;charset=UTF-8")을 설정합니다.
초기 HTTP 프로토콜에서는 추가적인 데이터 유형 정보가 없었으며, 전송된 모든 데이터는 클라이언트 프로그램에서 멀티미디어 데이터 유형을 지원하기 위해 데이터 앞에 첨부된 MIME을 사용했습니다. 데이터 유형을 식별하기 위한 정보를 입력합니다.
각 MIME 유형은 두 부분으로 구성됩니다. 첫 번째 부분은 텍스트, 이미지 등과 같은 데이터의 일반적인 범주이고 두 번째 부분은 특정 유형을 정의합니다.
일반적인 MIME 유형:
하이퍼텍스트 마크업 언어 text .html,.html text/html
일반 텍스트 .txt text/plain
RTF 텍스트 .rtf 애플리케이션/rtf
GIF 그래픽 .gif 이미지/gif
JPEG 그래픽 .ipeg,.jpg 이미지/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 application/x-gzip
TAR 파일 .tar 애플리케이션/x-tar
클라이언트 프로그램이 서버로부터 데이터를 수신할 때 서버로부터의 데이터 스트림만 받아들이고 문서의 이름을 알지 못하므로 서버는 추가 정보를 사용하여 클라이언트 프로그램에 데이터의 MIME 유형을 알려야 합니다.
서버는 실제 데이터를 보내기 전에 먼저 데이터를 표시하는 MIME 유형 정보를 보내야 합니다. 이 정보는 Content-type 키워드를 사용하여 정의됩니다. 예를 들어 HTML 문서의 경우 서버는 먼저 다음 두 줄을 보냅니다. MIME 식별 정보입니다. 이 식별은 실제로 데이터 파일의 일부가 아닙니다.
콘텐츠 유형: 텍스트/html
두 번째 줄은 빈 줄이며, 이 빈 줄을 사용하는 목적은 MIME 정보를 실제 데이터 내용과 분리하는 것입니다.
앞서 언급했듯이 Java에서는 Response 객체의 ContentType 속성을 통해 설정하는 방법이 response.setContentType(MIME) 문을 사용하는 것입니다. 클라이언트 브라우저를 만들고, 다양한 유형의 데이터를 구별하고, 다양한 MIME에 따라 브라우저에서 다양한 프로그램 내장 모듈을 호출하여 해당 데이터를 처리합니다.
Tomcat의 설치 디렉터리인 confweb.xml에는 참고용으로 다수의 MIME 유형이 정의되어 있습니다. 예를 들어 다음과 같이 설정할 수 있습니다.
response.setContentType("text/html; charset=utf-8") html
response.setContentType("text/plain; charset=utf-8") text
애플리케이션/json JSON 데이터
이 메서드는 응답이 제출되기 전에 클라이언트에 전송되는 응답의 콘텐츠 유형을 설정합니다. 제공된 콘텐츠 유형에는 문자 인코딩 사양이 포함될 수 있습니다(예: text/html;charset=UTF-8). getWriter() 메서드가 호출되기 전에 이 메서드를 호출하면 응답의 문자 인코딩은 지정된 콘텐츠 유형에서만 설정됩니다. getWriter() 메소드가 호출된 후 또는 제출된 후에 이 메소드가 호출되면 응답의 문자 인코딩을 설정하지 않습니다. http 프로토콜을 사용하는 경우 이 메소드는 설정합니다. 콘텐츠 유형 엔터티 헤더.
넷. $.ajax() 메서드를 사용하여 json 데이터를 얻는 세 가지 방법
dataType 매개변수의 구성은 jquery가 서버에서 반환된 데이터를 자동으로 구문 분석하는 데 도움이 되는 방식을 결정합니다. 백그라운드에서 반환된 json 문자열을 가져와 json 개체로 구문 분석하는 방법에는 여러 가지가 있습니다. 다음 세 가지 방법의 결과
1. $.ajax() 매개변수에 dataType이 설정되어 있지 않고, 백그라운드 응답에서 반환 유형이 설정되지 않은 경우 기본적으로 일반 텍스트로 처리됩니다. [response.setContentType("text/html;charset= utf-8");도 text 】로 처리됩니다. js에서는 반환된 문자열을 json 객체로 변환하여 사용하려면 eval() 또는 $.parseJSON() 및 기타 메서드를 수동으로 사용해야 합니다.
rreerrree2. $.ajax() 매개변수에 dataType="json"을 설정하면 jquery가 자동으로 반환된 문자열을 json 개체로 변환합니다. 배경은 다음과 같이 설정할 수 있습니다. [권장] response.setContentType("text/html;charset=utf-8"); 또는 response.setContentType("application/json;charset=utf-8");
//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);
}
});
});
3. ajax 메소드 매개변수에 DataType이 지정되지 않고 백그라운드에서 반환 유형이 "application/json"으로 설정됩니다. 이러한 방식으로 jquery는 MIME 유형을 기반으로 지능적으로 판단하고 이를 자동으로 json 객체로 구문 분석합니다.
rreerrree참고: 프론트엔드나 백엔드에 json 객체를 반환하도록 설정되어 있으면 eval() 메서드나 $.parseJSON() 메서드를 사용하여 파싱할 필요가 없습니다. 그렇지 않으면 다시 파싱할 때 오류가 발생합니다.
요약: 위의 방법 중 편리하고 오류가 덜 발생하는 두 번째 방법을 사용하는 것이 좋습니다.
다섯. eval() 메서드
var json object=eval('('+json data+')'); 중괄호로 묶인 내용은 eval()에 의해 반환되며 JSON 객체가 반환됩니다.
eval 함수 작동 방식: eval 함수는 JavaScript 코드가 포함된 특정 문자열을 평가하고 해당 문자열에 포함된 표현식 또는 일련의 합법적인 JavaScript 문을 실행하려고 시도합니다. eval 함수는 마지막 표현식이나 문에 포함된 값이나 참조를 반환합니다.
왜 eval에 "("("+data+")");//"를 추가해야 하나요?
이유는 평가 자체입니다. json은 "{}"으로 시작하고 끝나기 때문에 JS에서는 명령문 블록으로 처리되므로 강제로 표현식으로 변환해야 합니다. 괄호를 추가하는 목적은 JavaScript 코드를 명령문으로 실행하는 대신 eval 함수가 JavaScript 코드를 처리할 때 괄호 안의 표현식을 객체로 변환하도록 강제하는 것입니다. 예를 들어 객체 리터럴 {}을 사용하면 외부 대괄호가 추가되지 않으면 eval은 중괄호를 JavaScript 코드 블록의 시작 및 끝 표시로 인식하고 {}는 빈 문을 실행하는 것으로 간주됩니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
getBoundingClientRect 사용법 및 호환성 처리
vue는 장바구니의 작은 공 포물선 효과를 구현합니다. Vue.js의 구성 요소 사용에 대한 자세한 설명
위 내용은 $.ajax() 메소드를 사용하여 서버에서 json 데이터를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!