27
2017
09

springmvc 异步请求(json + ajax + jquery)

在网上找了好多资源 都是不完整的 ,花费2个小时才完成springmvc + ajax + jquery + json 传递数据
现在为避免大家走弯路,珍惜大家时间 将自己的写的demo放出来供大家参考


源码及jar包下载路径

一 : 导入jar包
二 : 配置web.xml 文件

<!-- 请求过滤器 统一字符编码 -->
  <filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
        <param-name>encoding</param-name>
        <param-value>utf-8</param-value>
    </init-param>
</filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!-- 拦截所所有以.do 结尾的请求 -->
    <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcherServlet</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>

三 : 配置springmvc的xml文件 默认路径与web.xml 相同

<!--定义扫描包 -->
    <context:component-scan base-package="*" />

    <!-- 注册适配器 -->
    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
        <property name="messageConverters">
            <list>
                <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />
            </list>
        </property>
    </bean>

四 : 编写handler类

package demo;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@RequestMapping("/demo")
@Controller
public class DemoHandler {
    @Resource
    HttpServletRequest request;

    @RequestMapping("/beanToJson")
    public @ResponseBody Student beanToJson() {
         System.out.println(request.getParameter("test"));
        return new Student("小强", "男", new Date());
    }

    @RequestMapping("/listToJson")
    public @ResponseBody List<Student> listToJson() {
        List<Student> students = new ArrayList<Student>();
        for (int i = 0; i < 5; i++) {
            students.add(new Student("小强" + i, "男", new Date()));
        }
        return students;
    }
    @RequestMapping("/mapToJson")
    public @ResponseBody Map<Integer, Student> mapToJson() {
        Map<Integer, Student> students = new HashMap<Integer, Student>();
        for (int i = 0; i < 5; i++) {
            students.put(i,new Student("小强" + i, "男", new Date()));
        }
        return students;
    }

}
// 实体bean
package demo;

import java.util.Date;

public class Student {
    private String name;
    private String sex;
    private Date birthday;


    public Student() {
    }

    public Student(String name, String sex, Date birthday) {
        this.name = name;
        this.sex = sex;
        this.birthday = birthday;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }
    public Date getBirthday() {
        return birthday;
    }
    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    @Override
    public String toString() {
        return "Student [birthday=" + birthday + ", name=" + name + ", sex="
                + sex + "]";
    }


}

五 : 编写测设jsp界面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <script type="text/javascript" src="<%=basePath %>jquery-1.8.2.js"></script> <script type="text/javascript"> $(function(){ $("#beanToJson").click(function(){ $.ajax({ url: "${pageContext.request.contextPath}/demo/beanToJson.do", type: "POST", dataType: "JSON", data: {"test":"测试内容"}, error: function() { alert("error") }, success: function(data) { console.log(data) } }) }) $("#listToJson").click(function(){ $.ajax({ url: "${pageContext.request.contextPath}/demo/listToJson.do", type: "POST", dataType: "JSON", error: function() { alert("error") }, success: function(data) { $.each( data, function(index, content) { console.log(content) }) } }) }) $("#mapToJson").click(function(){ $.ajax({ url: "${pageContext.request.contextPath}/demo/listToJson.do", type: "POST", dataType: "JSON", error: function() { alert("error") }, success: function(data) { $.each(data,function(key,value){ console.log(key) console.log(value) }) } }) }) }) </script> <body> <input type="button" id="beanToJson" value="beanToJson" ><br/> <input type="button" id="listToJson" value="listToJson"><br/> <input type="button" id="mapToJson" value="mapToJson" ><br/> </body> </html> 
上一篇:Android进阶——实战使用ConstraintLayout 替代LinearLayout、RelativeLayout和PercentLayout 下一篇:Log搜集工具软件文档梳理