This article is mainly on the implementation of the jquery+ajax+c# to achieve no refresh operation database data simple examples are introduced, the need for friends can come to the reference, I hope to help you.
We know the difference between synchronous execution and asynchronous execution, in order to better improve the user experience, we will use asynchronous way to deal with some problems, after all, single-threaded synchronization may cause card Deng phenomenon, very unfriendly, so you can use Ajax to complete the user experience, Now we're going to talk about how to use jquery ajax to get content without refreshing we just unilaterally get content, paging, and so on, and later on there are no refreshed pagination page where we place a div container to store the returned content <div id= "comment" > <img src= images/wait.gif "title=" Data Loading ... "/></div> Note: Wait.gif is a similar progress bar effect, when not loaded content is not loaded out of the time, it shows this effect, so that can improve the user experience. Then the most important thing is jquery this piece, need to use Ajax to complete code: Code as follows: function GetInfo () { $.ajax ({ URL: "Doacti On.aspx?fig=reader&id=1&page=1 ", type:" POST ", success:function (Data) { $ ("#comment"). HTML (Data)///via Arguments[0] receive can also be $ ("#comment"). HTML (arguments[0); }, error:function () {alert ("program error"); }  })} URL: pointing to ur L Type: submitted in a way that can be post or get success: functions performed after communication success error: functions performed after communication failed Beforesend: Han Yu executed before communication Complete: Functions executed after communication a post is used hereIt's safer than get, so you can replace it with the following way code as follows: function GetInfo1 () { $.post ("doaction.aspx", {fig: Reader), ID: " 1 ", page:" 1 "}, function () { $ (" #comment "). html (arguments[0]; })} you can see that the parameters are written differently, using the Post submission method, the first The difference between the way and the second way is that first, when receiving parameters, the first way to use request.querystring["fig" in the Doaction.aspx page is to receive it, and the second way is to use request.form["Fig" Second, the first way when communication fails, can be friendly to return the error message, the second way can not be found to return then in the Doaction.aspx page, as long as the corresponding processing can be the code as follows: if ( request.form["Fig"]!= null && request.form["Fig"]. ToString () = = "Reader") { ajax_getcomment ("1", 1),  }//Get data from database private void Ajax_getcomment (string ID, int page) { using (commentbo cm = new Commentbo (ID, page-1)) &nbs P { response.write (Cm.getcommentcontent ());  } } The same if you use the $ for the submit method of get. The same is true for Get ("", {},function () {}) ... Another way to load content is to make the load () method, with reference to the usage of the API, to simply say the above with load how to load code The code is as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head runat=" Server "> <title> </title> <script src= "js/jquery.js" type= "Text/javascript" ></script> <script type= "Text/javascript" > $ (Function () { $ ("#btnLoad"). Click (function () { $ ("#content"). Load ("doaction.aspx", {fig: "Reader", ID: "1", Page: "1"},function (ResponseText, Textstatus, XMLHttpRequest) { alert (responsetext); }); &NBSP})  : </script> </head> <body> <form id= "Form1" runat= "Server" > <input type= "button" id= "Btnload" value= "Load Load"/> <div id= "cont Ent "> </div> </form> </body> </html>   So the content is loaded into the page, there is a problem is found that the content returned in the page and alert pop-up some of the different, alert pop-up return HTML tags, and the page does not, that is because the page has been parsed HTML code Other additions, modifications, Delete and so on basic operations are the same, just the same, only in the Doaction.aspx page to invoke a different method, the following is the main jquery code posted to see the code as follows: function Addpinlun () { var $CommentParentID =arguments[0]; var $CommentUser =$ (' #CommentUser '). Val (); var $CommentText =$ (' #CommentText '). Val (); var $CommentValidate =$ (' #CommentValidate '). Val (); if ($.trim ($CommentUser) = = ') { Alert ("Please fill in the nickname!") "); $ ("#CommentUser"). focus (); return false; } if ($.trim ($CommentText) = = ') { alert ("Please fill in the comments!") "); $ ("#CommentText"). focus (); return false; } if ($.trim ($CommentValidate) = = ') { alert ("Please enter a validation code"); $ ("#CommentValidate"). focus (); return false; } stopbutton (' Commentsubmit ', 10); Verification completion can Ajax add $.ajax ({ URL: "doaction.aspx?action=add&commentparentid=" + $ Commentparentid + "&commentuser= "+ Escape ($CommentUser) +" &commenttext= "+ Escape ($CommentText) +" &commentvalidate= "+ Escape ($ commentvalidate) + "&time=" + New Date (). ToString (), type: "Get", success:function (data) { if (arguments[0] = = "ERROR" { alert ("Verify code timeout, please re-enter");  } else { &NBSP ; GetInfo (); $ ("#CommentText"). Val (""); //Validation is successful, refresh code picture $ ("#CommentValidateImages"). attr ("src", "verifycode.aspx?s=" + Math.random ()); // alert ("add success"); $ ("#alertMessgae"). HTML (data); &NBSP} $ (' #CommentValidate '). Val (""); }})} function Stopbutton () { document.getElementById (Arguments[0]). disabled=tr Ue document.getElementById (Arguments[0]). Value= "Submitted (" +arguments[1]+ ")"; if (arguments[1]>=1) {arguments[1]--window.settimeout ("Stopbutton" +arguments[0]+ "'," +arguments[1]+ ")", 1000);   else { document.getElementById (arguments[0)). Disabled=false; nbsp document.getElementById (Arguments[0]). value= "Submit"; &NBSP}} doaction.aspx page part of the code page is posted as follows: if (request.querystring["action"]!=null && request.querystring["Action"]== "add") { if (session["Verifycode"). ToString (). ToLower ()!= commentvalidate. ToLower ()) { Response.Write ("ERROR"); } else &NB Sp { Dbquery.executescalar ("insert into comment (commentparentid,commentuser,commenttext,commentreply, Commentip) VALUES (' + Commentparentid + "', '" + Commentuser + "', '" + Server.HTMLEncode (commenttext) + "', ', '" "+ Request . servervariables["REMOTE_ADDR"] + "')"; Response.Write ("<script>alert!</script>") } Ajax has a lot of attributes , you can view the API and invoke different properties according to your needsYes, there is one thing to note is that if you judge whether the user name is duplicated, use $.getifmodified instead of $.get, you can test if you use $.get for the first time you register a name, You do not do other operations, you will be in the text box to enter the same name, that time can also register, this should be noted. 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
