Ajax

Ajax application and server data transfer



SpringMVC needs to convert JSON data and Java entity classes to and from each other when performing Ajax operations, which requires an additional additionJackson – all – 1.9.11. Jar

1. Send data from the browser to handler

Page:

<button id="btn1"> </button>Copy the code

jQuery:

< script type = "text/javascript" SRC = "${pageContext. Request. ContextPath} / jQuery/jQuery - 3.2.1. Js" > < / script > < script Type = "text/javascript" > $(function () {$(" # btn1 "). Click (function () {/ / experiment 1: Send scattered data/var/request address url = "${pageContext. Request. ContextPath} / one"; / var/request parameters param = {" empId ": 20," userName ":" Tom "and" random ": Math. The random ()}; Var callBack = function(response){console.log(response); }; Var type = "text"; $. POST (url, param, callBack, type); }); }); </script>Copy the code

handlers:

// @responseBody returns the result of the handler method as the ResponseBody, and doesn't go to any more views. Charset =UTF-8" // If this is JSON data, the content type is: Application/JSON @requestMapping (value="/one", Produces ="text/ HTML; charset=UTF-8") public String one( @RequestParam("empId") Integer empId, @RequestParam("userName") String userName) { System.out.println("empId="+empId); System.out.println("userName="+userName); Return "Execute successfully!!" ; }Copy the code

In this case, the handler method receives the data exactly the same as before. What’s new is the @responseBody annotation. The purpose of this annotation is to return the value of the current handler method directly to the browser as response data rather than resolving the view name.

2 Send the data page corresponding to the POJO:

<button id="btn2"> </button>Copy the code

jQuery:

$(" # btn2 "). Click (function () {/ / experiment 2: sending data var url corresponding POJO = "${pageContext. Request. ContextPath} / two"; var param = { "stuId":5, "stuName":"jerry", "stuSubject":"java", "random":Math.random() }; var callBack = function(response){ console.log(response); }; var type = "text"; $. POST (url, param, callBack, type); });Copy the code

handlers:

@ResponseBody @RequestMapping(value="/two",produces="text/html; charset=UTF-8") public String two(Student student) { System.out.println(student); Return "Execute successfully!!" ; }Copy the code

Again, we use the @requestbody annotation, which converts the JSON data in the RequestBody to the data type we specify. In addition to the @requestMapping annotation we added a produces attribute to specify how to encode the responsebody data to solve the problem of garbled characters in the responsedata.

Remember that when you use @responseBody to return results, you need to use “application/json “in the @requestMapping annotation to return results = produces; Charset =UTF-8” to solve the character set problem. 3 Send the JSON request body

<button id="btn3"> Experiment 3: Send JSON request body </button>Copy the code

jQuery:

$("#btn3").click(function(){ //1. Var stuArray = new Array(); Var stu01 = {"stuId":11," stuame ":"tom11","stuSubject":"php11"}; var stu02 = {"stuId":22,"stuName":"tom22","stuSubject":"php22"}; var stu03 = {"stuId":33,"stuName":"tom33","stuSubject":"php33"}; //3. Store array stuarray.push (STU01); stuArray.push(stu02); stuArray.push(stu03); Var requestBodyData = json.stringify (stuArray); / / 5. Send an Ajax request $. Ajax ({" url ":" ${pageContext. Request. ContextPath} / three ", / / request address "contentType" : "application/json. Charset = utF-8 ", // Request body content type "data":requestBodyData, // data sent to the server, Future request body "dataType":"text", "Success ":function(response){console.log(response)}, "type":"POST"}); });Copy the code

handlers:

@ResponseBody @RequestMapping(value="/three",produces="text/html; Public String three(@requestBody List<Student> stuList) {for (@requestBody List<Student> stuList) {for (@requestBody List<Student> stuList) (Student student : stuList) { System.out.println(student); } return "Execute successfully!!" ; }Copy the code

4. Receive text

<button id="btn4">Copy the code

jQuery:

$(" # btn4 "). Click (function () {/ / lab 4: receive text var url = "${pageContext. Request. ContextPath} / four"; var callBack = function(response) { console.log(response); console.log(response.stuName); }; // If the server returns a JSON string, but type="text", then the response is just a string. $.post(url, callBack, type); });Copy the code

handlers:

@ResponseBody @RequestMapping(value="/four",produces="text/html; Charset = utF-8 ") public String five() {return "return from server..." ; }Copy the code

5. Receive JSON

Experiment 5: Receive JSON

JQuery:

$(" # btn5 "). Click (function () {/ / lab 5: receive JSON var url = "${pageContext. Request. ContextPath} / five"; var callBack = function(response) { console.log(response); console.log(response.stuName); // If the response body data returned by the server cannot be parsed into JSON data, subsequent operations cannot be performed without an error message. //console.log("aaaaaaaaaa........" ); }; var type = "json"; $.post(url, callBack, type); });Copy the code

Handlers:

@ResponseBody @RequestMapping(value="/five",produces="application/json; charset=UTF-8") public Student four() { return new Student(55, "stuName555", "stuSubject555"); }Copy the code

When receiving data from the server, make sure that the jQuery parse method is in the same format as the actual data returned.

@ PathVariable and @ RequestParam

/ emp/remove / 23 @ PathVariable (” empId “)

/emp/remove? EmpId = 23 @ RequestParam (” empId “)