`
紫_色
  • 浏览: 144198 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Spring mvc系列六之 ajax运用(基于json格式)

springmvcjqueryajaxjson 
阅读更多

此篇文章的讲解是基于前几篇文章的内容,如果大家有看不懂的地方可以看前几篇的内容.

spring mvc返回json数据可方法常用的有

  • 直接PrintWriter 输出
  • 使用Spring内置的支持

下面我分别对上面的两种方法进行讲解:注意这篇文章的讲解使用的是spring3.2版本,此版本与spring 3.0的配置有少许不同,希望大家注意,同时我使用的是jquery做演示.

 

首先讲解直接PrintWriter 输出,这个是最简单的,但是不可以使用java的复杂对象.

没有什么需要配置的,直接请求我们的ajax请求页面json.jsp.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<title>添加用户</title>
<script type="text/javascript">
	$(function(){
		$("form :button").click(function(){
			var name = $("#name").val();
			var age = $("#age").val();
			$.ajax({
				   type: "POST",
				   url: "user/addUser",
				   data: {name:name , age:age},
				   success:function(data){
					   alert("名字:" + data.name + "年龄:" + data.age);
				   }
			});
		});
	});
</script>
</head>
<body>
	<form action="user/addUser" method="post">
		用户名:<input type="text" id="name" name="name" /><br/>
		年龄:<input type="text" id="age" name="age" />
		<input type="button" value="提交" />
	</form>
</body>
</html>

 

 

 

给提示按钮添加点击事件,当提交表单时获取用户名name,和年龄age,以post的方式提交表user/addUser,并把服务器返回的数据显示出来,这里要注意JSP页面头上最好加上

<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">

 使用绝对路径,一切从根目录开始找起,要不然会因为路径问题,而且很烦,js也要声明为spring mvc不要拦截,这里之前文章有说过

 

Controller:

package gd.hz.springmvc.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import gd.hz.springmvc.model.User;

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

@Controller("userController")
@RequestMapping("user")
public class UserController {

	// ajax请求一
	@RequestMapping("addUser")
	public void addUser(User user, HttpServletRequest request,
			HttpServletResponse response) {
		// 这里不能用单引号,无效,死的心都有
		System.out.println("过来了");
		String result = "{\"name\":\"" + user.getName() + "\"}";
		PrintWriter out = null;
		System.out.println(result);
		response.setContentType("application/json");
		try {
			out = response.getWriter();
			out.write(result);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

 这里我们用User这个实体接收ajax传过来的参数,当然也可以这样写:

public void addUser(String name , int age , HttpServletRequest request,HttpServletResponse response)

 注意名字要与from表单传过来的参数名称一样,当然也可以不一样,不一样时的用法可以看我之前的文章.

 

User类:

package gd.hz.springmvc.model;

public class User {
	private String name ;
	private int age ;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
}

 

 

String result = "{\"name\":\"" + user.getName() + "\"}";

 这句话,把传过来的数据拼成类json格式("key":"value"),这里要注意字符串里面的双引号不能用单引号表示,

 

response.setContentType("application/json");

 修改协议头,声明返回json格式.然后输出. 测试时可要注意年龄输入数字.

 

 使用Spring内置的支持返回json.这个方法比较灵活,虽然复杂了一点,不过建议使用:

首先这里需要引入commons-fileupload-*.jar commons-io-*.jar commons-logging-*.jar  jackson-annotations-*.jar  jackson-core-*.jar  jackson-databind-*.jar

看一下spring mvc的配置文件的配置

<?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      
           http://www.springframework.org/schema/context      
           http://www.springframework.org/schema/context/spring-context-3.0.xsd     
           http://www.springframework.org/schema/mvc      
           http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
	<!-- 开启注解扫描功能 -->
	<context:component-scan base-package="gd.hz.springmvc.controller"></context:component-scan>

	<!-- 将上面两个注解和并 -->
	<mvc:annotation-driven />

	<bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
		<property name="mediaTypes">
			<map>
				<entry key="atom" value="application/atom+xml" />
				<entry key="html" value="text/html" />
				<entry key="json" value="application/json" />
			</map>
		</property>
		<property name="viewResolvers">
			<list>
				<bean class="org.springframework.web.servlet.view.BeanNameViewResolver" />
				<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
					<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"></property>
					<property name="prefix" value="/" />
					<property name="suffix" value=".jsp" />
				</bean>
			</list>
		</property>
		<property name="defaultViews">
			<list>
				<bean class="org.springframework.web.servlet.view.json.MappingJackson2JsonView" />
			</list>
		</property>
	</bean>
	
	<!-- 声明DispatcherServlet不要拦截下面声明的目录 -->
	<mvc:resources location="/script/" mapping="/script/**" />
</beans>

这里我们声明的数据除text/html还有application/json和application/atom+xml.

 

先看一下我们的jsp页面json.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<title>添加用户</title>
<script type="text/javascript">
	$(function(){
		$("form :button").click(function(){
			$.ajax({
				   type: "POST",
				   url: "user/testJson",
				   success:function(data){
					   alert("名字:" + data.name + "年龄:" + data.age);
				   }
			});
		});
	});
</script>
</head>
<body>
	<form action="user/addUser" method="post">
		用户名:<input type="text" id="name" name="name" /><br/>
		年龄:<input type="text" id="age" name="age" />
		<input type="button" value="提交" />
	</form>
</body>
</html>

 

 向user/testJson发送请求.成功后显示返回数据.

 

看一下Controller

package gd.hz.springmvc.controller;

import java.util.HashMap;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller("userController")
@RequestMapping("user")
public class UserController {
	
	@RequestMapping("testJson")
	@ResponseBody
	public Map<String, Object> testJson() {
		System.out.println("testJson");
		Map<String, Object> modelMap = new HashMap<String, Object>();
		modelMap.put("name", "lfd");
		modelMap.put("age", "20");
		return modelMap;
	}
}

 @ResponseBody 将内容或对象作为 HTTP 响应正文返回，使用@ResponseBody将会跳过视图处理部分，将返回值写入输出流。

这里我放入的是简单的数据类型,也可以是复杂对象.集合.在页面可以用循环获取

 

再看一下使用ajax发送和接收数据:

还先看一下我们的jsp页面json2.jsp:

<%@ 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+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="script/jquery.json-2.4.js"></script>
<title>添加用户</title>
<script type="text/javascript">
	$(function(){
		$.fn.serializeObject = function(){
		    var o = {};
		    var a = this.serializeArray();
		    $.each(a, function(){
		        if (o[this.name]) {
		            if (!o[this.name].push) {
		                o[this.name] = [o[this.name]];
		            }
		            o[this.name].push(this.value || '');
		        }
		        else {
		            o[this.name] = this.value || '';
		        }
		    });
		    return o;
		};
		
		$("#form :button").click(function(){
	        var jsonuserinfo = $.toJSON($('#form').serializeObject());
	        alert(jsonuserinfo);
	        jQuery.ajax({
	            type: 'POST',
	            contentType: 'application/json',
	            url: 'user/testJson2',
	            data: jsonuserinfo,
	            dataType: 'json',
	            success: function(data){
	                alert("名字:" + data.name + "年龄:" + data.age);	            
		    },
	            error: function(){
	                alert("error");
	            }
	        });
	    });
	});
</script>
</head>
<body>
	<form action="user/addUser" method="post" id="form">
		用户名:<input type="text" id="name" name="name" /><br/>
		年龄:<input type="text" id="age" name="age" />
		<input type="button" value="提交" />
	</form>
</body>
</html>

 这里除了使用jquery-1.8.3.js外还使用了一个插件jquery.json-2.4.js,大家可以上网下载

它的简单用法:

var thing = { plugin: 'jquery-json', version: 2.4 };

var encoded = $.toJSON( thing );
// '{"plugin":"jquery-json","version":2.4}'
var name = $.evalJSON( encoded ).plugin;
// "jquery-json"
var version = $.evalJSON(encoded).version;

  

 

 下面这个方法是将表单中的数据组成json格式.

$.fn.serializeObject = function(){
		    var o = {};
		    var a = this.serializeArray();
		    $.each(a, function(){
		        if (o[this.name]) {
		            if (!o[this.name].push) {
		                o[this.name] = [o[this.name]];
		            }
		            o[this.name].push(this.value || '');
		        }
		        else {
		            o[this.name] = this.value || '';
		        }
		    });
		    return o;
		};

 

Controller这边

package gd.hz.springmvc.controller;

import gd.hz.springmvc.model.User;

import java.util.HashMap;
import java.util.Map;

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.ResponseBody;

@Controller("userController")
@RequestMapping("user")
public class UserController {

	@RequestMapping("testJson2")
	@ResponseBody
	public Map<String, Object> testJson2(@RequestBody User user) {
		System.out.println("testJson2");
		System.out.println(user.getName());
		System.out.println(user.getAge());
		Map<String, Object> modelMap = new HashMap<String, Object>();
		modelMap.put("name", user.getName());
		modelMap.put("age", user.getAge());
		return modelMap;
	}
}

 

@RequestBody 将 HTTP 请求正文插入方法中,将请求体写入某个对象。

还是要注意,输入年龄时要是数值.祝大家测试成功. 

分享到：
| Spring mvc系列五之 数据填充与返回
评论
2 楼 hw1287789687 2014-03-27   
Map root = new HashMap(); 
			String view = execute(root);
			ModelAndView modelAndView =new ModelAndView(new MappingJacksonJsonView(), root); 
			
//			System.out.println("isQueryStringJson:"+isQueryStringJson);
			return modelAndView;
1 楼 xcw19920930 2014-03-01  
楼主有源码吗？我这么报错了？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Spring3 MVC Ajax with JSON

    **Spring3 MVC与Ajax结合使用JSON** 在现代Web开发中，Spring框架的MVC模块与Ajax和JSON的集成是创建动态、响应式用户界面的关键技术。这个"Spring3 MVC Ajax with JSON"项目提供了一个Eclipse工程，包含了实现这一...

    spring mvc+ajax

    Spring MVC 是一个基于Java的轻量级Web应用框架，它为构建模型-视图-控制器（MVC）架构的应用程序提供了强大的支持。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分...

    spring mvc json&&jackson jquery js

    Spring MVC中的`@ResponseBody`注解可以将方法的返回值直接转换为JSON格式发送到客户端，而`@RequestBody`则可以将请求体中的JSON数据解析成Java对象。 **Jackson** Jackson是Java中广泛使用的JSON库，它可以高效地...

    springMVC+ajax+json

    Spring MVC、Ajax 和 JSON 是现代Web开发中的关键技术，它们共同构建了高效、动态的用户界面。下面将详细解释这三个技术及其在实际应用中的结合。 **Spring MVC** Spring MVC 是 Spring 框架的一部分，用于构建基于...

    Spring + Hibernate + Spring mvc +Ajax 整合

    Spring、Hibernate、Spring MVC 和 Ajax 是四个在Java Web开发中广泛应用的技术框架，它们共同构建了一个高效、灵活且功能丰富的后端系统。以下是对这些技术及其整合应用的详细说明： Spring框架是一个全面的企业级...

    Json-RPC & Spring MVC 集成

    集成JSON-RPC和Spring MVC，可以让JSON-RPC作为Spring MVC的一个服务端点，允许客户端通过JSON-RPC协议调用服务器上的方法。这样做有以下优势： 1. **简洁的接口定义**：JSON-RPC的调用方式简洁，只需要指定方法名...

    Spring MVC – Easy REST-Based JSON Services with @ResponseBody

    标题中的“Spring MVC – Easy REST-Based JSON Services with @ResponseBody”是指使用Spring MVC框架构建基于REST的JSON服务，并通过使用`@ResponseBody`注解来简化这一过程。REST（Representational State ...

    SpringMVC中后台转换json格式

    在Ajax请求中，这个Accept头可能指定了JSON格式。为了解决这个问题，我们需要确保SpringMVC能够正确地将返回的数据转换为JSON格式，并设置合适的响应头。 首先，我们需要引入Jackson库来处理JSON序列化和反序列化。...

    spring-mvc-jsonview源代码

    本篇文章将通过解析“spring-mvc-jsonview”源代码，深入探讨Spring MVC如何支持AJAX请求，并提供一个实际的使用教程。 一、JSON视图解析 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人...

    ajax向springmvc传递json

    在实际开发中，我们经常需要通过Ajax向Spring MVC控制器发送JSON数据，以实现异步通信和数据交互。下面将详细阐述这一过程中的关键知识点。 1. JSON 数据格式：JSON（JavaScript Object Notation）是一种轻量级的...

    spring第11章--ajax,上传下载,拦截器.rar_spring mvc_spring 下载_spring 使用ajax

    - **Spring MVC的Ajax响应**：返回的数据通常用@ResponseBody注解包裹，以便Spring MVC可以将其转换为JSON或其他格式，供前端JavaScript处理。 2. **文件上传**： - **MultipartFile接口**：Spring MVC提供...

    Spring MVC与Ajax交互源码

    例如，当用户在前端进行某些操作，如提交表单，我们可以使用Ajax发送POST请求到Spring MVC的Controller，Controller处理业务逻辑后，将结果以JSON或其他格式返回。JavaScript接收到响应后，可以在前端动态更新页面，...

    spring mvc json学习

    在Spring MVC中，JSON数据通常用于客户端与服务器之间的数据传输，比如AJAX请求。为了将Java对象转换为JSON，我们需要引入Jackson库，这是一个流行的JSON处理库。在项目中添加Jackson依赖后，Spring MVC会自动配置并...

    Spring MVC跟jQuery和Twitter Bootstrap的结合

    3. **数据绑定**：Spring MVC支持JSON或XML格式的数据交换，jQuery可以通过Ajax请求发送和接收这些格式的数据。使用`@RequestBody`和`@ResponseBody`注解，Spring MVC可以将JSON数据自动映射到Java对象。 4. **表单...

    mvc-ajax.rar_spring mvc

    在本示例中，“mvc-ajax.rar_spring mvc”是一个包含使用Ajax技术与Spring MVC集成实现账号添加功能的项目。让我们深入探讨这个主题。 首先，Spring MVC是Spring框架的一个组件，专门用于处理Web应用程序的请求和...

    四. Spring MVC 3 支持json及 常见错误解决

    在Spring MVC 3中，对JSON的支持是其重要的特性之一，它使得前后端数据交互更加便捷，尤其在如今的Web应用中，JSON已经成为数据传输的标准格式。本篇将深入探讨Spring MVC 3对JSON的支持以及解决常见错误的方法。 ...

    bootstrap、ajax、json、spring mvc、spring、hibernate 项目实战源码

    在IT领域，尤其是在Web开发中，`bootstrap`、`ajax`、`json`、`spring mvc`、`spring`和`hibernate`是六个非常重要的技术组件，它们共同构建了一个高效、交互性强的Web应用程序。下面我们将逐一探讨这些技术的核心...

    bootstrap、ajax、json、spring mvc、spring、hibernate项目实战源码

    JSON（JavaScript Object Notation）是轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在Ajax中，JSON常用于传输数据，因为它能被JavaScript直接解析，无需额外的处理。 接下来是Spring MVC，...

    精通spring mvc 4 看透springmvc pdf 高清完全版

    《精通Spring MVC 4：看透SpringMVC》是一本深度解析Spring MVC框架的专业书籍，旨在帮助读者...通过学习本书，读者将能够熟练地运用Spring MVC构建高性能、可维护的Web应用程序，并对Spring MVC的设计理念有深入理解。

    jQuery Spring MVC

    1. **Ajax通信**：Spring MVC 提供了`@ResponseBody`和`@RestController`注解，可以将后端处理的结果直接转换为JSON或XML格式返回给前端。jQuery 的`$.ajax()`或`$.get()`、`$.post()`方法可以发送Ajax请求，接收并...

Magicbox
Global site tag (gtag.js) - Google Analytics