html+jquery透过传递json访问后台控制层 _HTML/CSS

html+jquery通过传递json访问后台控制层

1、由于spring3已经对ajax支持的很好了，前端就可以使用html+jquery,后台使用spring，两者之间用json交换数据就可以了。放弃原来使用的jsp+struts了。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
	$(document).ready(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;
		};

		$("#sub").click(function() {
			var userAccountForm = $("#userAccountForm");
			//将form数据组装成json对象的juery扩展
			var userAccount = userAccountForm.serializeObject();
			//将json对象转成String是用的json2（http://www.json.org/js.html）的JSON.stringify
			var jsonuserAccount = JSON.stringify(userAccount);
			$.ajax({
				type : 'POST',
				contentType : 'application/json',
				url : 'http://192.168.8.65/userAccountAjax/getUserAccount',
				data : jsonuserAccount,
				dataType : 'json',
				success : function(data) {
					alert(data);
					$("div#responsename").text(data.usacLoginName);
					$("div#responsepasswd").text(data.usacLoginPasswd);
				}
			});
		});
		
		$("#pwd").click(function() {
			$.ajax({
				type : 'GET',
				contentType : 'html',
				url : 'http://192.168.8.65/userAccountAjax/getUserPwd?usacLoginName='+$("#usacLoginName").val(),
				dataType : 'json',
				success : function(data) {
					$("div#responsepasswd").text(data);
				}
			});
		});
	});
</script>
</head>
<body>
<form action="" id="userAccountForm" name="userAccountForm">
用户名：<input type="text" id="usacLoginName" name="usacLoginName" value="xctong" /><br/>
密码：<input type="text" id="usacLoginPasswd" name="usacLoginPasswd" value=""/>
<input type="button" id="sub" name="sub" value="保存对象" />
<input type="button" id="pwd" name="pwd" value="查看密码" />
<div id="responsename"></div>
<div id="responsepasswd"></div>
</form>
</body>
</html>

package com.yt.manager.user.controller;

import javax.annotation.Resource;
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 com.yt.manager.user.model.UserAccount;
import com.yt.manager.user.repository.UserAccountRepository;

/**
 * 控制器
 * @author zxf
 * 
 */
@Controller
@RequestMapping("/userAccountAjax")
public class UserAccountAjaxController {

	@Resource
	UserAccountRepository userAccountRepository;

	/**
	 * 1、注意处理申请的函数的参数直接就是Customer对象（Customer是一个具有属性name和addr的vo），
	 * 而不是json字串，这里的关键是这样的。
	 * 2、spring具有将数据转化后再交给controller的功能，spring 3
	 * 新增了对json的处理能力，是基于Jackson JSON Processor（http://jackson.codehaus.org/）的。
	 * 3、这样一来，spring在接收contentType为application/json的request时会自动将json字串间转换成期望
	 * 的java对象，同样，发送response时，contentType被设为application/json，并且将java对象转为 json
	 * 字串。
	 * 4、上面已经说到，spring自动将response进行json化，所以处理函数直接返回vo对象就可以了。
	 * 而在页面端，由于我们指定了dataType为json，所以jquery直接把接收到的json字串转成了javascript
	 * 对象，我们可以直接使用data.name的写法取得数据了。
	 * @param userAccount
	 * @return
	 */
	@RequestMapping(value = "/getUserAccount", method = RequestMethod.POST)
	@ResponseBody
	public UserAccount getUserAccount(@RequestBody UserAccount userAccount) {
		System.out.println("用户名："+userAccount.getUsacLoginName());
		System.out.println("密码："+userAccount.getUsacLoginPasswd());
		return userAccount;
	}

	@RequestMapping(value = "/getUserPwd", method = RequestMethod.GET)
	@ResponseBody
	public String getUserPwd(String usacLoginName) {
		UserAccount ua = userAccountRepository.getUserAccountByLoginName(usacLoginName);
		return ua.getUsacLoginPasswd();
	}
}

<!--处理来自JSON格式的请求,spring在接收contentType为application/json的request时会自动将json字串间转换成期望
		的java对象，同样，发送response时，contentType被设为application/json，并且将java对象转为 json
		字串-->
	<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
		<property name="messageConverters">
			<util:list id="beanList">
				<ref bean="mappingJacksonHttpMessageConverter"/>
			</util:list>
		</property>
	</bean>
	<bean id="mappingJacksonHttpMessageConverter"
		class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" >
	</bean>

http://hi.baidu.com/danghj/blog/item/71d9fecd606ee95d0eb34572.html