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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.