普通的form提交、ajax提交和jQuery的ajax的form提交

63 阅读 0 评论 42 点赞

我是靠谱客的博主无限老师，最近开发中收集的这篇文章主要介绍普通的form提交、ajax提交和jQuery的ajax的form提交，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这篇文章自己记录学习使用，有部分缺失，可对于我们菜鸟来说够用了，哈哈，本文采用的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>

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>

//提交表单
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 : 1,
max : 20,
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:"&nbsp;"
}).inputValidator({
min : 1,
max : 20,
onError : "请输入用户账号(最长10个字符)"
});
//用户名称
$("#sysuser_username").formValidator({
onShow : "",
onCorrect:"&nbsp;"
}).inputValidator({
min : 1,
max : 120,
onError : "请输入用户名称(最长60个字符)"
});
//用户类型
$("#sysuser_groupid").formValidator({
onShow : "",
onCorrect:"&nbsp;"
}).inputValidator({
min : 1,
onError : "请选择用户类型"
});
//用户密码
$("#sysuser_password").formValidator({
onShow : "",
onCorrect:"&nbsp;"
}).inputValidator({
min : 1,
max : 10,
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>