首頁 > web前端 > js教程 > 主體

基於Ajax表單提交及後台處理簡單的應用

亚连
發布: 2018-05-23 14:32:42
原創
1181 人瀏覽過

下面我就為大家帶來一篇基於Ajax表單提交及後台處理簡單的應用程式。現在就分享給大家,也給大家做個參考。

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

 就拿最簡單的文體輸入做例子吧我們加一個"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,後台的類別有很多種,那麼至少我們能確定一個傳入參數了,傳出的就是相關類別。相關類?到底是哪一類還只有到了具體後台收集方法才知道。那麼,整理一下思路,現在有一個Dictionary要變成一個資料類,資料類到底是什麼有什麼樣的屬性?搞不清,但這個Dictionary的key(鍵)可以看做是這個資料類屬性集的一個子集,而這個Dictionary的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框架都已經早做了,考慮方面也比我這個全面得多,後台處理我這是基於我這種前台簡單收集弄的,很多第三方框架都有完整的體係了,但我這裡說的只是一種簡單的思路,當你一時沒有那麼多控件時是否能把這一條路簡單走通實現。當然我強烈建議不要重複造輪子,但要一定要明白輪子的核心作用和原理。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

Ajax 透過城市名稱取得資料

#

MVC遇上bootstrap後的ajax表單驗證

#AJAX請求佇列實作

以上是基於Ajax表單提交及後台處理簡單的應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!