首先先說下表單提交吧，要提交表單那么就得先收集表單數(shù)據(jù)（至于驗證這個我就不說了，要說留下下次吧）,有了jquery取個html的值還是簡單$("xxid").val()等就完了，但如果一張表單收集的數(shù)據(jù)很多，像這樣的表單又有很多張，那用此方法肯定麻煩死，并且容易眼花錄錯。所以，我們就可以簡單的來定義一個收集規(guī)則，如在要回傳到服務(wù)器的數(shù)據(jù)表單控件，可以做個標(biāo)記，到時取的時候把這些標(biāo)記的數(shù)據(jù)一起取回去。
就拿最簡單的文體輸入做例子吧input type="text" id="txtcode" name="txtcode" datafield="Code" style="width: 200px" />我們加一個"datafield"屬性，存入的值為對應(yīng)服務(wù)器相關(guān)類的屬性名。有了這標(biāo)記前臺取數(shù)據(jù)就好辦了。
我們可以定個通用方法如下面代碼
getFormData: function(formid) {
var data = {};
//獲取TEXT文件內(nèi)容
$("#" + formid + " input[type=text]").each(function(i, o) {
var jo = $(o);
if (jo.attr("datafield")) {
var str = jo.val();
str = str.replace(" ", "");
if (str !== "") {
data[jo.attr("datafield")] = jo.val();
}
}
});
return data;
}
這里就是一個簡單的獲取表單里面所有text文本，并放入到一個data對象里面，至于其它表單控件值怎么取我就不多說了，原理差不多。
那么接下回就是把數(shù)據(jù)發(fā)到服務(wù)器上了，我這里就直接用jquery帶的ajax。
var save = function(sender) {
$(sender).prop("disabled", true); //禁用按鈕，防止重復(fù)發(fā)送
var data = getFormData("form1");
var jsonobj = { jsondata: data };
var textdata = JSON.stringify(jsonobj);
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "xxxxx.aspx/Save",
dataType: "json",
data: textdata,
success: function(msg) {
if (msg.d == "1") {
document.form1.reset();
alert("保存成功！");
}
else if (msg.d == "0") {
alert("保存失??！");
}
},
complete: function(jqXHR, textStatus) {
$(sender).prop("disabled", false); //還原按鈕
}
});
}
這里的"xxxxx.aspx/Save"就是ajax處理頁面，其它就是一個webmethod。做了一下防止客戶手速太快，服務(wù)處理太慢，重復(fù)點擊的處理。
這樣一個表單數(shù)據(jù)收集，回傳服務(wù)器就完成了。這里使用json2.js的JSON.stringify方法統(tǒng)一將對象轉(zhuǎn)成json字符，好處就是不用自己為拼json字符串而考慮json的格式問題，簡單干凈。
那么客戶已經(jīng)把數(shù)據(jù)收錄好了，服務(wù)器也該要處理數(shù)據(jù)了。我們從前臺來的數(shù)據(jù)的鍵(json的key)，不可能全部包括某個數(shù)據(jù)類的所有屬性。并且數(shù)據(jù)類也有很多個，應(yīng)該是哪一個類只有服務(wù)器才知道。所以這里我們就需要寫一個幫助的轉(zhuǎn)換類。這里又有問題，有可能數(shù)據(jù)類有很多個，難道我要為每一個類寫一個方法，那不是個坑么？所以我們分析下客戶端傳到服務(wù)端上的數(shù)據(jù)格式，它是一組鍵值對且不會重復(fù)，那么就相當(dāng)于一個Dictionarystring, string>,后臺的類有很多種，那么至少我們能確定一個傳入?yún)?shù)了，傳出的就是相關(guān)類。相關(guān)類？到底是哪一類還只有到了具體后臺收集方法里才知道。那么，整理一下思路，現(xiàn)在有一個Dictionarystring, string>要變成一個數(shù)據(jù)類，數(shù)據(jù)類到底是什么有什么樣的屬性？搞不清，但這個Dictionarystring, string>的key(鍵)可以看做是這個數(shù)據(jù)類屬性集的一個子集，而這個Dictionarystring, string>的value(值)是這個數(shù)據(jù)類屬性值toString()的子集。那樣這樣就好辦了。屬性集怎么?。糠瓷?。這么多類到底是哪個？不管它，泛型解決。
說下這么多，貼下核心代碼
public static T1 UpdateObjectByDicT1>(T1 scrobj, IDictionarystring, string> sourceobject, bool ignoreCase)
where T1 : new()
{
T1 result = scrobj;
PropertyInfo[] pifresults = typeof(T1).GetProperties();
foreach (var dic in sourceobject)
{
foreach (PropertyInfo pifresult in pifresults)
{
if (string.Compare(dic.Key, pifresult.Name, ignoreCase) == 0)
{
pifresult.SetValue(result, ChangeType(dic.Value, pifresult.PropertyType), null);
break;
}
}
}
return result;
}
public static Object ChangeType(object value, Type targetType)
{
Type convertType = targetType;
if (targetType.IsGenericType targetType.GetGenericTypeDefinition().Equals(typeof(Nullable>)))
{
NullableConverter nullableConverter = new NullableConverter(targetType);
convertType = nullableConverter.UnderlyingType;
}
return Convert.ChangeType(value, convertType);
}
我這里T1 scrobj是把更新做在一起，如添加表單就傳個new的對象進(jìn)來，如果是更新把單就把原表單數(shù)據(jù)傳進(jìn)來。這里順帶說下ChangeType方法，其它就是數(shù)據(jù)類里有些屬性是nullable的（int? DateTime?等）傳統(tǒng)的Convert.ChangeType會有異常所以就簡單改了下，ignoreCase就是屬性（前臺那個datafield對應(yīng)的值）查找是否處理大小寫（一般是不管大小寫的，要管大小寫相信會被前臺口水流淹死）。
這樣后臺數(shù)據(jù)處理核心就完了，調(diào)用部分代碼也貼下
[WebMethod(EnableSession = true)]
public static string Save(Dictionarystring, string> jsondata)
{
string result = "0";
Model.Project pro = ConvertHandle.UpdateObjectByDic Model.Project>(jsondata,new Model.Project,true);
pro.CreatorID = BLL.Sys_User.GetCurUser().ID.ToString();
pro.CreatorName = BLL.Sys_User.GetCurUser().Name;
prohandle.Insert(pro);
result = "1";
return result;
}
這里就是后臺具體處理方法調(diào)用的核心使用了,prohandle.Insert(pro)將類存入數(shù)據(jù)庫，pro.CreatorID，pro.CreatorName為項目的一些其它信息，這些就不說了。到這里一個表單前臺數(shù)據(jù)收集，后臺處理，除了保存那塊以外，就都算完了，呵呵。
文章最后說下，這里只是個簡單應(yīng)用，像我說的這前臺收集，很多前臺js框架都已經(jīng)早做了，考慮方面也比我這個全面得多，后臺處理我這是基于我這種前臺簡單收集弄的，很多第三方框架都有完整的體系了，但我這里說的只是一種簡單的思路，當(dāng)你一時沒有那么多控件時是否能把這一條路簡單走通實現(xiàn)。當(dāng)然我強(qiáng)烈建議不要重復(fù)造輪子，但要一定要明白輪子的核心作用和原理。
以上這篇基于Ajax表單提交及后臺處理簡單的應(yīng)用就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- 提交表單最簡單的AJAX程序分享
- jQuery使用$.ajax提交表單完整實例
- Jquery.Form 異步提交表單的簡單實例
- jquery實現(xiàn)ajax提交表單信息的簡單方法(推薦)
