During the front-end development process, the front-end data interaction is often performed on the html page through ajax, and the SpringMVC controller receives data, but sometimes the back-end data cannot be received. This is because our parameters and the contentType parameter type of the front-end ajax, or what kind of relationship does the contentType and the background controller method parameters exist?
When we pass ordinary parameters, there are often two situations like this:
contentType: "application/x-www-form-urlencoded",
contentType: "application/json",
What are the differences between these two methods?
The first method: the application/x-www-form-urlencoded parameter will be parsed into a parameter table, such as:
name=John+Doe&age=30&city=New+York
Passing through ajax, the ajax is written as follows:
let params={ "username":"Zhang San", "password":"123456", } $.ajax({ url: "dologin4", contentType: "application/x-www-form-urlencoded", headers: { 'Authorization': "****",'Access-Control-Allow-Origin':'*'}, type: 'post', data: params, success: function(result) { (result) }, error: function(data) { ('The interface is not connected'); } });
When accepting this form in the background, use:()
or@RequestParam, for example:
@RequestMapping("/dologin") public ModelAndView dologin(@RequestParam String username,@RequestParam String password) throws Exception { (username); (password); ModelAndView mav = new ModelAndView(); ("info", "Welcome"); ("success"); return mav; } @ResponseBody @RequestMapping("/dologin2") public Map<String,Object> dologin2(HttpServletRequest request,HttpServletResponse response) throws Exception { String username=("username"); (username); Map<String,Object> map=new HashMap<>(); ("aa", "1111"); return map; }
Suitablex-www-form-urlencoded
Situation:
- Traditional HTML form submission
- Simple key-value pair data
- Need backward compatibility with old systems
- File upload (combined
multipart/form-data
)
The second method: contentType: "application/json", the entire body is processed as a single data stream, such as:
{ "name": "John Doe", "age": 30, "city": "New York", "hobbies": ["reading", "swimming"] }
Passing through ajax, the ajax is written as follows:
function dologin(){ let params={ "username":"Zhang San", "password":"123456", } $.ajax({ url: "dologin4", contentType: "application/json", headers: { 'Authorization': "****",'Access-Control-Allow-Origin':'*'}, type: 'post', data: (params), success: function(result) { (result) }, error: function(data) { ('The interface is not connected'); } }); }
The code for Java backend accepting parameters passed in foreground is as follows: @RequestBody
@ResponseBody @RequestMapping("/dologin4") public Map<String,Object> dologin4(HttpServletRequest request,HttpServletResponse response) throws Exception { String uu=("username"); (uu); StringBuilder jsonBuilder = new StringBuilder(); try (BufferedReader reader = ()) { String line; while ((line = ()) != null) { (line); } } String jsonString = (); ObjectMapper mapper = new ObjectMapper(); Map<String, Object> jsonMap = (jsonString, ); String username = (String) ("username"); (username); Map<String,Object> map=new HashMap<>(); ("aa", "1111"); return map; } @ResponseBody @RequestMapping("/dologin3") public Map<String,Object> dologin3(@RequestBody Map<String,Object> reqMap) throws Exception { String username=("username").toString(); (username); Map<String,Object> map=new HashMap<>(); ("aa", "1111"); return map; }
Suitableapplication/json
Situation:
- RESTful API Communication
- Complex data structures
- Need to clarify the data type
- Front-end separation architecture
- Mobile application communication with server
The two scenarios are different. If the front-end is passing in json format, then you use the back-end:
String uu=("username"); (uu);
This way, data cannot be received, and the received parameters are always null, because json is transmitted to the background as a stream.