这篇文章自己记录学习使用，有部分缺失，可对于我们菜鸟来说够用了，哈哈，本文采用的SSM框架，具体看下边，看完再走哈。
一、普通的form提交
- jsp，简单的用户属性
<form id="userform" action="${pageContext.request.contextPath}/user/addsysusersubmit.action" method="post">
<table>
<tr>
<td>用户账号</td>
<td><input type="text" id="sysuser_userid" name="sysuserCustom.userid" /></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" id="sysuser_username" name="sysuserCustom.username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="sysuser_password" name="sysuserCustom.pwd" /></td>
</tr>
<tr>
<td>用户类型</td>
<td><input type="text" id="sysuser_groupid" name="sysuserCustom.groupid" /></td>
</tr>
<tr>
<td><input type="submit" />
</td>
</tr>
</table>
</form>
2.js
这里不需要js控制，直接用form的action提交即可
3.controller
@RequestMapping("/addsysusersubmit")
public String addsysusersubmit(SysuserCustom sysuserCustom)throws Exception{
//简单打印一个属性
System.out.println(sysuserCustom.getUserid());
return null;
}
这种方法最简单，但个人觉得比较死板，可能我太笨了。这里前端通过form的action将表单数据封装成一个SysuserCustom对象传给后台处理，大伙可深入spring源码了解如何封装的，其实我都没深入过，郁闷。
二、普通的ajax提交
对于此方式，个人不太喜欢，觉得繁琐。
1. jsp
用了一个很简单的form表单，没有贴测试版本，这里排版出问题。
<form id="userform">
<table>
<tr>
<td>用户账号</td>
<td><input type="text" id="sysuser_userid" name="sysuserCustom.userid" /></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" id="sysuser_username" name="sysuserCustom.username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="sysuser_password" name="sysuserCustom.pwd" /></td>
</tr>
<tr>
<td>用户类型</td>
<td><input type="text" id="sysuser_groupid" name="sysuserCustom.groupid" /></td>
</tr>
<tr>
<td><a id="submitbtn" href="#" onclick="sysusersave()">提交</a>
</td>
</tr>
</table>
</form>
- js
function sysusersave(){
var userid = $("#sysuser_userid").val() ;
var username = $("#sysuser_username").val() ;
var password = $("#sysuser_password").val() ;
var groupid = $("#sysuser_groupid").val() ;
if(username =="" || userid == "" || groupid =="" || password == ""){
$("#sysuser_msg").html("请将数据填写完整");
return ;
}else{
$("#sysuser_msg").html("");
}
var json = {
"username": username,
"userid":userid,
"groupid":groupid,
"password":password,
};
$.ajax({
type:"POST", //post提交方式，默认是get
url:"addsysusersubmit.action",
data:json,
error:function(request) { // 设置表单提交出错
$("#sysuser_msg").html(request); //登录错误提示信息
},
success:function(data) {
if(data=="false"){
$("#sysuser_msg").html("系统错误");
return ;
}else{
$.messager.show( {
msg : '新增成功',
title : '提示'
});
}
}
});
这种方式必须把表单的每一条数据进行获取，并提交给action进行处理。略微繁琐。这里js没有直接放在jsp中，所以ajax中的url直接是
url:"addsysusersubmit.action",
而且在使用js之前记得调用jquery。
3. controller
@RequestMapping("/addsysusersubmit")
public String addsysusersubmit(SysuserCustom sysuserCustom)throws Exception{
//简单的打印一个属性
System.out.println(sysuserCustom.getUserid());
return null;
}
三、jQuery的ajax的form提交
下边来使用jquery，个人觉得很方便，具体看下边。
1. jsp
<form id="sysusereditform" name="sysusereditform" action="${pageContext.request.contextPath}/user/sysusersave.action" method="post">
<table>
<tr>
<td>用户账号</td>
<td><input type="text" id="sysuser_userid" name="sysuserCustom.userid" /></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" id="sysuser_username" name="sysuserCustom.username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="sysuser_password" name="sysuserCustom.pwd" /></td>
</tr>
<tr>
<td>用户类型</td>
<td><input type="text" id="sysuser_groupid" name="sysuserCustom.groupid" /></td>
</tr>
<tr>
<td><a id="submitbtn" href="#" onclick="sysusersave()">提交</a>
</td>
</tr>
</table>
</form>
- js
//提交表单
function sysusersave(){
if($.formValidator.pageIsValid()){//校验表单输入信息是否合法
//使用jquery的ajax from提交，指定from的id和回调方法，提交的url使用提from中的action，参数为空，传递JSON字符串（去掉也不报错）
jquerySubByFId('sysusereditform',sysusersave_callback,null,"json");
}
}
//from提交的回调方法,data是提交的返回的数据
function sysusersave_callback(data){
message_alert(data);
}
注意：上面的回调函数，是action处理后，返回JSON的数据传给了参数data。
上面函数具体的实现（没有封装的代码）：要传递四个参数
/*
*form提交(post方式)
*
*formId form Id
*callbackfn 回调函数名(要求函数必须有参数且不能多与两个,一个参数时参数为响应文本,两个参数时第一个参数为响应文本)
*param 回调函数参数(如果为null,那么调用一个参数的回调函数,否则调用两个参数的回调函数)
*/
function jquerySubByFId(formId,callbackFn,param,dataType){
var formObj = jQuery("#" + formId);
var options = {
dataType: ("undefined"!=dataType && null!=dataType)?dataType:"json",
success: function(responseText) {
if(param === null){
callbackFn(responseText);
}else{
callbackFn(responseText,param);
}
}
};
formObj.ajaxSubmit(options);
}
最方便的在下面，校验表单输入信息是否合法：使用的是jQuery easyui的内置校验器，如下 ，列举出来的对用户账号进行的校验：
$(function (){
/******表单校验*************/
$.formValidator.initConfig({
formID : "sysusereditform",
theme : "Default",
onError : function(msg, obj, errorlist) {
//alert(msg);
}
});
//用户账号
$("#sysuser_userid").formValidator({
onShow : "",
onCorrect:" "
}).inputValidator({
min : ,
max : ,
onError : "请输入用户账号(最长10个字符)"
});
});
这里贴一个自己的js脚本
$(function (){
//***********按钮**************
$('#submitbtn').linkbutton({
iconCls: 'icon-ok'
});
$('#closebtn').linkbutton({
iconCls: 'icon-cancel'
});
//**********表单校验*************
$.formValidator.initConfig({
formID : "sysusereditform",
theme : "Default",
onError : function(msg, obj, errorlist) {
//alert(msg);
}
});
//用户账号
$("#sysuser_userid").formValidator({
onShow : "",
onCorrect:" "
}).inputValidator({
min : ,
max : ,
onError : "请输入用户账号(最长10个字符)"
});
//用户名称
$("#sysuser_username").formValidator({
onShow : "",
onCorrect:" "
}).inputValidator({
min : ,
max : ,
onError : "请输入用户名称(最长60个字符)"
});
//用户类型
$("#sysuser_groupid").formValidator({
onShow : "",
onCorrect:" "
}).inputValidator({
min : ,
onError : "请选择用户类型"
});
//用户密码
$("#sysuser_password").formValidator({
onShow : "",
onCorrect:" "
}).inputValidator({
min : ,
max : ,
onError : "请填写用户密码(最长10个字符)"
});
});
function sysusersave(){
if($.formValidator.pageIsValid()){
jquerySubByFId('sysusereditform',sysusersave_callback,null,"json");
}
}
function sysusersave_callback(data){
var result = getCallbackData(data);
var type = result.type;
_alert(result);
/* if (TYPE_RESULT_SUCCESS == type) {
parent.sysuserquery();
parent.closemodalwindow();
} */
}
</script>
再详细的jquery，大家可以参考http://blog.csdn.net/tangliuqing/article/details/34399627，我也参考了的。
3. controller
与前面相同，这里不列出了。
到此，完事。我是一只菜鸟，本篇文章如有不妥之处，请大家指正，大神指正，在此谢谢各位。
![Spring MVC+Ajax创建实例[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)