20 SSM - Ajax use - Code World

Introduced

Before AJAX technology, we use the request is forwarded or redirected to continuously acquire data, these two methods are page requests (each request to obtain a whole page) , its high consumption of resources.

Now we use ajax, ajax technology is the body of the request , change only part of the data pages without re-request a new page, so that customers can end higher efficiency.

json

We will return to the data server needs to package kefuduan json objects, easy to transport.

A json object following format:

json object can contain a string object, an array of objects, json object.

{ 
  "Name": "Joe Smith", 
  "Skills": [ "basketball", "swimming"], 
  "Department": { 
  "ID" '. 1 ", 
  " name ":" Personnel Department "   
}     
}

Configuration

The introduction of the jar package

maven project, add a dependency in pom.xml file coordinates. This dependence is used for the non-base data type of data format conversion, in the manner used springmvc return the object, the object will be returned by this jar package into json object.

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.10.1</version>
</dependency>

The introduction of driver

Driving need to configure the above jar package before use, simply add the following code to springMVC profile.

<! - annotation-driven: it can increase the parsing json -> 
<MVC: Annotation-Driven> </ MVC: Annotation-Driven>

use

For example, we verify a login webpage came the account password is correct.

In the Controller:

@RequestMapping ( "login.do") 
@ResponseBody 
public a JsonResult Login (username String, String password) { 
		a JsonResult a JsonResult JR new new = (); 
		IF ( "the root" .equals (username)) { 
			IF ( "1234" .equals ( password)) { 
				jr.setState (. 3); // successful login 
			} the else { 
				jr.setState (2); // password incorrect 
			} 
		} the else { 
			jr.setState (. 1); // user does not exist 
		} 
		return JR; 
}

　　From which we JsonResult a given class, to return the data package, because it is non-basic data types, so it is converted back to the client data json Jackson-databind.jar.

JsonResult class.

public class JsonResult {
	private Integer state;

	public Integer getState() {
		return state;
	}

	public void setState(Integer state) {
		this.state = state;
	}
	
}

With the addition of @ResponseBody notes, without using ajax received, we will see a return to the page like this:

We can see the java object into json objects

Using AJAX

Next, we use ajax receives the returned data.

First, let's quote jQuery.
Then the login button on the login page to set login () method (type attribute changed the login button button), for the demonstration of ajax.
Then use $ .ajax () request and response data receiving and processing

The following $ .ajax ({..}) i.e. the conventional fixed wording of ajax containing conventional five parameters:

url: url of this request
type: the equivalent form tag method, the value of: post, get
date: data transmitted to the server using key-value pairs & splice between
dateType: equivalent to content-Type, generally have the values html, text, json etc.
success: the value of a callback function only when the response status code 200 is successful, came back to perform the callback function. Parameters of the function for the server returns the data object , parameter names can be customized.


					alert("登陆成功");
				}
			}
			
		})
	}
</script>
</head>
<body>
	<form action="login.do" method="post">
		<table>
			<tr>
				<td>用户名：</td>
				<td><input type="text" id="username" name="username"></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="text" id="password" name="password"></td>
			</tr>
			<tr>
				<td><input type="button" value="登录"  onclick="login()"/></td>
			</tr>
		</table>
	</form>
</body>
</html>

20 SSM - Ajax use