這篇文章主要為大家展示了“如何使用Ajax實(shí)現(xiàn)表單提交及后臺(tái)處理”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用Ajax實(shí)現(xiàn)表單提交及后臺(tái)處理”這篇文章吧。

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。成都創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

首先先說下表單提交吧，要提交表單那么就得先收集表單數(shù)據(jù)（至于驗(yàn)證這個(gè)我就不說了，要說留下下次吧）,有了jquery取個(gè)html的值還是簡單$("xxid").val()等就完了，但如果一張表單收集的數(shù)據(jù)很多，像這樣的表單又有很多張，那用此方法肯定麻煩死，并且容易眼花錄錯(cuò)。所以，我們就可以簡單的來定義一個(gè)收集規(guī)則，如在要回傳到服務(wù)器的數(shù)據(jù)表單控件，可以做個(gè)標(biāo)記，到時(shí)取的時(shí)候把這些標(biāo)記的數(shù)據(jù)一起取回去。

 就拿最簡單的文體輸入做例子吧<input type="text" id="txtcode" name="txtcode" datafield="Code"  />我們加一個(gè)"datafield"屬性，存入的值為對(duì)應(yīng)服務(wù)器相關(guān)類的屬性名。有了這標(biāo)記前臺(tái)取數(shù)據(jù)就好辦了。

我們可以定個(gè)通用方法如下面代碼

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;
}

這里就是一個(gè)簡單的獲取表單里面所有text文本，并放入到一個(gè)data對(duì)象里面，至于其它表單控件值怎么取我就不多說了，原理差不多。

那么接下回就是把數(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("保存失?。?quot;);
          }
        },
        complete: function(jqXHR, textStatus) {
          $(sender).prop("disabled", false); //還原按鈕
        }
      });
    }

這里的"xxxxx.aspx/Save"就是ajax處理頁面，其它就是一個(gè)webmethod。做了一下防止客戶手速太快，服務(wù)處理太慢，重復(fù)點(diǎn)擊的處理。

這樣一個(gè)表單數(shù)據(jù)收集，回傳服務(wù)器就完成了。這里使用json2.js的JSON.stringify方法統(tǒng)一將對(duì)象轉(zhuǎn)成json字符，好處就是不用自己為拼json字符串而考慮json的格式問題，簡單干凈。

那么客戶已經(jīng)把數(shù)據(jù)收錄好了，服務(wù)器也該要處理數(shù)據(jù)了。我們從前臺(tái)來的數(shù)據(jù)的鍵(json的key)，不可能全部包括某個(gè)數(shù)據(jù)類的所有屬性。并且數(shù)據(jù)類也有很多個(gè)，應(yīng)該是哪一個(gè)類只有服務(wù)器才知道。所以這里我們就需要寫一個(gè)幫助的轉(zhuǎn)換類。這里又有問題，有可能數(shù)據(jù)類有很多個(gè)，難道我要為每一個(gè)類寫一個(gè)方法，那不是個(gè)坑么？所以我們分析下客戶端傳到服務(wù)端上的數(shù)據(jù)格式，它是一組鍵值對(duì)且不會(huì)重復(fù)，那么就相當(dāng)于一個(gè)Dictionary<string, string>,后臺(tái)的類有很多種，那么至少我們能確定一個(gè)傳入?yún)?shù)了，傳出的就是相關(guān)類。相關(guān)類？到底是哪一類還只有到了具體后臺(tái)收集方法里才知道。那么，整理一下思路，現(xiàn)在有一個(gè)Dictionary<string, string>要變成一個(gè)數(shù)據(jù)類，數(shù)據(jù)類到底是什么有什么樣的屬性？搞不清，但這個(gè)Dictionary<string, string>的key(鍵)可以看做是這個(gè)數(shù)據(jù)類屬性集的一個(gè)子集，而這個(gè)Dictionary<string, string>的value(值)是這個(gè)數(shù)據(jù)類屬性值toString()的子集。那樣這樣就好辦了。屬性集怎么?。糠瓷?。這么多類到底是哪個(gè)？不管它，泛型解決。

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

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是把更新做在一起，如添加表單就傳個(gè)new的對(duì)象進(jìn)來，如果是更新把單就把原表單數(shù)據(jù)傳進(jìn)來。這里順帶說下ChangeType方法，其它就是數(shù)據(jù)類里有些屬性是nullable的（int? DateTime?等）傳統(tǒng)的Convert.ChangeType會(huì)有異常所以就簡單改了下，ignoreCase就是屬性（前臺(tái)那個(gè)datafield對(duì)應(yīng)的值）查找是否處理大小寫（一般是不管大小寫的，要管大小寫相信會(huì)被前臺(tái)口水流淹死）。

這樣后臺(tái)數(shù)據(jù)處理核心就完了，調(diào)用部分代碼也貼下

[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;
    }

這里就是后臺(tái)具體處理方法調(diào)用的核心使用了,prohandle.Insert(pro)將類存入數(shù)據(jù)庫，pro.CreatorID，pro.CreatorName為項(xiàng)目的一些其它信息，這些就不說了。到這里一個(gè)表單前臺(tái)數(shù)據(jù)收集，后臺(tái)處理，除了保存那塊以外，就都算完了，呵呵。

文章最后說下，這里只是個(gè)簡單應(yīng)用，像我說的這前臺(tái)收集，很多前臺(tái)js框架都已經(jīng)早做了，考慮方面也比我這個(gè)全面得多，后臺(tái)處理我這是基于我這種前臺(tái)簡單收集弄的，很多第三方框架都有完整的體系了，但我這里說的只是一種簡單的思路，當(dāng)你一時(shí)沒有那么多控件時(shí)是否能把這一條路簡單走通實(shí)現(xiàn)。當(dāng)然我強(qiáng)烈建議不要重復(fù)造輪子，但要一定要明白輪子的核心作用和原理。

以上是“如何使用Ajax實(shí)現(xiàn)表單提交及后臺(tái)處理”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：如何使用Ajax實(shí)現(xiàn)表單提交及后臺(tái)處理
當(dāng)前網(wǎng)址：http://chinadenli.net/article4/giopoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站制作、定制開發(fā)、網(wǎng)站收錄、虛擬主機(jī)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)