JQuery sendet Daten im JSON-Modus, Beispielcode_jquery, an den Server-js-Tutorial-php.cn

JQuery sendet Daten im JSON-Modus, Beispielcode_jquery, an den Server

WBOY

Freigeben： 2016-05-16 16:49:51

Original

987 Leute haben es durchsucht

JQuery kapselt Ajax-Datenanforderungen, wodurch dieser Vorgang viel einfacher zu implementieren ist. In der Vergangenheit mussten wir viel Code schreiben, um diese Funktion zu implementieren. Jetzt müssen wir nur noch die Methode $.ajax() aufrufen und die Anforderungsmethode, Adresse, Datentyp und Rückrufmethode angeben. Der folgende Code zeigt, wie man Client-Formulardaten im JSON-Format kapselt, die Daten dann über die Ajax-Anfrage von JQuery an den Server sendet und schließlich die Daten in der Datenbank speichert. Der Server ist als .ashx-Datei definiert. Tatsächlich können Sie den Server als jeden Typ definieren, der Clientdaten empfangen und verarbeiten kann, z. B. Webdienst, ASP.NET-Seite, Handler usw.

Zuerst werden auf der Clientseite die Seitenformulardaten über ein JavaScript-Skript in das JSON-Format gekapselt. Die Funktion GetJsonData() vervollständigt diese Funktion. Anschließend senden wir die Daten über die Methode $.ajax() an RequestData.ashx auf dem Server. Es wird die Methode JSON.stringify() verwendet, die die vom Client gesendeten Daten in ein JSON-Objekt umwandeln kann. Weitere Informationen finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/JavaScript/. Referenz /Global_Objects/JSON/stringify

Code kopieren Der Code lautet wie folgt:

 
$( "#btnSend" ).click(function() { 
$("#request-process-patent").html("Daten werden übermittelt, bitte schließen Sie das aktuelle Fenster nicht..."); 
$ .ajax({ 
type: "POST", 
url: "RequestData.ashx", 
contentType: "application/json; charset=utf-8", 
data: JSON.stringify( GetJsonData()), 
dataType: "json", 
success: function (message) { 
if (message > 0) { 
alert("Die Anfrage wurde übermittelt! Wir werden uns mit Ihnen in Verbindung setzen Sie so schnell wie möglich"); 
} 
}, 
Fehler: Funktion (Nachricht) { 
$("#request-process-patent").html("Daten konnten nicht übermittelt werden! "); 
} 
}); 
}); 

function GetJsonData() { 
var json = { 
"classid": 2, 
" name": $("#tb_name" ).val(), 
"zlclass": "Testtyp 1, Testtyp 2, Testtyp 3", 
"pname": $("#tb_contact_people") .val(), 
" tel": $("#tb_contact_phone").val() 
}; 
return json; Schauen Sie sich den Servercode an, RequestData.ashx >[Serialisierbar] 
public class RequestDataJSON 
public int classid { get; } 

public string zlclass { get;
public string pname { get; }
public string tel { get; 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 stream = sr.ReadToEnd(); var javaScriptSerializer = new JavaScriptSerializer(); 
var PostedData = javaScriptSerializer(stream); 

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

try 
{ 
using (var ctx = new dbEntities()) 
{ 
ctx.tb_query.AddObject(obj) ; 
num = ctx.SaveChanges(); 
} 
catch (Exception msg) 
{ 
context .Response.Write(msg.Message); 

context.Response.ContentType = "text/plain"; 
context.Response.Write(num) 

public bool IsReusable 
{ 
 get 
{ 
return false; 
} 
} 
} 

 
Definieren Sie eine Klasse RequestDataJSON mit Serializable-Attribut, um Clientdaten zurückzugeben. Serialisieren, um die Daten abzurufen und in der Datenbank zu speichern. Im obigen Code wird EntityFramework verwendet, wodurch der Datenbankinteraktionscode sehr prägnant ist. Es gibt zwei Arten von Rückgabeergebnissen, die den Rückruffunktionen success() und error() in Ajax entsprechen. Wenn in der Rückruffunktion success() der Wert des Rückgabeergebnisses größer als 0 ist, gibt er die Anzahl der Datensätze an, die der Datenbank über EntityFramework hinzugefügt wurden. In der Rückruffunktion error() zeigt das Rückgabeergebnis die spezifischen Informationen an Versagen. 

Die RequestData-Klasse erbt die IHttpHandler-Schnittstelle, was darauf hinweist, dass sie Clientanforderungen synchron verarbeitet. Natürlich können Sie es auch ändern, um die IHttpAsyncHandler-Schnittstelle zu erben, um asynchrone Anforderungen zu verarbeiten. Die Codeschnittstelle ist ähnlich.