Ajax フォームの送信とバックグラウンド処理

今回は、Ajax フォームの送信とバックグラウンド処理について説明します。Ajax フォームの送信とバックグラウンド処理に関する 注意点 について、実際のケースを見てみましょう。

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

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

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

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 キー) に、特定のデータ クラスのすべての属性を含めることはできません。そして、多くのデータ クラスがあり、それがどのクラスであるかを知るのはサーバーだけです。したがって、ここではヘルパー変換クラスを作成する必要があります。ここには別の問題があります。多くのデータ クラスが存在する可能性があります。それは落とし穴ではないでしょうか?したがって、クライアントからサーバーに送信されるデータ形式は、繰り返しのないキーと値のペアのセットであるため、バックグラウンド クラスにはさまざまな種類があります。少なくとも、入力パラメータが決定されると、関連するクラスが渡されます。関連するクラス?それがどのカテゴリであるかは、特定の背景収集方法を確認することによってのみ知ることができます。それでは、データ クラスに変換する必要がある Dictionary について考えを整理してみましょう。わかりませんが、この 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 フレームワークがすでに開発されており、バックグラウンド処理は私のものよりもはるかに包括的です。私のフロントエンドでは、これは単純なコレクションです。多くのサードパーティ フレームワークには完全なシステムがありますが、ここで話しているのは、現時点でそれほど多くのコントロールがない場合に実装できる単純なアイデアです。この道は単純に？もちろん、車輪の再発明をしないことを強くお勧めしますが、車輪の中心となる機能と原理を理解する必要があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Ajax でフォームを送信し、ファイルのアップロードを実装する方法

Ajax バックグラウンドでアップロードされた JSON データを処理する方法

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