Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung des Prozesses der JavaScript-Verarbeitung und des Parsens von JSON-Daten_Javascript-Fähigkeiten
JSON (JavaScript Object Notation) ist ein einfaches Datenformat, das leichter als XML ist. JSON ist ein natives JavaScript-Format, was bedeutet, dass für die Verarbeitung von JSON-Daten in JavaScript keine spezielle API oder ein spezielles Toolkit erforderlich ist.
Die Regeln von JSON sind einfach: Ein Objekt ist eine ungeordnete Sammlung von „Name/Wert-Paaren“. Ein Objekt beginnt mit „{“ (linke Klammer) und endet mit „}“ (rechte Klammer). Auf jeden „Namen“ folgt ein „:“ (Doppelpunkt); „Name/Wert“-Paare werden durch ein „“, (Komma) getrennt. Spezifische Details finden Sie unter http://www.json.org/json-zh.html
Ein einfaches Beispiel:
JS-Code
function showJSON() { var user = { "username":"andy", "age":20, "info": { "tel": "123456", "cellphone": "98765"}, "address": [ {"city":"beijing","postcode":"222333"}, {"city":"newyork","postcode":"555666"} ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode); }
Dies stellt ein Benutzerobjekt mit Attributen wie Benutzername, Alter, Informationen, Adresse usw. dar.
Sie können JSON auch verwenden, um die Daten einfach zu ändern, ändern Sie das obige Beispiel
JS-Code
function showJSON() { var user = { "username":"andy", "age":20, "info": { "tel": "123456", "cellphone": "98765"}, "address": [ {"city":"beijing","postcode":"222333"}, {"city":"newyork","postcode":"555666"} ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode); user.username = "Tom"; alert(user.username); }
JSON stellt das Paket json.js bereit. Nachdem Sie http://www.json.org/json.js heruntergeladen haben, importieren Sie es und konvertieren Sie es dann einfach mit object.toJSONString() in JSON. Daten.
JS-Code
function showCar() { var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow"); alert(carr.toJSONString()); } function Car(make, model, year, color) { this.make = make; this.model = model; this.year = year; this.color = color; }
Sie können eval verwenden, um JSON-Zeichen in Object zu konvertieren
JS-Code
function myEval() { var str = '{ "name": "Violet", "occupation": "character" }'; var obj = eval('(' + str + ')'); alert(obj.toJSONString()); }
Oder verwenden Sie die Methode parseJSON()
JS-Code
function myEval() { var str = '{ "name": "Violet", "occupation": "character" }'; var obj = str.parseJSON(); alert(obj.toJSONString()); }
Im Folgenden wird ein Prototyp verwendet, um ein Ajax-Beispiel für JSON zu schreiben.
Schreiben Sie zuerst ein Servlet (meins ist servlet.ajax.JSONTest1.java) und schreiben Sie einen Satz
Java-Code
response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");
Schreiben Sie eine Ajax-Anfrage auf der Seite
JS-Code
function sendRequest() { var url = "/MyWebApp/JSONTest1"; var mailAjax = new Ajax.Request( url, { method: 'get', onComplete: jsonResponse } ); } function jsonResponse(originalRequest) { alert(originalRequest.responseText); var myobj = originalRequest.responseText.parseJSON(); alert(myobj.name); }
Prototype-1.5.1.js bietet eine JSON-Methode, String.evalJSON(). Sie können die obige Methode ändern, ohne json.js zu verwenden
JS-Code
function jsonResponse(originalRequest) { alert(originalRequest.responseText); var myobj = originalRequest.responseText.evalJSON(true); alert(myobj.name); }
JSON bietet auch ein Java-JAR-Paket http://www.json.org/java/index.html Die API ist ebenfalls sehr einfach, hier ist ein Beispiel
Anforderungsparameter in Javascript hinzufügen
JS-Code
function sendRequest() { var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow"); var pars = "car=" + carr.toJSONString(); var url = "/MyWebApp/JSONTest1"; var mailAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: jsonResponse } ); }
Mithilfe der JSON-Anforderungszeichenfolge können Sie einfach JSONObject generieren und analysieren und das Servlet ändern, um JSON-Verarbeitung hinzuzufügen (verwenden Sie json.jar)
Java-Code
private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException { String s3 = request.getParameter("car"); try { JSONObject jsonObj = new JSONObject(s3); System.out.println(jsonObj.getString("model")); System.out.println(jsonObj.getInt("year")); } catch (JSONException e) { e.printStackTrace(); } response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }"); }
Sie können JSONObject auch verwenden, um JSON-Strings zu generieren und das Servlet zu ändern
Java-Code
private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException { String s3 = request.getParameter("car"); try { JSONObject jsonObj = new JSONObject(s3); System.out.println(jsonObj.getString("model")); System.out.println(jsonObj.getInt("year")); } catch (JSONException e) { e.printStackTrace(); } JSONObject resultJSON = new JSONObject(); try { resultJSON.append("name", "Violet") .append("occupation", "developer") .append("age", new Integer(22)); System.out.println(resultJSON.toString()); } catch (JSONException e) { e.printStackTrace(); } response.getWriter().print(resultJSON.toString()); } js 代码 function jsonResponse(originalRequest) { alert(originalRequest.responseText); var myobj = originalRequest.responseText.evalJSON(true); alert(myobj.name); alert(myobj.age); }
Der obige Inhalt soll Sie in den detaillierten Prozess der JavaScript-Verarbeitung und Analyse von JSON-Daten einführen. Ich hoffe, er wird Ihnen hilfreich sein.