Detailed explanation of the process of JavaScript processing and parsing JSON data_javascript skills

JSON (JavaScript Object Notation) is a simple data format that is more lightweight than xml. JSON is a native JavaScript format, which means that processing JSON data in JavaScript does not require any special API or toolkit.

The rules of JSON are simple: an object is an unordered collection of "name/value pairs". An object starts with "{" (left bracket) and ends with "}" (right bracket). Each "name" is followed by a ":" (colon); "name/value" pairs are separated by a "," (comma). For specific details, please refer to http://www.json.org/json-zh.html

A simple example:

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);  
  }

This represents a user object with attributes such as username, age, info, address, etc.

You can also use JSON to simply modify the data, modify the above example

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 provides the json.js package. After downloading http://www.json.org/json.js, import it and then simply use object.toJSONString() to convert it to JSON. data.

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;  
  }

You can use eval to convert JSON characters to Object

js code

function myEval() {  
  var str = '{ "name": "Violet", "occupation": "character" }';  
  var obj = eval('(' + str + ')');  
  alert(obj.toJSONString());  
  }

Or use parseJSON() method

js code

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

The following uses prototype to write an ajax example of JSON.

First write a servlet (mine is servlet.ajax.JSONTest1.java) and write one sentence

java code

response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");  

Write an ajax request on the page

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 provides a JSON method, String.evalJSON(), you can modify the above method without using json.js

js code

function jsonResponse(originalRequest) {  
  alert(originalRequest.responseText);  
  var myobj = originalRequest.responseText.evalJSON(true);  
  alert(myobj.name);  
  }  

JSON also provides java jar package http://www.json.org/java/index.html The API is also very simple, here is an example

Add request parameters in javascript

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  
  }  
  );  
  }  

Using the JSON request string, you can simply generate JSONObject and parse it, modify the servlet to add JSON processing (use 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\" }");  
  }  

You can also use JSONObject to generate JSON strings and modify the servlet

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);  
  } 

The above content is to introduce you to the detailed process of JavaScript processing and parsing JSON data. I hope it will be helpful to you.