Implementing Ajax without refreshing comments based on jquery _jquery

jquery implements Ajax without refreshing comments need to use the technology: (This experiment with "jquery-1.4.2.js" version of jquery)

$.post ("General handler path", {pass parameter},function (data,status) {"}" as a dictionary);
Basic selector operation in jquery;

First create the database "T_article":

The primary key setting is self increasing;

Then create a strongly typed DataSet.

Next, create a "no refresh comment. aspx" page:

The page code is as follows:

  <div>
     
 

Then create two generic handler wsxpl.ashx (the handler for inserting the data) and Wsxpl1.ashx (a handler to get all the comment data);

The code in WSXPL.ASHX is as follows:

    public void ProcessRequest (HttpContext context)
    {context
      . Response.ContentType = "Text/plain";
      String msg = context. request["MSG"];
      New T_articletableadapter (). Insert (context. Request.userhostaddress, MSG, DateTime.Now); Creates a strongly typed instance and then invokes the Insert () function;
      Response.Write ("OK");
    }

The code in WSXPL1.ASHX is as follows:

    public void ProcessRequest (HttpContext context)
    {context
      . Response.ContentType = "Text/plain";
      var datas = new T_articletableadapter (). GetData (); Returns a DataTable
      StringBuilder sb = new StringBuilder ();//Create StringBuilder more convenient collection data
      foreach (var data in Datas   ////foreach Method traversal
      of DataTable {//implementation string concatenation, each row of data separated by $, each of the elements of each row of data separated by |; it is helpful for the foreground to parse the data;
        sb. Append (data.ipaddress). Append ("|"). Append (data.msg). Append ("|"). Append (Data.posttime). Append ("$");
      }
      Context. Response.Write (SB);
    }

By completing these steps, the part of the operation database is complete. Now as long as in the foreground of the general process to return the data to parse and attach the corresponding location on it!

First, the "Jquery-1.4.2.js" jquery library is referenced in the foreground, and then the JS script is written.

$ (function () {$.post ("Wsxpl1.ashx", function (data, status) {//Get all comments by wsxpl1.ashx if (status = = "Suc  Cess ") {var result = Data.split (" $ ");
            According to $ split string for (var i = 0; i < result.length-1 i++) {var msg = result[i];   var line = Msg.split ("|"); by | split string var pinglun = $ ("<li> User id:" + line[0] + "; Comments:" + line[1] + "; commented on:" + line[2] + "</li&
            gt; "); $ ("#pinglunlist"). Append (Pinglun); Append the resulting comment to the UL element} else {alert ("Ajax Error!")
        ");
        }) $ ("#btnpinglun"). Click (function () {//Set BTN event var msg = $ ("#msg"). Val (); $.post ("Ashx/wsxpl.ashx", {"MSG": Msg}, function (data, status) {if (status = = "Success") {if (d ATA = = "OK" {$.post ("Wsxpl1.ashx", function (data, status) {//The comment content is automatically added to the UL if (Status = = "Success") {var result = Data.splIt ("$");    var msg = result[result.length-2];
                  Get last comment var line = msg.split ("|");
                  var Pinglun = $ ("<li> User id: + line[0] +"; Comment content: "+ line[1] +"; Comment Time: "+ line[2" + "</li>");   $ ("#pinglunlist"). Append (Pinglun); Append the last comment to ul} else {alert ("Ajax Error!")
                "); Alert ("Comment succeeded!")
            "); else {alert ("Comment failed!
            ");

 }
          }
        })

      })
    })

Finish these direct runs on it!
The above is the entire content of this article, I hope to help you learn.