Ajax表單提交及幕後處理簡單樣本

本文主要為大家帶來一篇基於Ajax表單提交及幕後處理簡單的應用。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能協助到大家。

首先先說下表單提交吧，要提交表單那麼就得先收集表單資料（至於驗證這個我就不說了，要說留下下次吧）,有了jquery取個html的值還是簡單$("xxid").val()等就完了，但如果一張表單收集的資料很多，像這樣的表單又有很多張，那用此方法肯定麻煩死，並且容易眼花錄錯。所以，我們就可以簡單的來定義一個收集規則，如在要回傳到伺服器的資料表單控制項，可以做個標記，到時取的時候把這些標記的資料一起取回去。

就拿最簡單的文體輸入做例子吧<input type="text" id="txtcode" name="txtcode" datafield="Code" style="width: 200px" />我們加一個"datafield"屬性，存入的值為對應伺服器相關類的屬性名稱。有了這標記前台取資料就好辦了。

我們可以定個通用方法如下面代碼

getFormData: function(formid) {        var data = {};    //擷取TEXT檔案內容    $("#" + 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對象裡面，至於其它表單控制項值怎麼取我就不多說了，原理差不多。

那麼接下回就是把資料發到伺服器上了，我這裡就直接用jquery帶的ajax。

var save = function(sender) {           $(sender).prop("disabled", true); //禁用按鈕，防止重複發送      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。做了一下防止客戶手速太快，服務處理太慢，重複點擊的處理。

這樣一個表單資料收集，回傳伺服器就完成了。這裡使用json2.js的JSON.stringify方法統一將對象轉成json字元，好處就是不用自己為拼json字串而考慮json的格式問題，簡單乾淨。

那麼客戶已經把資料收錄好了，伺服器也該要處理資料了。我們從前台來的資料的鍵(json的key)，不可能全部包括某個資料類的所有屬性。並且資料類也有很多個，應該是哪一個類只有伺服器才知道。所以這裡我們就需要寫一個協助的轉換類。這裡又有問題，有可能資料類有很多個，難道我要為每一個類寫一個方法，那不是個坑嗎？所以我們分析下用戶端傳到服務端上的資料格式，它是一組索引值對且不會重複，那麼就相當於一個Dictionary<string, string>,背景類有很多種，那麼至少我們能確定一個傳入參數了，傳出的就是相關類。相關類？到底是哪一類還只有到了具體後台收集方法裡才知道。那麼，整理一下思路，現在有一個Dictionary<string, string>要變成一個資料類，資料類到底是什麼有什麼樣的屬性？搞不清，但這個Dictionary<string, string>的key(鍵)可以看做是這個資料類屬性集的一個子集，而這個Dictionary<string, string>的value(值)是這個資料類屬性值toString()的子集。那樣這樣就好辦了。屬性集怎麼取？反射。這麼多類到底是哪個？不管它，泛型解決。

說下這麼多，貼下核心代碼

public static T1 UpdateObjectByDic<T1>(T1 scrobj, IDictionary<string, 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的對象進來，如果是更新把單就把原表單資料傳進來。這裡順帶說下ChangeType方法，其它就是資料類裡有些屬性是nullable的（int? DateTime?等）傳統的Convert.ChangeType會有異常所以就簡單改了下，ignoreCase就是屬性（前台那個datafield對應的值）尋找是否處理大小寫（一般是不管大小寫，要管大小寫相信會被前台口水流淹死）。

這樣後台資料處理核心就完了，調用部分代碼也貼下

[WebMethod(EnableSession = true)]    public static string Save(Dictionary<string, 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;    }

這裡就是後台具體處理方法調用的核心使用了,prohandle.Insert(pro)將類存入資料庫，pro.CreatorID，pro.CreatorName為項目的一些其它資訊，這些就不說了。到這裡一個表單前台資料收集，幕後處理，除了儲存那塊以外，就都算完了，呵呵。

文章最後說下，這裡只是個簡單應用，像我說的這前台收集，很多前台js架構都已經早做了，考慮方面也比我這個全面得多，幕後處理我這是基於我這種前台簡單收集弄的，很多第三方架構都有完整的體系了，但我這裡說的只是一種簡單的思路，當你一時沒有那麼多控制項時是否能把這一條路簡單走通實現。當然我強烈建議不要重複造輪子，但要一定要明白輪子的核心作用和原理。