Eine einfache Anwendung, die auf der Übermittlung von Ajax-Formularen und der Hintergrundverarbeitung basiert-js-Tutorial-php.cn

Jetzt stelle ich Ihnen eine einfache Anwendung vor, die auf der Übermittlung von Ajax-Formularen und der Hintergrundverarbeitung basiert. Lassen Sie mich es jetzt mit Ihnen teilen und es allen als Referenz geben.

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

Nach dem Login kopieren

Hier ist eine einfache Möglichkeit, den gesamten Text im Formular abzurufen und in ein Datenobjekt einzufügen 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); //还原按钮
        }
      });
    }

Nach dem Login kopieren

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 zu konvertieren. Der Vorteil besteht darin, dass Sie das Format von JSON nicht selbst berücksichtigen müssen, um die JSON-Zeichenfolge 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. Es gibt auch 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.

Habe so viel gesagt und den Kerncode gepostet

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

Nach dem Login kopieren

Mein T1-Scrobj hier ist, um gemeinsam Aktualisierungen vorzunehmen, wenn ein Formular hinzugefügt wird , es wird übergeben. Ein neues Objekt kommt herein. Wenn die Bestellung aktualisiert wird, werden die ursprünglichen Formulardaten übergeben. Ü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 Kern der Hintergrunddatenverarbeitung abgeschlossen und der aufrufende Teil des Codes wird ebenfalls veröffentlicht.

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

Nach dem Login kopieren

Hier ist der Kern, der zum Aufrufen der hintergrundspezifischen Verarbeitungsmethode prohandle.Insert(pro) verwendet wird. speichert die Klasse in der Datenbank, pro.CreatorID, pro.CreatorName sind einige weitere Informationen über das 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 die von mir erwähnte Front-End-Sammlung wurden viele Front-End-JS-Frameworks vor langer Zeit entwickelt 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 nicht so viele Steuerelemente haben Moment, können Sie diesen Weg leicht beschreiten? Natürlich empfehle ich dringend, das Rad nicht neu zu erfinden, aber Sie müssen die Kernfunktion und das Prinzip des Rades verstehen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax Daten nach Städtenamen abrufen

Ajax-Formularvalidierung, nachdem MVC auf Bootstrap trifft

AJAX-Anforderungswarteschlangenimplementierung

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