普通的form提交、ajax提交和jQuery的ajax的form提交
阿新 • • 發佈：2019-01-06
這篇文章自己記錄學習使用，有部分缺失，可對於我們菜鳥來說夠用了，哈哈，本文采用的SSM框架，具體看下邊，看完再走哈。
一、普通的form提交
- jsp，簡單的使用者屬性
<form id="userform" action="${pageContext.request.contextPath}/user/addsysusersubmit.action" method="post">
<table>
<tr>
<td>使用者賬號</td>
<td><input type 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 : 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:" "
}).inputValidator({
min : 1,
max : 20,
onError : "請輸入使用者賬號(最長10個字元)"
});
//使用者名稱稱
$("#sysuser_username").formValidator({
onShow : "",
onCorrect:" "
}).inputValidator({
min : 1,
max : 120,
onError : "請輸入使用者名稱稱(最長60個字元)"
});
//使用者型別
$("#sysuser_groupid").formValidator({
onShow : "",
onCorrect:" "
}).inputValidator({
min : 1,
onError : "請選擇使用者型別"
});
//使用者密碼
$("#sysuser_password").formValidator({
onShow : "",
onCorrect:" "
}).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>到此，完事。我是一隻菜鳥，本篇文章如有不妥之處，請大家指正，大神指正，在此謝謝各位。