Une application simple basée sur la soumission de formulaires Ajax et le traitement en arrière-plan

Maintenant, je vais vous proposer une application simple basée sur la soumission de formulaire Ajax et le traitement en arrière-plan. Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour 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 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 à 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.

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 complète le noyau de traitement des données en arrière-plan, et 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 front-end js ont été développés il y a longtemps, et les considérations sont beaucoup plus complètes que les miennes. . Il s'agit du traitement en arrière-plan. D'après ma simple collection à la réception, 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. 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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Ajax Obtenez des données par nom de ville

Validation du formulaire Ajax après que MVC rencontre le bootstrap

Implémentation de la file d'attente de requêtes 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!