JQuery soumet des données au serveur en mode JSON, exemple de code_jquery

JQuery encapsule les requêtes de données Ajax, ce qui rend cette opération beaucoup plus facile à mettre en œuvre. Dans le passé, nous devions écrire beaucoup de code pour implémenter cette fonction. Il ne nous reste plus qu'à appeler la méthode $.ajax() et à spécifier la méthode de requête, l'adresse, le type de données et la méthode de rappel. Le code suivant montre comment encapsuler les données du formulaire client au format JSON, puis envoyer les données au serveur via la requête Ajax de JQuery et enfin stocker les données dans la base de données. Le serveur est défini comme un fichier .ashx. En fait, vous pouvez définir le serveur comme n'importe quel type pouvant recevoir et traiter des données client, tel qu'un service Web, une page ASP.NET, un gestionnaire, etc.

Tout d'abord, côté client, les données du formulaire de page sont encapsulées au format JSON via un script JavaScript. La fonction GetJsonData() complète cette fonction. Ensuite, nous envoyons les données à RequestData.ashx sur le serveur via la méthode $.ajax(). La méthode JSON.stringify() est utilisée, qui peut convertir les données envoyées par le client en un objet JSON. Pour plus de détails, veuillez consulter ici https://developer.mozilla.org/en-US/docs/Web/JavaScript/. Référence /Global_Objects/JSON/stringify

Copier le code Le code est le suivant :

$( "#btnSend" ).click(function() {
$("#request-process-patent").html("Soumission des données, veuillez ne pas fermer la fenêtre actuelle...");
$ .ajax({
type : "POST",
url : "RequestData.ashx",
contentType : "application/json; charset=utf-8",
données : JSON.stringify( GetJsonData()),
dataType : "json",
success: function (message) {
if (message > 0) {
alert("La demande a été soumise ! Nous vous contacterons dès que possible");
}
},
error: function (message) {
$("#request-process-patent").html("Échec de la soumission des données ! ");
}
});
});

function GetJsonData() {
var json = {
"classid": 2,
" name": $("#tb_name" ).val(),
"zlclass": "Test type 1, test type 2, test type 3",
"pname": $("#tb_contact_people") .val(),
" tel": $("#tb_contact_phone").val()
};
return json
}

Prenons un regardez le code du serveur, RequestData.ashx

Copier le code Le code est le suivant :

[Sérialisable]
public class RequestDataJSON
{
public int classid { get; set; }
public string name { get; }
public string zlclass { get;
public string pname { get; set; }
public string tel { get; set;

///

RequestData
///

public class RequestData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int num = 0
context; .Response.ContentType = "application/json";
var data = context.Request;
var sr = new StreamReader(data.InputStream); var javaScriptSerializer = new JavaScriptSerializer();
var PostedData = javaScriptSerializer.Deserialize(stream);

tb_query obj = new tb_query(); 🎜>obj.name = PostedData.name;
obj .zlclass = PostedData.zlclass;
obj.pname = PostedData.pname; context.Request.UserHostAddress.ToString();
obj .posttime = DateTime.Now.ToString();

essayez
{
using (var ctx = new dbEntities())
{
ctx.tb_query.AddObject(obj) ;
num = ctx.SaveChanges();
}
}
catch (Message d'exception)
{
contexte .Response.Write(msg.Message);
}

context.Response.ContentType = "text/plain";
context.Response.Write(num); >
public bool IsReusable
{
get
{
return false
}
}
}


Définir une classe RequestDataJSON avec l'attribut Serializing pour renvoyer les données client Serialize pour obtenir les données et les stocker dans la base de données. EntityFramework est utilisé dans le code ci-dessus, ce qui rend le code d'interaction de la base de données très concis. Il existe deux types de résultats de retour, correspondant aux fonctions de rappel success() et error() en ajax. Dans la fonction de rappel success(), si la valeur du résultat renvoyé est supérieure à 0, elle indique le nombre d'enregistrements ajoutés à la base de données via EntityFramework ; dans la fonction de rappel error(), le résultat renvoyé affiche les informations spécifiques du échec.

La classe RequestData hérite de l'interface IHttpHandler, indiquant qu'elle gère les requêtes des clients de manière synchrone. Bien sûr, vous pouvez également le modifier pour hériter de l'interface IHttpAsyncHandler afin de gérer les requêtes asynchrones. L'interface de code est similaire.