We know the difference between synchronous execution and asynchronous execution, in order to better improve the user experience, we will take the asynchronous way to deal with some problems, after all, single-threaded synchronization may cause card death phenomenon, very unfriendly, so you can use Ajax to complete the user's experience, Now let's talk about how to use jquery ajax to get content without refreshes
We are only a unilateral access to content, paging, etc. will not be considered, and later will talk about no refresh of the paging
Page we place a div container to hold the returned content
<div id= "comment" >
</div>
Note: Wait.gif is a similar progress bar effect, when no loaded content is not loaded, it shows this effect, which can improve the user experience. And then the most important is the jquery, which needs Ajax to do it.
Code:
Copy the Code code as follows:
function GetInfo ()
{
$.ajax ({
URL: "doaction.aspx?fig=reader&id=1&page=1",
type: "POST",
success:function (Data)
{
$ ("#comment"). HTML (Data);
//through Arguments[0] receive can also $ ("#comment"). html (arguments[0]);
},
error:function ()
{
Alert ("program error");
}
})
}
URL: point to URL
Type: submitted in a way that can be a post or get
Success: function executed after successful communication
Error: function executed after communication failure
Beforesend: one performed prior to communication
Complete: Functions executed after communication is completed
In this case, the post submission method is more secure than get, so you can replace it with the following method
Copy the Code 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 in different ways, using the Post submission method, the first and the second way the difference is:
First, when the parameter is received, the first method in the Doaction.aspx page is received using the request.querystring["fig", and the second method uses the request.form["fig"]
Second, the first way when the communication fails, you can return the error message friendly, the second way to temporarily not find can return
Then on the doaction.aspx page, just do the appropriate processing.
Copy the Code code as follows:
if (request.form["Fig"]! = null && request.form["Fig"]. ToString () = = "Reader")
{
Ajax_getcomment ("1", 1);
}
Fetching data from the database
private void Ajax_getcomment (string id, int page)
{
using (commentbo cm = new Commentbo (ID, page-1))
{
Response.Write (Cm.getcommentcontent ());
}
}
Also, use $.get ("", {},function () {}) is the same if you are using get to submit.
Another way to load the content is to make the load () method, about the usage can consult the API, simply say how the above load with load
Code
Copy the Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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);
});
})
})
</script>
<body>
<form id= "Form1" runat= "Server" >
<input type= "button" id= "BtnLoad" value= "Load Load"/>
<div id= "Content" >
</div>
</form>
</body>
This will load the content into the page, one thing is to find that the content returned in the page is different from the alert pop-up, alert pops back the HTML tag, and the page does not, that is because the page has parsed the HTML code
Other additions, modifications, deletions and other basic operations are the same, much the same, just call the different methods in the Doaction.aspx page, the following main jquery code to see
Copy the Code 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 a nickname!") ");
$ ("#CommentUser"). focus ();
return false;
}
if ($.trim ($CommentText) = = ")
{
alert ("Please fill in the comments!") ");
$ ("#CommentText"). focus ();
return false;
}
if ($.trim ($CommentValidate) = = ")
{
alert ("Please enter the verification Code");
$ ("#CommentValidate"). focus ();
return false;
}
Stopbutton (' Commentsubmit ', ten);
//Validation complete can be added by Ajax
$.ajax ({
URL: "doaction.aspx?action=add&commentparentid=" + $CommentParentID + "&commentuser=" + Escape ($CommentUs ER) + "&commenttext=" + Escape ($CommentText) + "&commentvalidate=" + Escape ($CommentValidate) + "&time=" + new Date (). toString (),
type: "GET",
success:function (data) {
if (arguments[0] = = "ERROR") {
alert ("Verification code timeout, please re-enter");
}
else {
getInfo ();
$ ("#CommentText"). Val ("");
//When verification succeeds, refresh Captcha picture
$ ("#CommentValidateImages"). attr ("src", "verifycode.aspx?s=" + math.random ());
//Alert ("Add Success");
$ ("#alertMessgae"). HTML (data);
}
$ (' #CommentValidate '). Val ("");
}
})
}
function Stopbutton ()
{
document.getElementById (Arguments[0]). disabled=true;
document.getElementById (Arguments[0]). value= "Submit (" +arguments[1]+ ")";
if (arguments[1]>=1)
{
arguments[1]--;
window.settimeout ("Stopbutton" (' "+arguments[0]+" ', "+arguments[1]+") ",";
}
Else
{
document.getElementById (Arguments[0]). Disabled=false;
document.getElementById (Arguments[0]). value= "Submit";
}
}
Doaction.aspx part of the page code page to post
Copy the Code code as follows:
if (request.querystring["action"]!=null && request.querystring["action"]== "add")
{
if (session["Verifycode"]. ToString (). ToLower ()! = Commentvalidate. ToLower ())
{
Response.Write ("ERROR");
}
Else
{
dbquery.executescalar ("insert into comment (commentparentid,commentuser,commenttext,commentreply,commentip) VALUES (' "+ Commentparentid +" ', ' "+ Commentuser +" ', ' "+ Server.HTMLEncode (commenttext) +" ', ', ' "+ Request.servervari ables["REMOTE_ADDR"] + "')";
Response.Write ("<script>alert ('!</script> of comments published successfully");
}
}
Ajax has a lot of properties, you can view the API, according to their own needs to call different properties, it is important to note that
If the user name is determined if there is a repetition, to use $.getifmodified instead of using $.get, you can test
If you use $.get the first time you register a name, you do not do other operations, you enter the same name in the text box, the time can also register, this note.
This article is mainly to jquery+ajax+c# implementation of the database data for a simple example of the introduction, the need for friends can come to the reference, I hope to be helpful to everyone
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
