Real-time interaction between client and server data based on jquery $. ajax

Simple HTML code, saving ajax.html.

The code is as follows:

Copy code

<A id = "ViewInfo" href = "javascript: void (0)" class = "link" onclick = "ViewMsg (<% # Eval (" RecordID ") %> ); return false; "> View all </a> <Div id = "ViewMsg" style = "background-color: # fff; padding: 10px;" class = "inbox"> <P> <B> <Label id = "lblSender"> </label> </B> <Label style = "margin-left: 10px;"> <Label id = "lblSendTime"> </label> </Label> </P> <P> <Label id = "lblContent"> </label> </P> <P style = "text-align: right;"> <Input type = "button" class = "button" value = "Close this page" onclick = "closeViewMsg ();"/> <Input id = "delMsg" type = "button" class = "button" value = "delete this message"/> </P> </Div>

Reference jquery. js and date. F-0.5.0.js (json date conversion)

The code is as follows:

Copy code

Function ViewMsg (id ){ $. Ajax ({ Type: "post ", Cache: false, Url: "/user/accountmanage/mymessage/MsgHandler. ashx? Id = "+ id +" & type = view ", Datatype: "json ", Data: '', // you can write parameters that require http requests here. Success: function (data ){ Certificate ('{lblsender'{.html (data. Sender ); (('{Lblsendtime'}.html (new Date (parseInt (data. SendTime. substr (6). f ('yyyy-MM-DD'); // Convert the json Date string to the string Date format ('{Lblcontent'{.html (data. Content1 ); Var message = data. RecordID; $ ('# DelMsg'). bind ('click', {msg: message}, function (event ){ Confirm ("Are you sure you want to delete? "); $. Ajax ({ Type: "post ", Cache: false, Url: "/user/accountmanage/mymessage/MsgHandler. ashx? Id = "+ event. data. msg +" & type = del ", Datatype: "text ", Success: function (data) {location. href = location ;}, Error: function (XMLHttpRequest, textStatus, errorThrown ){ Alert ('');                     } }); }); }, Error: function (XMLHttpRequest, textStatus, errorThrown ){ Alert ('');         } }); }

Create a general processing program MsgHandler. ashx. Note that the document encoding must be consistent with the jquery ajax file encoding; otherwise, garbled characters may occur.

The code is as follows:

Copy code

Public class MsgHandler: IHttpHandler     { Public void ProcessRequest (HttpContext context)         { If (context. Request. QueryString ["type"] = "view ")             { Context. Response. ContentType = "application/json "; Int id = JSSDW. utils. stringUtils. toInt32 (context. request. queryString ["id"], 0); // converts string type to int type. The default value is 0. You can directly use convert. listen 32 () WebBiz. Message messageBiz = new WebBiz. Message (); Interface. Message message = messageBiz. GetMessageInfo (id ); String json = new JavaScriptSerializer (). Serialize (message); // Convert the object class to json format for output Context. Response. Write (json );             } Else             { Context. Response. ContentType = "application/text "; Int id = JSSDW. Utils. StringUtils. ToInt32 (context. Request. QueryString ["id"], 0 ); WebBiz. Message messageBiz = new WebBiz. Message (); MessageBiz. DeleteMessageInfo (id ); Context. Response. Write ("deleted successfully ");             }         } Public bool IsReusable         { Get             { Return false;             }         }     }

The following code is mainly used: the sending type is post data, and the return type is json. There is a json file on it, and a url is the url of the request processing data.

The code is as follows:

Copy code

$. Ajax ({ Type: 'post', // The method for sending the page data can be post and get. Cache: 'false', // The value can be false or true to indicate whether to cache. The default value is false. Url: 'xxxxx/XXX. Ashx', // here, it is best to write the physical path for the class path processed by the webhttprequest request. Datatype: 'json', // the output data format can be json or text. Data: flag: 'Del ', id: 'id', $ (' # ID'). val () // you can write the data and type that you want to transfer to the previous processing. Success: function (data) {}, // The processed server data is returned here. Error: function (XMLHttpRequest, textStatus, errorThrown ){ Alert (''); });

Summary:
This article briefly describes the usage of $. the post method of ajax is used to send the request to return json data, and then we come in for processing. Because of the plug-in, we save a lot of processing about ajax compatibility. As for the asp.net code, we will not explain it.