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

一 环境搭建

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

<?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-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd"> <!-- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>text/html;charset=UTF-8</value> <value>application/json;charset=UTF-8</value> </list> </property> <property name="objectMapper"> <bean class="org.codehaus.jackson.map.ObjectMapper"> <property name="dateFormat"> <bean class="java.text.SimpleDateFormat"> <constructor-arg type="java.lang.String" value="yyyy-MM-dd HH:mm:ss"></constructor-arg> </bean> </property> </bean> </property> </bean> <!-- 启动Spring MVC的注解功能,完成请求和注解POJO的映射 --> <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"> <property name="messageConverters"> <list> <ref bean="mappingJacksonHttpMessageConverter" /><!-- json转换器 --> </list> </property> </bean> <mvc:annotation-driven content-negotiation-manager="contentNegotiationManager" /> <bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean"> <!-- true,开启扩展名支持,false关闭支持 --> <property name="favorPathExtension" value="false" /> <!-- 用于开启 /userinfo/123?format=json的支持 --> <property name="favorParameter" value="true" /> <!-- 设置为true以忽略对Accept Header的支持 --> <property name="ignoreAcceptHeader" value="false" /> <property name="mediaTypes"> <value> atom=application/atom+xml html=text/html json=application/json xml=application/xml *=*/* </value> </property> </bean> <context:annotation-config /> <!-- 启动自动扫描该包下所有的Bean(例如@Controller) --> <context:component-scan base-package="cn.zifangsky.controller" /> <mvc:default-servlet-handler /> <!-- 定义视图解析器 --> <bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="requestContextAttribute" value="rc" /> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /> <property name="order" value="1"></property> </bean> </beans>

项目结构:

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

二 测试实例

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

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="<%=basePath%>"> <script type="text/javascript" src="scripts/jquery/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="scripts/jquery/jquery.i18n.properties-min-1.0.9.js"></script> <script type="text/javascript" src="scripts/jquery/jquery.autocomplete.js"></script> <script type="text/javascript" src="scripts/jquery/jquery.loadmask.js"></script> <script type="text/javascript" src="scripts/jquery/jquery.form.js"></script> <script type="text/javascript" src="scripts/jquery/jquery.timers.js"></script> <title>jQuery i18n</title> <script type="text/javascript"> $().ready( function() { $("#sub").click( function() { var name = $("#username").val(); var age = 18; var user = {"username":name,"age":age}; $.ajax({ url : 'hello.json', type : 'POST', data : JSON.stringify(user), // Request body contentType : '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> <input type="text" id="username" style="width: 100px; height: 30px; font-size: 20px; font-weight: bold;"> <input type="button" id="sub" value="Go" style="height: 40px; height: 30px;"> <br> </body> </html>

(2)一个简单的model类User,代码如下:

package cn.zifangsky.controller; public class User { private String username; private int age; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } }

(3)controller类TestController.java:

package cn.zifangsky.controller; import java.text.Format; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.Map; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; @Controller @Scope("prototype") public class TestController { /** * 转到页面 */ @RequestMapping(value = "/hello.html") public ModelAndView list() { ModelAndView view = new ModelAndView("index"); return view; } /** * ajax异步请求, 请求格式是json */ @RequestMapping(value = "/hello.json", method = { RequestMethod.POST }) @ResponseBody public Map<String, String> hello(@RequestBody User user) { // 返回数据的Map集合 Map<String, String> result = new HashMap<String, String>(); Format format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); // 返回请求的username result.put("username", user.getUsername()); // 返回年龄 result.put("age", String.valueOf(user.getAge())); // 返回当前时间 result.put("time", format.format(new Date())); return result; } }

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

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)效果如下:

以上所述是小编给大家介绍的SpringMVC环境下实现的Ajax异步请求JSON格式数据的相关内容,希望对大家有所帮助!

时间: 2024-12-24 20:37:03

SpringMVC环境下实现的Ajax异步请求JSON格式数据的相关文章

SpringMVC环境下实现的Ajax异步请求JSON格式数据_AJAX相关

一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

Ajax异步请求JSon数据(图文详解)_AJAX相关

上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图:

Ajax异步请求JSon数据(图文详解)

上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 脚本之家友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,

ajax-Asp.net MVC Ajax post 传json格式数据控制器如何接收

问题描述 Asp.net MVC Ajax post 传json格式数据控制器如何接收 这是我的ajax代码 这是我要传的数据 这是我的控制器方法 求大师解惑,我的控制器方法里该如何接收这些值啊? 解决方案 http://www.jb51.net/article/23354.htmhttp://www.jquery001.com/pass-json-data-in-asp.net-mvc3.html 解决方案二: http://www.cnblogs.com/kissdodog/archive/

Post请求Json格式数据到WCF服务

测试实体类:(需要在客户端和服务端建了有相同字段名称的实体) public class CompositeType    {        public CompositeType()        {            SubCompositeTypes = new List<SubCompositeType>() { new SubCompositeType() };        }        public bool BoolValue { get; set; }       

Ajax异步请求PHP数据

接到了老师的一个作业,实现的布局如图: 如果输入了科室ID,科室名字只显示与ID对应的,若没有输入,则显示全部,然后根据I科室名字的值,在所属大科中的文本框自动显示科室名字所在的大科.例如:选择了心血管内科,则在所属大科显示内科. 主要代码如下: 根据ID请求科室 function showHint(str) { var xmlhttp; if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new

Jquery Ajax 异步处理Json数据.

啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面网页特效能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod])     [WebMethod]     public static string ABC(string ABC

ajax-Chrome处理本地Ajax异步请求的问题

问题描述 Chrome处理本地Ajax异步请求的问题 --allow-file-access-from-files 加了这个还是会显示XMLHttpRequest cannot find file怎么回事 求解 解决方案 请求的文件不存在也会报这种错误,自己检查下路径是否存在,文件名是否拼写正确 解决方案二: 解决办法是给chrome添加启动参数:--allow-file-access-from-files ,这样本地ajax请求就不会报跨域错误了.(注意如果给chrome添加多个启动参数,每个

jquery的ajax异步请求接收返回json数据实例_jquery

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json