Soumission de formulaire Ajax et traitement en arrière-plan

Cette fois, je vais vous présenter la soumission de formulaire Ajax et le traitement en arrière-plan. Quelles sont les précautions pour la soumission de formulaire Ajax et le traitement en arrière-plan. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 gênant. utiliser cette méthode, et il est facile de faire des erreurs. 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 lié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 du formulaire et de le mettre dans une donnée object , je n'entrerai pas dans les détails sur la façon d'obtenir les valeurs des autres contrôles de formulaire, les principes sont similaires.

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 à vous soucier du format de json pour épeler jsonstring. faire le ménage.

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.

Cela dit, publiez 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 ici est de mettre en place des mises à jour, comme l'ajout d'un form Transmettez simplement un nouvel objet. Si vous souhaitez mettre à jour la commande, 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 termine 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 de l'appel de méthode de traitement spécifique en arrière-plan prohandle.Insert(pro. ) enregistre la classe Entrez la base de données, pro.CreatorID, pro.CreatorName sont d'autres informations sur le projet, dans lesquelles je n'entrerai 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 js front-end ont déjà été développés, et les considérations sont bien plus complètes que les miennes. est basé sur mon Ce type de frontal est simplement collecté. De nombreux frameworks tiers ont des 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, vous pouvez le faire. vous implémentez ce chemin simplement ? 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment ajax soumet-il un formulaire et implémente-t-il le téléchargement de fichiers

Que diriez-vous des données json téléchargées par Traitement réussi en arrière-plan 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!