• 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回


    作者:ssslinppp      时间:2015年5月26日 15:32:51

    1. 摘要

    本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回。
    使用到的技术主要如下:
    1. Ajax:使用JQuery 提供的ajax;==>需要引入jquery.min.js文件;
    2. Spring MVC;
    3. Json:提供两种方式返回json数据;

    2. 项目结构




    3. 前端

    前台主界面:
    文件位置:    浏览器界面:   

    1. <%@ page language="java" pageEncoding="UTF-8"%>
    2. <%
    3. String path = request.getContextPath();
    4. String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    5. response.setHeader("Pragma", "no-cache");
    6. response.setHeader("Cache-Control", "no-cache");
    7. response.setDateHeader("Expires", 0);
    8. %>
    9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    10. <html>
    11. <head>
    12. <title>SpringMVC+ajax+json</title>
    13. <script type="text/javascript">var basePath = "<%=basePath%>";</script>
    14. <%-- <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/demo.css"> --%>
    15. <script type="text/javascript" src="<%=basePath%>js/JQuery/jquery.min.js"></script>
    16. <script type="text/javascript" src="<%=basePath%>js/test/ajaxAndJson.js"></script>
    17. </head>
    18. <body>
    19. <div style="padding:5px 0;">
    20. <p>方式1</p>
    21. <a href="#" class="easyui-linkbutton" onclick="loadData1()" data-options="iconCls:'icon-add'">ajax异步获取json数据</a>
    22. </div>
    23. <div style="margin:10px 0 20px 0;"></div>
    24. <div style="padding:5px 0;">
    25. <p>方式2</p>
    26. <a href="#" class="easyui-linkbutton" onclick="loadData2()" data-options="iconCls:'icon-add'">ajax异步获取json数据</a>
    27. </div>
    28. </body>
    29. </html>

    ajaxAndJson.js文件==>具体的ajax请求


    1. function loadData1() {
    2. var actionUrl = basePath + "test/testMVC1.action";
    3. var params = {
    4. "username" : 'zhangSan',
    5. 'passwd' : '12345678'
    6. };
    7. $.ajax({
    8. url : actionUrl,
    9. data : params,
    10. dataType : "json",
    11. cache : false,
    12. error : function(textStatus, errorThrown) {
    13. // $.messager.alert('错误', "系统请求错误: " + textStatus, 'error');
    14. alert("系统请求错误: " + textStatus);
    15. },
    16. success : function(data, textStatus) {
    17. // $.messager.alert('系统提示', data.username+data.passwd ,'info');
    18. alert(data.username+data.passwd );
    19. }
    20. });
    21. }
    22. function loadData2() {
    23. var actionUrl = basePath + "test/testMVC2.action";
    24. var params = {
    25. "username" : 'lisi',
    26. 'passwd' : '888888'
    27. };
    28. $.ajax({
    29. url : actionUrl,
    30. data : params,
    31. dataType : "json",
    32. cache : false,
    33. error : function(textStatus, errorThrown) {
    34. // $.messager.alert('错误', "系统请求错误: " + textStatus, 'error');
    35. alert("系统请求错误: " + textStatus);
    36. },
    37. success : function(data, textStatus) {
    38. // $.messager.alert('系统提示', data.Info+", "+data.userList[1].username ,'info');
    39. alert(data.Info+", "+data.userList[1].username);
    40. }
    41. });
    42. }



    4. spring mvc配置文件

    web.xml


    1. <web-app id="WebApp_ID" version="2.4"
    2. xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3. xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
    4. http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    5. <context-param>
    6. <param-name>contextConfigLocation</param-name>
    7. <param-value>classpath:applicationContext.xml</param-value>
    8. </context-param>
    9. <listener>
    10. <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    11. </listener>
    12. <servlet>
    13. <servlet-name>mvc-dispatcher</servlet-name>
    14. <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    15. <load-on-startup>1</load-on-startup>
    16. </servlet>
    17. <servlet-mapping>
    18. <servlet-name>mvc-dispatcher</servlet-name>
    19. <url-pattern>/rest/*</url-pattern>
    20. </servlet-mapping>
    21. </web-app>

    spring-servlet.xml

    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:p="http://www.springframework.org/schema/p"
    4. xmlns:context="http://www.springframework.org/schema/context"
    5. xmlns:mvc="http://www.springframework.org/schema/mvc"
    6. xsi:schemaLocation="http://www.springframework.org/schema/beans
    7. http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    8. http://www.springframework.org/schema/context
    9. http://www.springframework.org/schema/context/spring-context-3.0.xsd
    10. http://www.springframework.org/schema/mvc
    11. http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
    12. <!-- 扫描web包,应用Spring的注解 -->
    13. <context:component-scan base-package="com.ll.web"/>
    14. <!-- 配置视图解析器,将ModelAndView及字符串解析为具体的页面,默认优先级最低 -->
    15. <bean
    16. class="org.springframework.web.servlet.view.InternalResourceViewResolver"
    17. p:viewClass="org.springframework.web.servlet.view.JstlView"
    18. p:prefix="/jsp/"
    19. p:suffix=".jsp" />
    20. <!-- bean视图解析器 -->
    21. <bean class="org.springframework.web.servlet.view.BeanNameViewResolver"
    22. p:order="10" />
    23. <!-- XMl及JSON视图解析器配置 -->
    24. <bean id="testMVC"
    25. class="org.springframework.web.servlet.view.json.MappingJacksonJsonView">
    26. <property name="renderedAttributes">
    27. <set>
    28. <value>userList</value>
    29. <value>Info</value>
    30. </set>
    31. </property>
    32. </bean>
    33. <mvc:annotation-driven/>
    34. </beans>

    applicationContext.xml

    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:p="http://www.springframework.org/schema/p"
    4. xmlns:context="http://www.springframework.org/schema/context"
    5. xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
    6. xsi:schemaLocation="http://www.springframework.org/schema/beans
    7. http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    8. http://www.springframework.org/schema/context
    9. http://www.springframework.org/schema/context/spring-context-3.0.xsd
    10. http://www.springframework.org/schema/tx
    11. http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
    12. http://www.springframework.org/schema/aop
    13. http://www.springframework.org/schema/aop/spring-aop-3.0.xsd">
    14. <!-- 扫描类包,将标注Spring注解的类自动转化Bean,同时完成Bean的注入 -->
    15. <context:component-scan base-package="com.ll.service"/>
    16. <context:component-scan base-package="com.ll.dao"/>
    17. </beans>



    5. 控制器

    AjaxController.java

    1. package com.ll.web;
    2. import java.util.ArrayList;
    3. import java.util.List;
    4. import org.springframework.stereotype.Controller;
    5. import org.springframework.ui.ModelMap;
    6. import org.springframework.web.bind.annotation.RequestMapping;
    7. import org.springframework.web.bind.annotation.ResponseBody;
    8. import com.ll.model.Person;
    9. @Controller
    10. @RequestMapping(value = "/test")
    11. public class AjaxController {
    12. /**
    13. * 返回主页
    14. * @return
    15. */
    16. @RequestMapping(value = "/index.action")
    17. public String index() {
    18. return "index";
    19. }
    20. /**
    21. * 方式1:
    22. * 使用@ResponseBody方式返回json数据
    23. * @param username
    24. * @param passwd
    25. * @return
    26. */
    27. @ResponseBody
    28. @RequestMapping(value = "/testMVC1.action")
    29. public Person testAjax(String username,String passwd) {
    30. System.out.println("ajax-使用@ResponseBody方式返回json数据==>" + username + "(" + passwd + ")");
    31. return new Person(username,passwd);
    32. }
    33. /**
    34. * 方式2:
    35. * 使用MappingJacksonJsonView和bean视图解析器返回json数据
    36. * @param mm
    37. * @param username
    38. * @param passwd
    39. * @return
    40. */
    41. @RequestMapping(value = "/testMVC2.action")
    42. public String getFusionChartsData(ModelMap mm,String username,String passwd) {
    43. System.out.println("ajax-使用MappingJacksonJsonView和bean视图解析器返回json数据==>" + username + "(" + passwd + ")");
    44. Person p1 = new Person(username+"_1",passwd+"_*1");
    45. Person p2 = new Person(username+"_2",passwd+"_*2");
    46. List<Person> userList = new ArrayList<Person>();
    47. userList.add(p1);
    48. userList.add(p2);
    49. mm.addAttribute("userList", userList);
    50. mm.addAttribute("Info","测试spring MVC");
    51. return "testMVC";
    52. }
    53. }














  • 相关阅读:
    就数据平台建设,80%的500强企业都有一个共性
    就数据平台建设,80%的500强企业都有一个共性
    8.2.1.8 IS NULL Optimization NULL 优化:
    8.2.1.7 Use of Index Extensions 使用索引扩展
    8.2.1.5 Engine Condition Pushdown Optimization 引擎条件下推优化
    8.2.1.5 Engine Condition Pushdown Optimization 引擎条件下推优化
    java解析XML几种方式小结
    rsyslog imfile 模块说明
    rsyslog 解决日志截断不读取问题
    解决rsyslog 断电或者被kill 重发问题
  • 原文地址:https://www.cnblogs.com/ssslinppp/p/4530854.html
Copyright © 2020-2023  润新知