Home > Developer > JavaScript
Json implements asynchronous request to submit comments without redirecting to other pages. json submits comments
Paste the code and read the code to understand the relevant logic.
Html code:
<Form id = "form1" runat = "server"> <p> comment: </p> <p> Name: <input type = "text" name = "username" id = "username1"/> </p> <p> content: <textarea name = "content" id = "content" rows = "2" cols = "20"> </textarea> </p> <input type = "button "id =" send "value =" Submit "/> </p> </form> <div class =" comment "> existing comments: </div> <div id = "resText"> </div>
Js Code:
$ ("# Send "). click (function () {$. get ("doSave. ashx ", {<span style =" white-space: pre "> </span> <span style =" font-family: Arial, Helvetica, sans-serif; "> </span> // call the json plug-in u_name: $ (" # username1 "). val (), // json data/value pairs u_cont: $ ("# content "). val ()}, function (data) var uName = data. username; // Note: username and doSave here. dic in ashx. var uCont = data. content; var txtHtml = "<div class = 'comment'>
Plug-in code:
<% @ WebHandler Language = "C #" Class = "doSave" %> using System; using System. web; public class doSave: IHttpHandler {public void ProcessRequest (HttpContext context) {var dic = new System. collections. generic. dictionary <string, object> (); // string jsonStr = "{}"; // create a string jsonStr context. response. contentType = "text/json"; // defines the returned content type as json string uname = context. request. queryString [0]; // obtain the first parameter in the request parameter. You can also directly use uname string commet = context. request. queryString [1]; // defines the string uname and commet as the string context to be queried in the context request. request. params ["username"]; QyertStrubg: query string dic. add ("username", uname); // Add the string to the object dic. add ("content", commet); jsonStr = Newtonsoft. json. jsonConvert. serializeObject (dic); // the serialization set is a json string context. response. write (jsonStr);} public bool IsReusable {get {return false ;}}}
The effect is as follows: Enter the relevant text in the input box and click Submit. The text written is displayed automatically below, so you do not need to jump to other pages.
Js server and return information. You do not need to jump to the page during the process.
This can be easily implemented through the jQuery framework. jQuery contains multiple ajax request methods. For details, refer to the corresponding API.
The button type you defined above is submit. If it is in form, the current form will be automatically submitted. We recommend that you change it to the button type if possible.
The following describes how to asynchronously obtain the JSON data of the server using jQuery's $. post method.
Function Code:
<Script type = "text/javascript"> $ (function () {// defines the variable var jsonData = null for storing the server return value; $ ('# submitBtn '). click (function () {// request parameter var params ={};$. post ('json. json', params, function (data) {// here data is the returned json object jsonData = data; alert (jsonData. name) ;}, 'json') ;};}); </script>
Complete code:
<Html>
Ajax is asynchronous. How can I not jump to the specified page?
If the page syntax is incorrect, use firbug debugging to view the console.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
