Einfaches Beispiel für die Übermittlung von Ajax-Formularen und die Hintergrundverarbeitung

Dieser Artikel stellt Ihnen hauptsächlich eine einfache Anwendung vor, die auf der Übermittlung von Ajax-Formularen und der Hintergrundverarbeitung basiert. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Lassen Sie uns zunächst über das Absenden des Formulars sprechen. Um das Formular einzureichen, müssen Sie zunächst die Formulardaten sammeln (über die Überprüfung werde ich nicht sprechen. Ich belasse es für das nächste Mal). Mit jquery erhalten Sie den HTML-Wert immer noch so einfach wie $("xxid").val() und so weiter, aber wenn ein Formular viele Daten sammelt, und es gibt viele Formulare wie dieses, wird dies auf jeden Fall der Fall sein Die Verwendung dieser Methode ist mühsam und es kann leicht zu Fehlern bei der Aufnahme kommen. Daher können wir einfach eine Sammelregel definieren. Wir können beispielsweise die Datenformularsteuerung markieren, die an den Server zurückgesendet werden soll, und dann die markierten Daten zusammen abrufen.

Nehmen wir als Beispiel die einfachste stilistische EingabeUs Fügen Sie a hinzu „datafield“-Attribut und der gespeicherte Wert ist der Attributname der entsprechenden serverbezogenen Klasse. Mit dieser Markierung ist es einfacher, Daten an der Rezeption abzurufen.

Wir können eine allgemeine Methode wie den folgenden Code definieren

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

Hier ist eine einfache Möglichkeit, den gesamten Text abzurufen im Formular und fügen Sie es in ein Datenobjekt ein. Ich werde nicht näher darauf eingehen, wie die Werte anderer Formularsteuerelemente abgerufen werden.

Dann besteht der nächste Schritt darin, die Daten an den Server zu senden. Ich werde hier direkt Ajax mit JQuery verwenden.

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); //还原按钮
        }
      });
    }

Die „xxxxx.aspx/Save“ hier ist die Ajax-Verarbeitungsseite und die andere ist eine Webmethode. Wir haben einige Maßnahmen ergriffen, um zu verhindern, dass sich Kunden zu schnell bewegen, zu langsam bedienen und wiederholt klicken.

Eine solche Formulardatenerfassung und Rückgabe an den Server ist abgeschlossen. Die JSON.stringify-Methode von json2.js wird hier verwendet, um Objekte einheitlich in JSON-Zeichen zu konvertieren. Der Vorteil besteht darin, dass Sie das Format von JSON nicht berücksichtigen müssen, um die JSON-Zeichenfolge selbst zu buchstabieren.

Dann hat der Client die Daten gesammelt und der Server sollte die Daten verarbeiten. Der Schlüssel der Daten, die wir von der Rezeption erhalten (JSON-Schlüssel), kann nicht alle Attribute einer bestimmten Datenklasse enthalten. Und es gibt viele Datenklassen, und nur der Server weiß, welche Klasse es sein soll. Hier müssen wir also eine Hilfskonvertierungsklasse schreiben. Hier gibt es ein weiteres Problem. Es kann sein, dass es viele Datenklassen gibt. Muss ich für jede Klasse eine Methode schreiben? Wir analysieren also das vom Client an den Server übertragene Datenformat. Es handelt sich um eine Reihe von Schlüssel-Wert-Paaren, die einem Wörterbuch entsprechen Zumindest können wir Sobald ein eingehender Parameter bestimmt ist, wird die entsprechende Klasse ausgegeben. Verwandte Klassen? Um welche Kategorie es sich handelt, lässt sich nur anhand der spezifischen Hintergrunderfassungsmethode ermitteln. Also, lasst uns unsere Gedanken ordnen. Jetzt haben wir ein Dictionary, das in eine Datenklasse umgewandelt werden muss. Ich kann es nicht herausfinden, aber der Schlüssel (key) dieses Dictionary kann als Teilmenge des Attributsatzes dieser Datenklasse betrachtet werden, und der Wert (value) dieses Dictionary ; ist der Wert dieses Datenklassenattributs. Das wäre einfacher zu handhaben. Wie erhalte ich das Attributset? Spiegelung. Welche dieser Kategorien gibt es? Unabhängig davon lösen Generika das Problem.

Nachdem ich so viel geredet habe, poste den Kerncode

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

Mein T1-Scrobj hier ist Führen Sie Aktualisierungen gemeinsam durch. Wenn Sie ein Formular hinzufügen, übergeben Sie ein neues Objekt. Wenn Sie ein Formular aktualisieren, übergeben Sie die ursprünglichen Formulardaten. Übrigens gibt es hier die ChangeType-Methode, bei der einige Attribute in der Datenklasse nullbar sind (int? DateTime? usw.). Das traditionelle Convert.ChangeType-Attribut wird daher einfach geändert (Der Wert, der dem Datenfeld in der Rezeption entspricht) Überprüfen Sie, ob Groß- und Kleinschreibung verarbeitet wird (normalerweise unabhängig von der Groß- und Kleinschreibung. Wenn Sie mit Groß- und Kleinschreibung umgehen möchten, werden Sie meiner Meinung nach im Speichel der Rezeption ertrinken).

Damit ist der aufrufende Teil des Codes abgeschlossen.

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

Hier ist die Kernverwendung des spezifischen Der Aufruf der Hintergrundverarbeitungsmethode prohandle.Insert(pro) speichert die Klasse in der Datenbank, pro.CreatorID und pro.CreatorName sind einige weitere Informationen über das Projekt, auf die ich nicht näher eingehen werde. Hier haben wir eine Art Front-End-Datenerfassung und Hintergrundverarbeitung, bis auf den Speicherteil ist alles vorbei, haha.

Am Ende des Artikels handelt es sich nur um eine einfache Anwendung. Wie bei der von mir erwähnten Front-End-Sammlung wurden bereits viele Front-End-JS-Frameworks erstellt, und die Überlegungen sind viel umfassender als meine. Basierend auf meiner einfachen Sammlung an der Rezeption verfügen viele Frameworks von Drittanbietern über vollständige Systeme, aber wovon ich hier spreche, ist nur eine einfache Idee, wenn Sie im Moment nicht so viele Steuerelemente haben Können Sie diesen Weg problemlos beschreiten? Natürlich empfehle ich dringend, das Rad nicht neu zu erfinden, aber Sie müssen die Kernfunktion und das Prinzip des Rades verstehen.

Verwandte Empfehlungen:

JQuery erstellt ein AJAX-Formularübermittlungsbeispiel für PHP_jquery

Verwendung von Vue.js in Laravel zur Implementierung eines Ajax-Formularüberprüfungsbeispiels

Verwenden Sie das Sitzungstoken in PHP, um die wiederholte Übermittlung von Ajax-Formularen zu verhindern

Das obige ist der detaillierte Inhalt vonEinfaches Beispiel für die Übermittlung von Ajax-Formularen und die Hintergrundverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!