SpringMVC环境下实现的Ajax异步请求（JSON格式数据）

2024-12-30 技术教程

一环境搭建

首先是常规的spring mvc环境搭建，不用多说，需要注意的是，这里需要引入jackson相关jar包，然后在spring配置文件“springmvc-servlet.xml”中添加json解析相关配置，我这里的完整代码如下：

<?xmlversion="1.0"encoding="UTF-8"?><beansxmlns="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/beanshttp://www.springframework.org/schema/beans/spring-beans-4.0.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context-4.0.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd"><beanid="mappingJacksonHttpMessageConverter"class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"><propertyname="supportedMediaTypes"><list><value>text/html;charset=UTF-8</value><value>application/json;charset=UTF-8</value></list></property><propertyname="objectMapper"><beanclass="org.codehaus.jackson.map.ObjectMapper"><propertyname="dateFormat"><beanclass="java.text.SimpleDateFormat"><constructor-argtype="java.lang.String"value="yyyy-MM-ddHH:mm:ss"></constructor-arg></bean></property></bean></property></bean><beanclass="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"><propertyname="messageConverters"><list><refbean="mappingJacksonHttpMessageConverter"/></list></property></bean><mvc:annotation-drivencontent-negotiation-manager="contentNegotiationManager"/><beanid="contentNegotiationManager"class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean"><propertyname="favorPathExtension"value="false"/><propertyname="favorParameter"value="true"/><propertyname="ignoreAcceptHeader"value="false"/><propertyname="mediaTypes"><value>atom=application/atom+xmlhtml=text/htmljson=application/jsonxml=application/xml*=*/*</value></property></bean><context:annotation-config/><context:component-scanbase-package="cn.zifangsky.controller"/><mvc:default-servlet-handler/><beanid="jspViewResolver"class="org.springframework.web.servlet.view.InternalResourceViewResolver"><propertyname="requestContextAttribute"value="rc"/><propertyname="viewClass"value="org.springframework.web.servlet.view.JstlView"/><propertyname="prefix"value="/WEB-INF/jsp/"/><propertyname="suffix"value=".jsp"/><propertyname="order"value="1"></property></bean></beans>

项目结构：

注：我这里测试使用的完整jar包：http://pan.baidu.com/s/1dEUwdmL

仅供参考

二测试实例

（1）在WEB-INF/jsp目录下新建了一个index.jsp文件，包含了简单的jQuery的ajax请求，请求数据的格式是JSON，具体代码如下：

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><basehref="<%=basePath%>"><scripttype="text/javascript"src="scripts/jquery/jquery-1.6.2.min.js"></script><scripttype="text/javascript"src="scripts/jquery/jquery.i18n.properties-min-1.0.9.js"></script><scripttype="text/javascript"src="scripts/jquery/jquery.autocomplete.js"></script><scripttype="text/javascript"src="scripts/jquery/jquery.loadmask.js"></script><scripttype="text/javascript"src="scripts/jquery/jquery.form.js"></script><scripttype="text/javascript"src="scripts/jquery/jquery.timers.js"></script><title>jQueryi18n</title><scripttype="text/javascript">$().ready(function(){$("#sub").click(function(){varname=$("#username").val();varage=18;varuser={"username":name,"age":age};$.ajax({url:'hello.json',type:'POST',data:JSON.stringify(user),//RequestbodycontentType:'application/json;charset=utf-8',dataType:'json',success:function(response){//请求成功alert("你好"+response.username+"["+response.age+"]，当前时间是："+response.time+"，欢迎访问：http://www.zifangsky.cn");},error:function(msg){alert(msg);}});});});</script></head><body><inputtype="text"id="username"><inputtype="button"id="sub"value="Go"><br></body></html>

（2）一个简单的model类User，代码如下：

packagecn.zifangsky.controller;publicclassUser{privateStringusername;privateintage;publicStringgetUsername(){returnusername;}publicvoidsetUsername(Stringusername){this.username=username;}publicintgetAge(){returnage;}publicvoidsetAge(intage){this.age=age;}}

（3）controller类TestController.java：

packagecn.zifangsky.controller;importjava.text.Format;importjava.text.SimpleDateFormat;importjava.util.Date;importjava.util.HashMap;importjava.util.Map;importorg.springframework.context.annotation.Scope;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestBody;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestMethod;importorg.springframework.web.bind.annotation.ResponseBody;importorg.springframework.web.servlet.ModelAndView;@Controller@Scope("prototype")publicclassTestController{/***转到页面*/@RequestMapping(value="/hello.html")publicModelAndViewlist(){ModelAndViewview=newModelAndView("index");returnview;}/***ajax异步请求，请求格式是json*/@RequestMapping(value="/hello.json",method={RequestMethod.POST})@ResponseBodypublicMap<String,String>hello(@RequestBodyUseruser){//返回数据的Map集合Map<String,String>result=newHashMap<String,String>();Formatformat=newSimpleDateFormat("yyyy-MM-ddHH:mm:ss");//返回请求的usernameresult.put("username",user.getUsername());//返回年龄result.put("age",String.valueOf(user.getAge()));//返回当前时间result.put("time",format.format(newDate()));returnresult;}}

关于具体的执行步骤我简单说一下：

i）项目启动后，在浏览器中访问：http://localhost:8089/SpringDemo/hello.html，然后会转到执行controller中的list方法，接着会转到/WEB-INF/jsp/index.jsp（PS：在controller中返回的是逻辑视图，跟在springmvc-servlet.xml文件中定义的路径前缀和后缀进行拼接后合成文件的真正路径）

ii）在index.jsp页面输入文字然后点击按钮，将会触发ajax请求，这个请求会获取输入框中的数据和默认的“age”参数拼接成json格式字符串最后提交到“hello.json”这个请求，也就是执行controller中的hello方法

iii）hello方法执行完毕后会返回一系列数据最后在页面中显示出来

（4）效果如下：