SpringMVC+JQuery Ajax简单实例

一、Ajax简介：
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）是与服务器交换数据的技术。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

常用方法：

$.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('结束')    }})

当然还有.get(),.post()等等方法。
具体的可以参考w3c

二、demo实现
纸上谈来终觉浅，说了概念，还是要具体做才行。
该demo很简单，使用SpringMVC+Ajax完成简单的根据输出的id可以点击查询显示相应信息，注意并不会刷新页面。

该项目是基于Maven的。
1.首先是pom.xml文件：

<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.实体类：

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@Controllerpublic 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配置文件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配置文件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.实现查询的js文件——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.首页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.查询界面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.最终结果展示：
通过输入id，点击查询相应用户信息，再在前端做显示

当然这只是一个简单的入门demo，具体使用还是需要结合业务。

参考：
w3c
mkyong