1. Introduction to Ajax:
AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML) is a technology for exchanging data with the server.
In short, without reloading the entire web page, AJAX loads data through the background and displays it on the web page.
Common methods:
$.ajax({
url:'http://www.test.com',
type:'POST', //GET
async:true, //或false,是否异步
data:{
name:'huang',age:23
},
timeout:5000, //超时时间
dataType:'json', //返回的数据格式：json/xml/html/script/jsonp/text
beforeSend:function(xhr){
console.log(xhr)
console.log('发送前')
},
success:function(data,textStatus,jqXHR){
console.log(data)
console.log('成功')
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log('错误')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log('结束')
}
})Of course there is .ge t ( ) , .post() and so on.
For details, please refer to w3c
Second, the demo implementation. After
talking on the paper, I feel that it is very simple. After talking about the concept, we still have to be specific.
The demo is very simple, using SpringMVC+Ajax to complete a simple query and display the corresponding information according to the output id. Note that the page will not be refreshed.
The project is based on Maven.
1. First is the pom.xml file:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>SpringMVC_AJAX</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>SpringMVC_AJAX Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.3.1.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>4.3.1.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.1.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.3.1.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.1</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.5.0</version>
</dependency>
<dependency>
<groupId>cglib</groupId>
<artifactId>cglib</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>asm</groupId>
<artifactId>asm</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
<build>
<finalName>SpringMVC_AJAX</finalName>
</build>
</project>
2. Entity class:
public class User {
private long id;
private String username;
private String pswd;
public User() {
}
public User(long id, String username, String pswd) {
super();
this.id = id;
this.username = username;
this.pswd = pswd;
}
public long getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPswd() {
return pswd;
}
public void setPswd(String pswd) {
this.pswd = pswd;
}
@Override
public String toString() {
return "User [id=" + id + ", username=" + username + ", pswd=" + pswd
+ "]";
}
}3.userDao
public interface UserDao {
public User addUser(User user);
public long deleteUser(Long id);
public User queryOneUser(Long id);
public User changeUser(User user);
public List<User> getUserList();
}
4.userDaoImpl
@Repository("userDao")
public class UserDaoImpl implements UserDao {
private static List<User> users;
//为了方便，这里直接构建需要的数据
{
users = new ArrayList<User>();
users.add(new User(101, "Mike", "123"));
users.add(new User(102, "Huang", "4235"));
users.add(new User(103, "Mao", "657567"));
}
public User addUser(User User) {
//User.setId(System.currentTimeMillis());
users.add(User);
return User;
}
public long deleteUser(Long id) {
for (User User : users) {
if (User.getId() == id){
users.remove(User);
return id;
}
}
return id;
}
public User queryOneUser(Long id) {
User user = new User();
for (User user2 : users) {
if (user2.getId() == id){
return user2;
}
}
return user;
}
public User changeUser(User User) {
for (User s : users) {
if (s.getId() == User.getId()){
return User;
}
}
return null;
}
public List<User> getUserList() {
return users;
}
}5.controller
@EnableWebMvc
@Controller
public class UserMVC {
@Autowired
private UserDao userDao;
@RequestMapping(value="jsp/getUser.do")
public ModelAndView index(){
return new ModelAndView("getUser");
}
//根据id查询返回相应结果
@RequestMapping(value="jsp/getUser/{id}")
@ResponseBody
public User getUser(@PathVariable("id") long id){
User user = userDao.queryOneUser(id);
return user;
}
//查询所有信息，但是前端没做实现，可以自己试试
@RequestMapping(value="jsp/getUserList.json")
@ResponseBody
public List<User> getUserList(){
List<User> list = userDao.getUserList();
return list;
}
}6.SpringMVC configuration file springmvc-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">
<!-- 启用spring mvc 注解 -->
<context:annotation-config />
<!-- scan the package and the sub package -->
<context:component-scan base-package="com.example"/>
<!-- don't handle the static resource -->
<mvc:default-servlet-handler />
<!-- if you use annotation you must configure following setting -->
<mvc:annotation-driven />
<!-- 完成请求和注解POJO的映射 -->
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
<!-- configure the InternalResourceViewResolver 一种试图解析器 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
id="internalResourceViewResolver">
<!-- 前缀 -->
<property name="prefix" value="" />
<!-- 后缀 -->
<property name="suffix" value=".jsp" />
</bean>
</beans>7. web configuration file web.xml
<web-app>
<display-name>SpringMVC</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/springmvc-servlet.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
8. The js file that implements the query-ajax.js
$(document).ready(function() {
$("#searchByUserIdBtn").prop("disabled",false);
$("#searchByUserIdBtn").on("click", function() {
getUserById();
});
});
function getUserById() {
var userId = $("#userId").val();
$.ajax({
type : "post",
url : "getUser/" + userId,
data : {
"id" : userId,
},
//为了防止重复点击
beforeSend: function() {
enableButton(true);
},
//成功
success : function(data) {
console.log("Success:-->>" + data);
display(data);
},
//错误情况
error : function(error) {
console.log("Error:-->>" + error);
display("Error:Can't get message");
},
//请求完成后回调函数 (请求成功或失败之后均调用)。
complete: function(message) {
console.log("Complete:-->>" + message);
enableButton(false);
}
});
function enableButton(flag) {
$("#searchByUserIdBtn").prop("disabled",flag);
}
//这里的JSON.stringify可以将json对象转换为字符串
function display(data) {
var userJson = "<h4>Ajax Response</h4><pre>"
+ JSON.stringify(data, null, 4) + "</pre>";
$("#userList").html(userJson);
}
}9. Home index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<a href="getUser.do">click to enter</a><br>
</body>
</html>10. Query interface getUser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/ajax.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
<div id="userList">
</div>
<form>
UserId:<input id="userId" type="text" ><br>
<input id="searchByUserIdBtn" type="button" value="SearchByUserId">
</form>
</div>
</body>
</html>11. Final result display:
Enter the id, click to query the corresponding user information, and then display it on the front end
Of course, this is just a simple introductory demo, the specific use still needs to be combined with the business.