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

最新推荐文章于 2024-07-28 19:19:58 发布

changzhiqiang_

最新推荐文章于 2024-07-28 19:19:58 发布

阅读量585

点赞数

分类专栏： WEB-servlet 文章标签： spring mvc json ajax jquery 异步交互

本文链接：https://blog.csdn.net/crpxnmmafq/article/details/78095670

版权

WEB-servlet 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在网上找了好多资源都是不完整的，花费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>