Exemple simple de soumission de formulaire Ajax et de traitement en arrière-plan

Cet article vous propose principalement une application simple basée sur la soumission de formulaires Ajax et le traitement en arrière-plan. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Tout d'abord, parlons de la soumission du formulaire. Pour soumettre le formulaire, vous devez d'abord collecter les données du formulaire (en ce qui concerne la vérification, je n'en parlerai pas. Je le laisserai pour la prochaine fois) . Avec jquery, récupérez le code HTML. La valeur est toujours aussi simple que $("xxid").val() et ainsi de suite, mais si un formulaire collecte beaucoup de données et qu'il existe de nombreux formulaires comme celui-ci, ce sera certainement le cas. Il est difficile d'utiliser cette méthode et il est facile de commettre des erreurs lors de l'enregistrement. Par conséquent, nous pouvons simplement définir une règle de collecte. Par exemple, nous pouvons marquer le contrôle de formulaire de données qui doit être renvoyé au serveur, puis récupérer ensemble les données marquées.

Prenons comme exemple la saisie stylistique la plus simpleNous Ajouter un "datafield", et la valeur stockée est le nom d'attribut de la classe associée au serveur correspondante. Avec cette marque, il sera plus facile de récupérer les données à la réception.

Nous pouvons définir une méthode générale comme le code suivant

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

Voici un moyen simple d'obtenir tout le texte dans le formulaire et placez-le dans un objet de données. Je n'entrerai pas dans les détails sur la façon d'obtenir les valeurs des autres contrôles de formulaire.

Ensuite, l'étape suivante consiste à envoyer les données au serveur. Je vais utiliser directement ajax avec jquery ici.

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

Le "xxxxx.aspx/Save" ici est la page de traitement ajax, et l'autre est une méthode Web. Nous avons effectué certains traitements pour éviter que les clients soient trop rapides, que le traitement des services soit trop lent et que les clics soient répétés.

Un tel formulaire de collecte des données et de retour au serveur est complété. La méthode JSON.stringify de json2.js est utilisée ici pour convertir uniformément les objets en caractères json. L'avantage est que vous n'avez pas à prendre en compte le format de json pour épeler vous-même la chaîne json.

Ensuite, le client a collecté les données et le serveur doit traiter les données. La clé des données que nous recevons de la réception (clé json) ne peut pas toutes inclure tous les attributs d'une certaine classe de données. Il existe également de nombreuses classes de données, et seul le serveur sait de quelle classe il s'agit. Nous devons donc ici écrire une classe de conversion auxiliaire. Il y a un autre problème ici. Il peut y avoir plusieurs classes de données. Dois-je écrire une méthode pour chaque classe ? Nous analysons donc le format des données transmis du client au serveur. Il s'agit d'un ensemble de paires clé-valeur et ne se répète pas. Il équivaut à un dictionnaire. Au moins, nous pouvons. Une fois qu'un paramètre entrant est déterminé, la classe concernée sera distribuée. Des cours liés ? De quelle catégorie il s’agit ne peut être connu qu’en examinant la méthode spécifique de collecte d’informations en arrière-plan. Alors, mettons nos idées au clair. Nous avons maintenant un dictionnaire qui doit être transformé en une classe de données. Qu'est-ce qu'une classe de données exactement et quels sont ses attributs ? Je n'arrive pas à le comprendre, mais la clé (clé) de ce dictionnaire ; est la valeur de cet attribut de classe de données. Ce serait plus facile à gérer. Comment obtenir l'ensemble d'attributs ? réflexion. Lesquelles de ces catégories existent ? Quoi qu’il en soit, les génériques résolvent le problème.

Après avoir tant parlé, postez le code de base

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

Mon scrobj T1 voici Effectuez des mises à jour ensemble. Si vous ajoutez un formulaire, transmettez un nouvel objet. Si vous mettez à jour un formulaire, transmettez les données du formulaire d'origine. À propos, voici la méthode ChangeType. D'autres sont que certains attributs de la classe de données sont nullables (int ? DateTime ?, etc.). Le Convert.ChangeType traditionnel aura des exceptions, donc je l'ai simplement modifié. (la valeur correspondant au champ de données de la réception) Vérifiez s'il gère les majuscules et les minuscules (généralement quel que soit le cas, si vous voulez gérer le cas, je pense que vous serez noyé par la salive de la réception).

Ceci complète le noyau de traitement des données en arrière-plan. La partie appelante du code est également publiée

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

Voici l'utilisation principale du spécifique. appel de méthode de traitement en arrière-plan. prohandle.Insert(pro) stocke la classe dans la base de données, pro.CreatorID, pro.CreatorName sont d'autres informations sur le projet, que je n'aborderai pas. À ce stade, la collecte de données frontale et le traitement en arrière-plan d'un formulaire sont tous terminés, à l'exception de la partie sauvegarde, haha.

À la fin de l'article, il ne s'agit que d'une simple application. Comme la collection front-end que j'ai mentionnée, de nombreux frameworks front-end js ont déjà été créés, et les considérations sont beaucoup plus complètes que les miennes. J'effectue un traitement en arrière-plan. Sur la base de ma simple collection à la réception, de nombreux frameworks tiers disposent de systèmes complets, mais ce dont je parle ici n'est qu'une idée simple lorsque vous n'avez pas autant de contrôles pour le moment. , pouvez-vous facilement suivre ce chemin ? Bien sûr, je vous recommande fortement de ne pas réinventer la roue, mais vous devez comprendre la fonction principale et le principe de la roue.

Recommandations associées :

JQuery crée un exemple de soumission de formulaire AJAX pour PHP_jquery

Utilisation de Vue.js dans Laravel pour implémenter un exemple de vérification de formulaire Ajax

Utilisez le jeton de session en php pour empêcher la soumission répétée de formulaires Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!