html+jquery透过传递json访问后台控制层
日期：2014-05-17 浏览次数：20604 次
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("密
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
