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 フレームワークがすでに開発されており、バックグラウンド処理は私のものよりもはるかに包括的です。フロントデスクは単に収集されており、多くのサードパーティフレームワークには完全なシステムがありますが、現時点でそれほど多くのコントロールがない場合、このパスを簡単に実装できるでしょうか。もちろん、車輪を再発明しないことを強くお勧めしますが、車輪の中心となる機能と原理を理解する必要があります。

関連するおすすめ:

JQuery は PHP_jquery の AJAX フォーム送信インスタンスを作成します

Laravel で Vue.js を使用して Ajax フォーム検証インスタンスを実装します

PHP でセッション トークンを使用して、Ajax フォームの繰り返し送信を防ぎます

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