您的位置：首页 > 编程语言 > Java开发

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

2015-05-26 16:15 1291 查看

作者：ssslinppp 时间：2015年5月26日 15:32:511. 摘要本文讲解如何利用spring MVC框架，实现ajax异步请求以及json数据的返回。Spring MVC与json参考文章：【spring学习笔记-mvc-3】返回json数据-方式1 和【spring学习笔记-mvc-4】返回json数据-方式2。使用到的技术主要如下：Ajax：使用JQuery 提供的ajax；==>需要引入jquery.min.js文件；
Spring MVC；
Json：提供两种方式返回json数据；

2. 项目结构

3. 前端前台主界面：文件位置：

浏览器界面：

<%@ page language="java" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

response.setHeader("Pragma", "no-cache");

response.setHeader("Cache-Control", "no-cache");

response.setDateHeader("Expires", 0);

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>SpringMVC+ajax+json</title>

<script type="text/javascript">var basePath = "<%=basePath%>";</script>

<%-- <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/demo.css"> --%>

<script type="text/javascript" src="<%=basePath%>js/JQuery/jquery.min.js"></script>

<script type="text/javascript" src="<%=basePath%>js/test/ajaxAndJson.js"></script>

</head>

<body>

<div style="padding:5px 0;">

<p>方式1</p>

<a href="#" class="easyui-linkbutton" onclick="loadData1()" data-options="iconCls:'icon-add'">ajax异步获取json数据</a>

</div>

<div style="margin:10px 0 20px 0;"></div>

<div style="padding:5px 0;">

<p>方式2</p>

<a href="#" class="easyui-linkbutton" onclick="loadData2()" data-options="iconCls:'icon-add'">ajax异步获取json数据</a>

</div>

</body>

</html>

[/code]ajaxAndJson.js文件==>具体的ajax请求

function loadData1() {

var actionUrl = basePath + "test/testMVC1.action";

var params = {

"username" : 'zhangSan',

'passwd' : '12345678'

};

$.ajax({

url : actionUrl,

data : params,

dataType : "json",

cache : false,

error : function(textStatus, errorThrown) {

//$.messager.alert('错误', "系统请求错误: " + textStatus, 'error');

alert("系统请求错误: " + textStatus);

},

success : function(data, textStatus) {

//$.messager.alert('系统提示', data.username+data.passwd ,'info');

alert(data.username+data.passwd );

});

function loadData2() {

var actionUrl = basePath + "test/testMVC2.action";

var params = {

"username" : 'lisi',

'passwd' : '888888'

};

$.ajax({

url : actionUrl,

data : params,

dataType : "json",

cache : false,

error : function(textStatus, errorThrown) {

//$.messager.alert('错误', "系统请求错误: " + textStatus, 'error');

alert("系统请求错误: " + textStatus);

},

success : function(data, textStatus) {

//$.messager.alert('系统提示', data.Info+",  "+data.userList[1].username ,'info');

alert(data.Info+",  "+data.userList[1].username);

});

[/code]
4. spring mvc配置文件web.xml

<web-app id="WebApp_ID" version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">[/code] 

<context-param>

<param-name>contextConfigLocation</param-name>

<param-value>classpath:applicationContext.xml</param-value>

</context-param>


<listener>

<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

</listener>


<servlet>

<servlet-name>mvc-dispatcher</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>mvc-dispatcher</servlet-name>

<url-pattern>/rest/*</url-pattern>

</servlet-mapping>

</web-app>

[/code]spring-servlet.xml






<?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:p="http://www.springframework.org/schema/p"

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-3.0.xsd[/code] http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context-3.0.xsd[/code] http://www.springframework.org/schema/mvc[/code] http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">[/code] 

<!-- 扫描web包，应用Spring的注解 -->

<context:component-scan base-package="com.ll.web"/>


<!-- 配置视图解析器，将ModelAndView及字符串解析为具体的页面，默认优先级最低 -->

<bean

class="org.springframework.web.servlet.view.InternalResourceViewResolver"

p:viewClass="org.springframework.web.servlet.view.JstlView" 

p:prefix="/jsp/"

p:suffix=".jsp" />


<!-- bean视图解析器 -->

<bean class="org.springframework.web.servlet.view.BeanNameViewResolver"

p:order="10" />


<!-- XMl及JSON视图解析器配置 -->

<bean id="testMVC"

class="org.springframework.web.servlet.view.json.MappingJacksonJsonView">

   <property name="renderedAttributes">

<set>

<value>userList</value>

<value>Info</value>

</set>

   </property>

</bean>


<mvc:annotation-driven/>


</beans>

[/code]applicationContext.xml



<?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:p="http://www.springframework.org/schema/p"

xmlns:context="http://www.springframework.org/schema/context"

xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"

xsi:schemaLocation="http://www.springframework.org/schema/beans 

http://www.springframework.org/schema/beans/spring-beans-3.0.xsd[/code] http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context-3.0.xsd[/code] http://www.springframework.org/schema/tx 

http://www.springframework.org/schema/tx/spring-tx-3.0.xsd[/code] http://www.springframework.org/schema/aop[/code] http://www.springframework.org/schema/aop/spring-aop-3.0.xsd">[/code] 

<!-- 扫描类包，将标注Spring注解的类自动转化Bean，同时完成Bean的注入 -->

<context:component-scan base-package="com.ll.service"/>

<context:component-scan base-package="com.ll.dao"/>


</beans>

[/code]

5. 控制器AjaxController.java




package com.ll.web;


import java.util.ArrayList;

import java.util.List;


import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;


import com.ll.model.Person;


@Controller

@RequestMapping(value = "/test")

public class AjaxController {


/**

 * 返回主页

 * @return

 */

@RequestMapping(value = "/index.action")

public String index() {

return "index";

}


/**

 * 方式1：

 * 使用@ResponseBody方式返回json数据

 * @param username

 * @param passwd

 * @return

 */

@ResponseBody

@RequestMapping(value = "/testMVC1.action")

public Person testAjax(String username,String passwd) {

System.out.println("ajax-使用@ResponseBody方式返回json数据==>" + username + "(" + passwd + ")");


return new Person(username,passwd);

}


/**

 * 方式2：

 * 使用MappingJacksonJsonView和bean视图解析器返回json数据

 * @param mm

 * @param username

 * @param passwd

 * @return

 */

@RequestMapping(value = "/testMVC2.action")

public String getFusionChartsData(ModelMap mm,String username,String passwd) {

System.out.println("ajax-使用MappingJacksonJsonView和bean视图解析器返回json数据==>" + username + "(" + passwd + ")");


Person p1 = new Person(username+"_1",passwd+"_*1");

Person p2 = new Person(username+"_2",passwd+"_*2");

List<Person> userList = new ArrayList<Person>();

userList.add(p1);

userList.add(p2);


mm.addAttribute("userList", userList);

mm.addAttribute("Info","测试spring MVC");


return "testMVC";

}

}

[/code]
6. 运行浏览器：http://localhost:8080/SpringMVC_Ajax_Json/test/index.action# 








来自为知笔记(Wiz)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航