Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung des Prozesses der JavaScript-Verarbeitung und des Parsens von JSON-Daten_Javascript-Fähigkeiten

Detaillierte Erläuterung des Prozesses der JavaScript-Verarbeitung und des Parsens von JSON-Daten_Javascript-Fähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-05-16 15:39:37
Original
1132 Leute haben es durchsucht

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);  
  }
Nach dem Login kopieren

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);  
  } 
Nach dem Login kopieren

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;  
  }
Nach dem Login kopieren

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());  
  }
Nach dem Login kopieren

Oder verwenden Sie die Methode parseJSON()

JS-Code

function myEval() {  
  var str = '{ "name": "Violet", "occupation": "character" }';  
  var obj = str.parseJSON();  
  alert(obj.toJSONString());  
  }
Nach dem Login kopieren

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\" }");  
Nach dem Login kopieren

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);  
  }
Nach dem Login kopieren

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);  
  }  
Nach dem Login kopieren

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  
  }  
  );  
  }  
Nach dem Login kopieren

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\" }");  
  }  
Nach dem Login kopieren

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);  
  } 
Nach dem Login kopieren

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.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage