JQuery submits data as JSON to the server side sample code

JQuery encapsulates Ajax data requests, making this a lot easier to implement. Instead of writing a lot of code to do this, we simply call the $.ajax() method and specify how the request was made, the address, the data type, and the callback method. The following code demonstrates how to encapsulate the client-side form data in JSON format, then send the data to the server through JQuery's Ajax requests, and finally store the data in a database. The server is defined as a.ashx file. In fact, you can define the server as any type that can receive and process client data, such as Web Service, ASP.NET Page, Handler, etc.

First, on the client side, the page form data is encapsulated in JSON via JavaScript scripts. The GetJsonData() function does this. We then send the data to the requestdata.ashx server via the $.ajax() method. Which USES JSON. Stringify () method, it can be the client sends the data into a JSON object, detailed content can be seen here at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

 
$("#btnSend").click(function() { 
$("#request-process-patent").html(" Data is being submitted. Do not close the current window ..."); 
$.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(" Request submitted! We'll get in touch with you as soon as possible "); 
} 
}, 
error: function (message) { 
$("#request-process-patent").html(" Data submission failed! "); 
} 
}); 
}); 

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

Now look at the server-side code, requestdata.ashx.

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

/// <summary> 
/// Summary description for RequestData 
/// </summary> 
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.Deserialize<RequestDataJSON>(stream); 

tb_query obj = new tb_query(); 
obj.classid = PostedData.classid; 
obj.name = PostedData.name; 
obj.zlclass = PostedData.zlclass; 
obj.pname = PostedData.pname; 
obj.tel = PostedData.tel; 
obj.ip = 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; 
} 
} 
} 

RequestDataJSON, a class with the Serializable feature attribute, is defined to deserialize client data to retrieve it and store it in the database. The above code USES the EntityFramework, so that the database interaction code becomes very simple. There are two types of results returned, corresponding to the callback functions success() and error() in ajax. In the success() callback function, if the value returned is greater than 0, the number of records added to the database through the EntityFramework is indicated. In the error() callback function, the return result shows the details of the failure.

The RequestData class inherits the IHttpHandler interface, indicating that it handles client requests in a synchronous manner. Of course, you can also change it to inherit from the IHttpAsyncHandler interface to handle asynchronous requests. The code interface is much the same.