Ajax-Formularübermittlung und Hintergrundverarbeitung

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Ajax-Formularübermittlung und -Hintergrundverarbeitung vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 viele Formulare wie dieses gibt, wird es definitiv problematisch sein Wenn man diese Methode nicht verwendet, kann man leicht Fehler machen. 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 im Formular abzurufen und in Daten einzufügen Objekt, ich werde nicht näher darauf eingehen, wie man die Werte anderer Formularsteuerelemente erhält, die Prinzipien sind ähnlich.

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 Verarbeitungsschritte durchgeführt, um zu verhindern, dass Kunden zu schnell sind, die Serviceabwicklung zu langsam ist und wiederholte Klicks erfolgen.

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 umzuwandeln. Der Vorteil besteht darin, dass Sie sich keine Gedanken über das Format von JSON machen müssen, um JSON

String zu buchstabieren sauber.

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ß, um welche Klasse es sich handelt. 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 sortieren. Jetzt haben wir ein Dictionary, das in eine Datenklasse umgewandelt werden muss und was sind ihre Attribute? 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.

Ich habe so viel gesagt, 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 dient zum gemeinsamen Aktualisieren, beispielsweise zum Hinzufügen eines Formulars Übergeben Sie einfach ein neues Objekt. Wenn Sie die Bestellung aktualisieren möchten, ü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 herkömmliche 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 Groß- und Kleinschreibung behandeln 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 Hintergrund-spezifischen Verarbeitungsmethodenaufrufs ) speichert die Klasse. Geben Sie die Datenbank ein. Pro.CreatorID und pro.CreatorName sind weitere Informationen zum Projekt, auf die ich nicht näher eingehen werde. Zu diesem Zeitpunkt sind die Front-End-Datenerfassung und die Hintergrundverarbeitung eines Formulars bis auf den Speicherteil abgeschlossen, 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 entwickelt, und die Überlegungen sind viel umfassender als meine basiert auf meinem Frontend. Viele Frameworks von Drittanbietern verfügen über vollständige Systeme, aber das, worüber ich hier spreche, ist nur eine einfache Idee Sie implementieren diesen Weg einfach? Natürlich empfehle ich dringend, das Rad nicht neu zu erfinden, aber Sie müssen die Kernfunktion und das Prinzip des Rades verstehen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie sendet Ajax ein Formular und implementiert den Datei-Upload?

Wie wäre es mit den von hochgeladenen JSON-Daten? Ajax-Hintergrunderfolgsverarbeitung

Das obige ist der detaillierte Inhalt vonAjax-Formularübermittlung und Hintergrundverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!