Dieses Mal zeige ich Ihnen, wie Sie JSON-Daten mit der Methode $.ajax() vom Server abrufen. Welche Vorsichtsmaßnahmen gelten für den Erhalt mit der Methode $.ajax()? JSON-Daten vom Server? Das Folgende ist ein praktischer Fall, schauen wir uns das an.
1. Was ist JSON
JSON ist eine Datenstruktur, die XML ersetzt. Sie ist kleiner, verfügt aber über starke Beschreibungsfunktionen. Sie verbraucht weniger Datenverkehr und ist schneller bei der Datenübertragung über das Netzwerk.
json ist eine Zeichenfolge, die mit den folgenden Symbolen gekennzeichnet ist.
{Schlüssel-Wert-Paar}: JSON-Objekt
[{},{},{}]: JSON-Array
„“: Doppelte Anführungszeichen sind Attribute oder Werte
: : Dem Doppelpunkt wird der Schlüssel vorangestellt und ihm folgt der Wert (dieser Wert kann ein Wert des grundlegenden -Datentyps oder ein Array oder Objekt sein), also {"age": 18} Es kann als JSON-Objekt verstanden werden, das das Alter von 18 Jahren und [{"Alter": 18},{"Alter": 20}] stellt ein JSON-Array dar, das zwei Objekte enthält. Sie können auch {"age":[18,20]} verwenden, um das obige JSON-Array zu vereinfachen, bei dem es sich um ein Objekt mit einem Altersarray handelt.
2. Der Wert des dataType-Attributs in der $.ajax()-Methode
Das dataType-Attribut in der Methode $.ajax() muss ein Parameter vom Typ String sein, also dem Datentyp, der voraussichtlich vom Server zurückgegeben wird. Wenn nicht angegeben, gibt JQuery automatisch ResponseXML oder ResponseText [erklärt in Teil 3] basierend auf den HTTP-Paket-Mime-Informationen zurück und übergibt sie als Callback--Funktionsparameter . Die verfügbaren Typen sind wie folgt:
xml: Gibt ein XML-Dokument zurück, das mit JQuery verarbeitet werden kann.
html: Gibt Klartext-HTML-Informationen zurück; das enthaltene Skript-Tag wird ausgeführt, wenn es in das DOM eingefügt wird.
Skript: Gibt Klartext-JavaScript-Code zurück. Ergebnisse werden nicht automatisch zwischengespeichert. Es sei denn, Cache-Parameter sind festgelegt. Beachten Sie, dass bei Remote-Anfragen (nicht unter derselben Domain) alle Post-Anfragen in Get-Anfragen umgewandelt werden.
json: Gibt JSON-Daten zurück.
jsonp: JSONP-Format. Beim Aufrufen einer Funktion mithilfe des SONP-Formulars, z. B. myurl?callback=?, ersetzt JQuery automatisch das letzte „?“ durch den richtigen Funktionsnamen, um die Callback-Funktion auszuführen.
3. MIME-Datentyp und Antwortmethode setContentType()
Was sind MIME-Typen? Bei der Übermittlung von Ausgabeergebnissen an den Browser muss der Browser die entsprechende Anwendung starten, um das Ausgabedokument zu verarbeiten. Dies kann durch verschiedene Arten von MIME (Multipurpose Internet Mail Extensions) erreicht werden. In HTTP werden MIME-Typen im Content-Type-Header definiert.
Angenommen, Sie möchten eine Microsoft senden Excel-Datei an den Kunden. Dann ist der MIME-Typ zu diesem Zeitpunkt „application/vnd.ms-excel“. In den meisten praktischen Fällen wird diese Datei dann übertragen Execl zur Verarbeitung (vorausgesetzt, wir haben Execl so eingestellt, dass es spezielle MIME-Typen von Anwendungen verarbeitet). In Java erfolgt die Festlegung des MIME-Typs über die ContentType-Eigenschaft des Response-Objekts. Beispielsweise wird häufig verwendet: Response.setContentType("text/html;charset=UTF-8") zum Festlegen.
Im ersten HTTP-Protokoll gab es keine zusätzlichen Datentypinformationen. Alle übertragenen Daten wurden vom Client-Programm als Hypertext-Markup-Language-HTML-Dokument interpretiert. Um Multimedia-Datentypen zu unterstützen, verwendete das HTTP-Protokoll vor dem Dokument Daten Typinformationen zur Identifizierung des Datentyps.
Jeder MIME-Typ besteht aus zwei Teilen. Der erste Teil ist die allgemeine Datenkategorie, z. B. Text, Bild usw., und der zweite Teil definiert den spezifischen Typ.
Gemeinsame MIME-Typen:
Hypertext Markup Language text .html,.html text/html
Normaler Text .txt text/plain
RTF-Text .rtf application/rtf
GIF-Grafiken .gif-Bild/gif
JPEG-Grafiken .ipeg,.jpg image/jpeg
au-Sounddatei .au audio/basic
MIDI-Musikdateien mid,.midi audio/midi,audio/x-midi
RealAudio-Musikdateien .ra, .ram audio/x-pn-realaudio
MPEG-Dateien .mpg, .mpeg-Video/mpeg
AVI-Datei .avi video/x-msvideo
GZIP-Datei .gz application/x-gzip
TAR-Datei .tar application/x-tar
Wenn das Client-Programm Daten vom Server empfängt, akzeptiert es nur den Datenstrom vom Server und kennt den Namen des Dokuments nicht. Daher muss der Server zusätzliche Informationen verwenden, um dem Client-Programm den MIME-Typ der Daten mitzuteilen.
Bevor der Server die tatsächlichen Daten sendet, muss er zunächst die MIME-Typinformationen senden, die die Daten markieren. Diese Informationen werden mithilfe des Schlüsselworts „Content-type“ definiert. Für ein HTML-Dokument sendet der Server beispielsweise zunächst die folgenden zwei Zeilen MIME-Identifikationsinformationen Diese Identifikation ist nicht wirklich Teil der Datendatei.
Inhaltstyp: Text/HTML
Beachten Sie, dass es sich bei der zweiten Zeile um eine Leerzeile handelt. Der Zweck der Verwendung dieser Leerzeile besteht darin, die MIME-Informationen vom tatsächlichen Dateninhalt zu trennen.
Wie bereits erwähnt, erfolgt das Festlegen des MIME-Typs über das ContentType-Attribut des Response-Objekts. Die Einstellungsmethode besteht darin, die Anweisung „response.setContentType(MIME)“ zu verwenden Machen Sie den Client-Browser, unterscheiden Sie verschiedene Datentypen und rufen Sie verschiedene in Programme eingebettete Module im Browser entsprechend unterschiedlichen MIMEs auf, um die entsprechenden Daten zu verarbeiten.
Zu Referenzzwecken sind in confweb.xml, dem Installationsverzeichnis von Tomcat, zahlreiche MIME-Typen definiert. Sie können beispielsweise Folgendes festlegen:
Response.setContentType("text/html; charset=utf-8"); html
Response.setContentType("text/plain; charset=utf-8"); text
application/json json data
Diese Methode legt den Inhaltstyp der an den Client gesendeten Antwort fest, bevor die Antwort übermittelt wird. Der angegebene Inhaltstyp kann Zeichenkodierungsspezifikationen umfassen, zum Beispiel: text/html;charset=UTF-8. Wenn diese Methode vor dem Aufruf der getWriter()-Methode aufgerufen wird, wird die Zeichenkodierung der Antwort nur aus dem angegebenen Inhaltstyp festgelegt. Wenn diese Methode nach dem Aufruf oder der Übermittlung der getWriter()-Methode aufgerufen wird, wird die Zeichenkodierung der Antwort nicht festgelegt. Bei Verwendung des http-Protokolls wird diese Methode festgelegt Entitätsheader vom Inhaltstyp.
4. Drei Möglichkeiten, JSON-Daten mit der Methode $.ajax() zu erhalten
Die Konfiguration des dataType-Parameters bestimmt, wie JQuery uns dabei hilft, die vom Server zurückgegebenen Daten automatisch zu analysieren. Es gibt mehrere Möglichkeiten, die vom Hintergrund zurückgegebene JSON-Zeichenfolge abzurufen und in ein JSON-Objekt zu analysieren . Die Ergebnisse der folgenden drei Methoden
1. Wenn der Datentyp nicht im Parameter $.ajax() festgelegt ist und der Rückgabetyp nicht in der Hintergrundantwort festgelegt ist, wird er standardmäßig als normaler Text verarbeitet [response.setContentType("text/html;charset= utf-8"); wird auch als Text verarbeitet 】, in js müssen Sie manuell eval() oder $.parseJSON() und andere Methoden verwenden, um die zurückgegebene Zeichenfolge zur Verwendung in ein JSON-Objekt zu konvertieren.
//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);
}
});
});2. Setzen Sie dataType="json" im Parameter $.ajax(), dann konvertiert jquery die zurückgegebene Zeichenfolge automatisch in ein JSON-Objekt. Der Hintergrund kann eingestellt werden auf: [Empfohlen] Response.setContentType("text/html;charset=utf-8"); oder 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代码：页面首次加载时，显示规定时间段的数据*/
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);
}
});3. DataType ist in den Ajax-Methodenparametern nicht angegeben und der Rückgabetyp wird im Hintergrund auf „application/json“ gesetzt. Auf diese Weise beurteilt jquery intelligent anhand des Mime-Typs und analysiert ihn automatisch in ein JSON-Objekt.
//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);
}
});Hinweis: Solange es eine Einstellung zum Zurückgeben eines JSON-Objekts im Front- oder Backend gibt, ist es nicht erforderlich, die Methode eval() oder die Methode $.parseJSON() zum Parsen zu verwenden, da sonst beim erneuten Parsen ein Fehler auftritt.
Zusammenfassung: Von den oben genannten Methoden wird empfohlen, die zweite Methode zu verwenden, die bequemer und weniger fehleranfällig ist.
5. eval()-Methode
var json object=eval('('+json data+')'); Der in geschweifte Klammern eingeschlossene Inhalt wird von eval() zurückgegeben und ein JSON-Objekt wird zurückgegeben.
So funktioniert die Funktion „eval“: Die Funktion „eval“ wertet eine bestimmte Zeichenfolge aus, die JavaScript-Code enthält, und versucht, den Ausdruck oder eine Reihe zulässiger JavaScript-Anweisungen auszuführen, die in der Zeichenfolge enthalten sind. Die Auswertungsfunktion gibt den Wert oder die Referenz zurück, die im letzten Ausdruck oder in der letzten Anweisung enthalten ist.
Warum müssen Sie „(“(“+data+“)“);//“ zur Auswertung hinzufügen?
Der Grund ist: eval selbst. Da JSON mit „{}“ beginnt und endet, wird es in JS als Anweisungsblock verarbeitet, sodass die Konvertierung in einen Ausdruck erzwungen werden muss. Der Zweck des Hinzufügens von Klammern besteht darin, die Auswertungsfunktion zu zwingen, den Ausdruck in den Klammern bei der Verarbeitung von JavaScript-Code in ein Objekt umzuwandeln, anstatt ihn als Anweisung auszuführen. Nehmen Sie zum Beispiel das Objektliteral {}. Wenn keine äußeren Klammern hinzugefügt werden, erkennt eval die Klammern als Anfangs- und Endmarkierungen des JavaScript-Codeblocks und {} wird als eine leere Anweisung betrachtet.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
getBoundingClientRect-Verwendung und Kompatibilitätsverarbeitung
Detaillierte Erklärung des kleinen parabolischen Effekts von Vue in der Warenkorb
Detaillierte Erläuterung der Verwendung von Komponenten in Vue.js
Das obige ist der detaillierte Inhalt vonSo erhalten Sie JSON-Daten vom Server mithilfe der Methode $.ajax(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
