JQuery passes and parses Json data under the springMVC framework
- 2020-05-30 20:04:15
- OfStack
As a kind of lightweight data exchange format, json occupies a very important position in the data exchange of front and background. The syntax for Json is very simple, using key-value pairs.
JSON JavaScript object can be expressed in a set of data is converted to a string, and then you can easily pass the string between the function, or string in asynchronous applications from Web client to the server program, can also be transmitted from the server program json format string for the front-end and interpreted by the front end. This string is json compliant, and json is a subset of javascript syntax, so javascript can easily interpret it, and JSON can represent more complex constructs than name/value pairs. Let's take a look at how jQuery passes/parses data in json format through an example.
1. First look at the front-end jsp code:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/springMVC6/js/jquery-1.7.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
// Pass string format json Object to background ( 1 a json Object)
$("#resolveJsonObject").click(function(){
var userName =encodeURI($("#userName").attr("value"));
var age = encodeURI($("#age").attr("value"));
var user = {userName:userName,age:age};
var aMenu = encodeURI(JSON.stringify(user));
$.ajax({
url:"/springMVC6/user/data/resolveJsonObject" ,
data:"orderJson=" + aMenu,
success:function(data){
}
});
});
// pass json Array to background
$("#resolveJsonArray").click(function(){
var userName =encodeURI($("#userName").attr("value"));
var age = encodeURI($("#age").attr("value"));
// An array of start
var user1 = {userName:userName,age:age};
var allMenu={
"menu":[ ]
};
allMenu.menu.push(user1);
var allMenu1 = encodeURI(JSON.stringify(allMenu));
$.ajax({
//json An array of
url:"/springMVC6/user/data/resolveJsonArray" ,
data:"orderJson=" + allMenu1,
success:function(data){
}
});
});
// Receiving background json Parsing in the foreground
$("#resolveJson").click(function(){
$.ajax({
// Parsing returned from the background json data
url:"/springMVC6/user/data/resolveJson" ,
type:"post",
success:function(data){
var arr=eval(data);
alert(arr.length);
for(var m = 0;m<arr.length;m++){
alert(arr[m].user.userName);
}
}
});
});
});
</script>
</head>
<body>
<h1>json Add user </h1>
Name: <input id="userName" type="text" name="userName">
age :<input id="age" type="text" name="age"><br>
<input type="button" id="resolveJsonObject" value="json object ">
<input type="button" id="resolveJsonArray" value="json An array of ">
<input type="button" id="resolveJson" value=" The front-end parsing json string ">
</body>
</html>
2. Use javabean to parse front-end data:
package com.tgb.web.controller.annotation;
import java.io.IOException;
import java.net.URLDecoder;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.tgb.web.controller.entity.User;
@Controller
@RequestMapping("/user/data")
public class DataController {
// To receive a string from the foreground json Object, which is parsed in the background
@RequestMapping("/resolveJsonObject" )
public void resolveJsonObject(HttpServletRequest request,HttpServletResponse response) throws IOException {
// decoding
String str = URLDecoder.decode(request.getParameter("orderJson"),"UTF-8");
JSONObject jb=new JSONObject();
// will json The format of the string is converted to json Object and get the" userName Attribute value"
String o=(String)jb.fromObject(str).get("userName");
System.out.println(o);
}
// pass json Array string
@RequestMapping("/resolveJsonArray" )
public void resolveJsonArray(HttpServletRequest request,HttpServletResponse response) throws IOException {
// Decoding, in order to solve the Chinese garbled code
String str = URLDecoder.decode(request.getParameter("orderJson"),"UTF-8");
JSONObject jb=new JSONObject();
// will json The format of the string is converted to json The array object
JSONArray array=(JSONArray)jb.fromObject(str).get("menu");
// achieve json Array control 1 An object
JSONObject o = (JSONObject) array.get(0);// For the first 1 a array The results of
// Take out the json The first in the array 1 Individual object" userName Attribute value"
String name=o.get("userName").toString();// Get the attribute value
System.out.println(name);
}
// Returns through this function json Format the data in the foreground through JQuery parsing
@RequestMapping("/resolveJson" )
public void resolveJson(HttpServletRequest request,HttpServletResponse response) throws IOException {
List m = (List) new ArrayList();
JSONArray jsons = new JSONArray();
for(int i=0;i<10;i++){
User user = new User();
user.setUserName("name_" + i);
m.add(user);
}
for(int j=0;j<m.size();j++){
JSONObject jsonObject = new JSONObject();
jsonObject.put("user", m.get(j));
jsons.add(jsonObject);
}
response.getWriter().print(jsons.toString()) ;
}
@RequestMapping("/toJson" )
public String toJson() {
return "/json";
}
}
The function of json is not only to pass in the front and back as a string, but also to consider its transmission efficiency when we use json to pass data. When two systems need for data exchange, if pass through serialized objects, efficiency is very low, if the transfer is to store a large number of objects of the array of time efficiency is more dare not imagine, at this time if by placing objects or data into json string which is passed, the efficiency will improve a lot.