当前位置：Gxlcms > AJAX > SpringMVC环境下实现的Ajax异步请求JSON格式数据

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

时间：2021-07-01 10:21:17 帮助过：35人阅读

一 环境搭建

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

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
  4. xmlns:mvc="http://www.springframework.org/schema/mvc"
  5. xsi:schemaLocation="http://www.springframework.org/schema/beans 
  6. http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
  7. http://www.springframework.org/schema/context 
  8. http://www.springframework.org/schema/context/spring-context-4.0.xsd
  9. http://www.springframework.org/schema/mvc 
  10. http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">
  11. <!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
  12. <bean id="mappingJacksonHttpMessageConverter"
  13. class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
  14. <property name="supportedMediaTypes">
  15. <list>
  16. <value>text/html;charset=UTF-8</value>
  17. <value>application/json;charset=UTF-8</value>
  18. </list>
  19. </property>
  20. <property name="objectMapper">
  21. <bean class="org.codehaus.jackson.map.ObjectMapper">
  22. <property name="dateFormat">
  23. <bean class="java.text.SimpleDateFormat">
  24. <constructor-arg type="java.lang.String" value="yyyy-MM-dd HH:mm:ss"></constructor-arg>
  25. </bean>
  26. </property>
  27. </bean>
  28. </property>
  29. </bean>
  30. <!-- 启动Spring MVC的注解功能，完成请求和注解POJO的映射 -->
  31. <bean
  32. class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
  33. <property name="messageConverters">
  34. <list>
  35. <ref bean="mappingJacksonHttpMessageConverter" /><!-- json转换器 -->
  36. </list>
  37. </property>
  38. </bean>
  39. <mvc:annotation-driven
  40. content-negotiation-manager="contentNegotiationManager" />
  41. <bean id="contentNegotiationManager"
  42. class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
  43. <!-- true，开启扩展名支持，false关闭支持 -->
  44. <property name="favorPathExtension" value="false" />
  45. <!-- 用于开启 /userinfo/123?format=json的支持 -->
  46. <property name="favorParameter" value="true" />
  47. <!-- 设置为true以忽略对Accept Header的支持 -->
  48. <property name="ignoreAcceptHeader" value="false" />
  49. <property name="mediaTypes">
  50. <value>
  51. atom=application/atom+xml
  52. html=text/html
  53. json=application/json
  54. xml=application/xml
  55. *=*/*
  56. </value>
  57. </property>
  58. </bean>
  59. <context:annotation-config />
  60. <!-- 启动自动扫描该包下所有的Bean(例如@Controller) -->
  61. <context:component-scan base-package="cn.zifangsky.controller" />
  62. <mvc:default-servlet-handler />
  63. <!-- 定义视图解析器 -->
  64. <bean id="jspViewResolver"
  65. class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  66. <property name="requestContextAttribute" value="rc" />
  67. <property name="viewClass"
  68. value="org.springframework.web.servlet.view.JstlView" />
  69. <property name="prefix" value="/WEB-INF/jsp/" />
  70. <property name="suffix" value=".jsp" />
  71. <property name="order" value="1"></property>
  72. </bean>
  73. </beans>

项目结构：

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

二 测试实例

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

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
  6. + path + "/";
  7. %>
  8. <html>
  9. <head>
  10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11. <base href="<%=basePath%>">
  12. <script type="text/javascript" src="scripts/jquery/jquery-1.6.2.min.js"></script>
  13. <script type="text/javascript" src="scripts/jquery/jquery.i18n.properties-min-1.0.9.js"></script>
  14. <script type="text/javascript" src="scripts/jquery/jquery.autocomplete.js"></script>
  15. <script type="text/javascript" src="scripts/jquery/jquery.loadmask.js"></script>
  16. <script type="text/javascript" src="scripts/jquery/jquery.form.js"></script>
  17. <script type="text/javascript" src="scripts/jquery/jquery.timers.js"></script>
  18. <title>jQuery i18n</title>
  19. <script type="text/javascript">
  20. $().ready(
  21. function() {
  22. $("#sub").click(
  23. function() {
  24. var name = $("#username").val();
  25. var age = 18;
  26. var user = {"username":name,"age":age};
  27. $.ajax({
  28. url : 'hello.json',
  29. type : 'POST',
  30. data : JSON.stringify(user), // Request body 
  31. contentType : 'application/json; charset=utf-8',
  32. dataType : 'json',
  33. success : function(response) {
  34. //请求成功
  35. alert("你好" + response.username + "[" + response.age + "]，当前时间是：" + response.time + "，欢迎访问：http://www.zifangsky.cn");
  36. },
  37. error : function(msg) {
  38. alert(msg);
  39. }
  40. });
  41. });
  42. });
  43. </script>
  44. </head>
  45. <body>
  46. <input type="text" id="username"
  47. style="width: 100px; height: 30px; font-size: 20px; font-weight: bold;">
  48. <input type="button" id="sub" value="Go"
  49. style="height: 40px; height: 30px;">
  50. <br>
  51. </body>
  52. </html>

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

  1. package cn.zifangsky.controller;
  2. public class User {
  3. private String username;
  4. private int age;
  5. public String getUsername() {
  6. return username;
  7. }
  8. public void setUsername(String username) {
  9. this.username = username;
  10. }
  11. public int getAge() {
  12. return age;
  13. }
  14. public void setAge(int age) {
  15. this.age = age;
  16. }
  17. }

（3）controller类TestController.java：

  1. package cn.zifangsky.controller;
  2. import java.text.Format;
  3. import java.text.SimpleDateFormat;
  4. import java.util.Date;
  5. import java.util.HashMap;
  6. import java.util.Map;
  7. import org.springframework.context.annotation.Scope;
  8. import org.springframework.stereotype.Controller;
  9. import org.springframework.web.bind.annotation.RequestBody;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.RequestMethod;
  12. import org.springframework.web.bind.annotation.ResponseBody;
  13. import org.springframework.web.servlet.ModelAndView;
  14. @Controller
  15. @Scope("prototype")
  16. public class TestController {
  17. /**
  18. * 转到页面
  19. */
  20. @RequestMapping(value = "/hello.html")
  21. public ModelAndView list() {
  22. ModelAndView view = new ModelAndView("index");
  23. return view;
  24. }
  25. /**
  26. * ajax异步请求， 请求格式是json
  27. */
  28. @RequestMapping(value = "/hello.json", method = { RequestMethod.POST })
  29. @ResponseBody
  30. public Map<String, String> hello(@RequestBody User user) {
  31. // 返回数据的Map集合
  32. Map<String, String> result = new HashMap<String, String>();
  33. Format format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
  34. // 返回请求的username
  35. result.put("username", user.getUsername());
  36. // 返回年龄
  37. result.put("age", String.valueOf(user.getAge()));
  38. // 返回当前时间
  39. result.put("time", format.format(new Date()));
  40. return result;
  41. }
  42. }

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

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格式数据的相关内容，希望对大家有所帮助！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！