Ajax フォームの送信とバックグラウンド処理に基づくシンプルなアプリケーション

ここで、Ajax フォームの送信とバックグラウンド処理に基づいたシンプルなアプリケーションを紹介します。今からそれを皆さんと共有し、皆さんの参考にしてください。

まず、フォームの送信について説明します。フォームを送信するには、まずフォームのデータを収集する必要があります (検証については説明しません。jquery については次回に譲ります)。 html $("xxid").val() などの値を取得するのは簡単ですが、フォームが大量のデータを収集する場合、このようなフォームが多数ある場合、このメソッドを使用するのは間違いなく面倒です、そして録音では間違いを犯しやすいです。したがって、単純に収集ルールを定義して、サーバーに送信するデータ フォーム コントロールをマークし、マークされたデータを一緒に取得できます。

例として最も単純なスタイルの入力を見てみましょう1a68931579285e3227dba517acb2bf2a 、格納される値は、対応するサーバー関連クラスの属性名です。このマークがあるとフロントでのデータの検索が容易になります。

次のコードのような一般的なメソッドを定義できます

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

これは、フォーム内のすべてのテキストを取得してデータオブジェクトに入れる簡単な方法です。他のフォームの値を取得する方法についても同様です。コントロールについては詳しく説明しませんが、原理は同様です。

次のステップは、ここで 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処理ページで、もう1つはWebメソッドです。私たちは、顧客の動きが速すぎたり、サービスが遅すぎたり、クリックを繰り返したりすることを防ぐためにいくつかの作業を行いました。

このようなフォームデータの収集とサーバーへの返却が完了しました。ここでは、json2.js の JSON.stringify メソッドを使用して、オブジェクトを json 文字に均一に変換します。その利点は、json 文字列を自分で記述するために json の形式を考慮する必要がないことです。

その後、クライアントはデータを収集し、サーバーはデータを処理する必要があります。フロント デスクから取得するデータのキー (json キー) に、特定のデータ クラスのすべての属性を含めることはできません。そして、多くのデータ クラスがあり、それがどのクラスであるかを知るのはサーバーだけです。したがって、ここではヘルパー変換クラスを作成する必要があります。ここには別の問題があります。多くのデータ クラスが存在する可能性があります。それは落とし穴ではないでしょうか?したがって、クライアントからサーバーに送信されるデータ形式は、繰り返しのないキーと値のペアのセットであるため、バックグラウンド クラスにはさまざまな種類があります。少なくとも、入力パラメータが決定されると、関連するクラスが渡されます。関連するクラス?それがどのカテゴリであるかは、特定の背景収集方法を確認することによってのみ知ることができます。それでは、データ クラスに変換する必要がある Dictionary708d620c35cc3f2d1dd0b997d136c07a について考えを整理してみましょう。わかりませんが、この Dictionary のキー (key) は、このデータ クラスの属性セットのサブセットとみなされ、この Dictionary の値 (value) は、 ; は、このデータ クラス属性の値です。その方が扱いやすいでしょう。属性セットを取得するにはどうすればよいですか?反射。次のカテゴリのうちどれがありますか?とにかく、ジェネリック医薬品がそれを解決します。

これがコアコードです​​

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 scobjは、フォームを追加する場合は、新しいオブジェクトを渡し、注文を更新する場合は、元のフォームデータを入れます。渡してください。ちなみに、ChangeType メソッドは次のとおりです。その他、データ クラスの一部の属性 (int? DateTime? など) は例外が発生するため、属性を単純に変更しました。 （フロントのデータフィールドに対応する値） 大文字と小文字を扱うかどうかを確認します（通常は大文字と小文字は関係ありませんが、大文字と小文字を扱いたい場合はフロントの唾液に溺れると思います）。

これでバックグラウンド データ処理のコアが完成し、コードの呼び出し部分も掲載されます

[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がブートストラップを満たした後のAjaxフォーム検証

AJAXリクエストキュー実装

以上がAjax フォームの送信とバックグラウンド処理に基づくシンプルなアプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。