Jquery ajax example of refreshing message boards and comments

Last Update:2013-12-31 Source: Internet

Author: User

Tags php database

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The effects of refreshing comments are often used. This effect is very good for users and websites. The following small series will introduce you to an example of jquery ajax refreshing message boards and comments, I hope this tutorial will be available to you.

You can create a table by yourself. There are only five fields: classid, title, content, updatetime, and id.

Home index. php

The Code is as follows:

Copy code

<! 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>
<Title> www.corange.cn </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript" src = "../jquery-1.4.3.js" mce_src = "jquery-1.4.3.js"> </script>

$ (Document). ready (function () {// onload event handler function of DOM
$ ("# Button"). click (function () {// processing function when a button is clicked
Postdata (); // execute the postdata function when the button is clicked.
});
});

Function postdata () {// submit data function
$. Ajax ({// call jquery's ajax Method
Type: "POST", // set the ajax method to submit data
Url: "OK. php", // submit the data to OK. php
Data: "title =" + $ ("# title "). val () + "& content =" + $ ("# content "). val () + "& classid =" + $ ("# classid "). val (), // input the value in the writer box as the submitted data

Success: function (msg) {// callback after successful submission. The msg variable is output by OK. php.
//
$ ("# Div2" cmd.html (msg); // if necessary, you can display the value of the msg variable to a DIV element.
$ ("# Div1" 2.16.html ("<font color = '# ff0000'> Post OK </font> ");

$ ("# Title_span" ).html ("<input type = 'text' value = ''name = 'title' id = 'title'/> ");
$ ("# Content_span" pai.html ("<textarea name = 'content' cols = '50' rows = '10' id = 'content'> </textarea> ");
}

});
}

</Script>
<Div id = "div1"> </div>
<Input type = "hidden" value = "<? Php echo $ _ REQUEST ['classid '];?> "Name =" classid "id =" classid "/> <br/>
Title: <span id = "title_span"> <input type = "text" value = "" name = "title" id = "title"/> </span> <br/>
Content: <span id = "content_span"> <textarea name = "content" cols = "50" rows = "10" id = "content"> </textarea> </span> <br/>
<Input type = "submit" name = "button" id = "button" value = "submit"/>
<Hr/>
<Div id = "div2">
<? Php require "show_main.php";?>
</Div>
<Hr/>

OK. php file, submitted by ajax

The Code is as follows:

Copy code

<? Php
Require "conn. php ";
$ Classid = $ _ POST ['classid'];
$ Title = $ _ POST ['title'];
$ Content = $ _ POST ['content'];
$ Updatetime = date ("Y-m-d H: I: s", time ());
Mysql_select_db ($ database_lr, $ lr );
$ Insert_ SQL = "insert into blog (classid, title, updatetime, content) values ('$ classid', '$ title',' $ updatetime ',' $ content ')";
$ Result = mysql_query ($ insert_ SQL );

?>
<? Php require "show_main.php";?>

Conn. php database connection file

The Code is as follows:

Copy code

<? Php
# FileName = "Connection_php_mysql.htm"
# Type = "MYSQL"
# HTTP = "true"
$ Hostname_lr = "localhost ";
$ Database_lr = "inso ";
$ Username_lr = "root ";
$ Password_lr = "";
$ Lr = mysql_pconnect ($ hostname_lr, $ username_lr, $ password_lr) or trigger_error (mysql_error (), E_USER_ERROR );
Mysql_query ("set names utf8 ;");
// If ($ lr ){
// Echo "Very good, MYSQL connection successful! ";
//} Else {
// Echo "Sorry, it failed! ";
//}

Show_main.php File

The Code is as follows:

Copy code

<Script language = "javascript" src = "ajaxpg. js"> </script>
<Div id = "result">
<? Php
$ Classid = $ _ REQUEST ['classid'];
// Note that the data cannot be displayed if the total number of data entries is smaller than the number of data entries per page.

$ Page = isset ($ _ GET ['page'])? Intval ($ _ GET ['page']): 1; // obtain the value of the page in page = 18. If there is no page, the page number is 1.
$ Num = 10; // 10 data entries per page

Require "conn. php ";
Mysql_select_db ($ database_lr, $ lr );
/*
First, we need to obtain the actual amount of data in the database to determine the specific number of pages to be divided. The specific formula is
Total databases divided by the number of entries displayed on each page, more than one.
That is to say, 10/3 = 3.3333 = 4 there is a remainder, and we need to enter.
*/

$ Result = mysql_query ("select * from blog where classid = '$ classid '");
$ Total = mysql_num_rows ($ result); // query all data

$ Url = 'show _ main. php'; // obtain the URL of this page

// Page number calculation
$ Pagenum = ceil ($ total/$ num); // obtain the total number of pages, which is also the last page.
$ Page = min ($ pagenum, $ page); // get the homepage
$ Prepg = $ page-1; // Previous page
$ Nextpg = ($ page = $ pagenum? 0: $ page + 1); // next page
$ Offset = ($ page-1) * $ num; // obtain the value of the first parameter of limit. If the first page is (1-1) * 10 = 0, the second page is (2-1) * 10 = 10.

// Start the paging navigation bar code:
$ Pagenav = $ page. "/". $ pagenum. "& nbsp; <B> & nbsp;". ($ total? ($ Offset + 1): 0 ). "</B>-<B> ". min ($ offset + 10, $ total ). "</B> & nbsp; Total $ total & nbsp ;";

// Page 1:
If ($ page = 1 ){
$ Pagenav. = "First & nbsp ;";
}
Else
{$ Pagenav. = "<a href = javascript: dopage ('result', '$ url? Classid = $ classid & page = 1');> First </a> & nbsp ;";}
If ($ prepg) $ pagenav. = "<a href = javascript: dopage ('result', '$ url? Classid = $ classid & page = $ prepg ');> Prev </a> & nbsp; "; else $ pagenav. =" Prev & nbsp ;";
If ($ nextpg) $ pagenav. = "<a href = javascript: dopage ('result', '$ url? Classid = $ classid & page = $ nextpg ');> Next </a> "; else $ pagenav. =" Next ";
If ($ pagenum> $ page ){
$ Pagenav. = "& nbsp; <a href = javascript: dopage ('result', '$ url? Classid = $ classid & page = $ pagenum ');> Last </a> ";
}
Else {
$ Pagenav. = "& nbsp; Last ";
}
$ Pagenav. = "& nbsp; Total page $ pagenum ";

// If the input page number parameter is greater than the total page number, the error message is displayed.
If ($ page> $ pagenum ){
Echo "Error: Can Not Found The page". $ page;
Exit;
}

$ Info = mysql_query ("select * from blog where classid = '$ classid' order by id desc limit $ offset, $ num"); // obtain the data to be displayed on the corresponding page

If ($ total> 0)
{
While ($ it = mysql_fetch_array ($ info )){
Echo $ it ['title']. "& nbsp; (". $ it ['updatetime']. ")";
Echo "<br> ";
Echo $ it ['content'];
Echo "<br> ";
} // Display data
Echo "<br> ";
Echo $ pagenav; // output paging navigation
}
Else
{
Echo "No comment .";
}
?>
</Div>

Ajaxpg. js File

The Code is as follows:

Copy code

Var http_request = false;
Function send_request (url) {// initialization, specifying the processing function and sending the request function
Http_request = false;
// Start initializing the XMLHttpRequest object
If (window. XMLHttpRequest) {// Mozilla Browser
Http_request = new XMLHttpRequest ();
If (http_request.overrideMimeType) {// sets the MIME category
Http_request.overrideMimeType ("text/xml ");
}
}
Else if (window. ActiveXObject) {// IE browser
Try {
Http_request = new ActiveXObject ("Msxml2.XMLHttp ");
} Catch (e ){
Try {
Http_request = new ActiveXobject ("Microsoft. XMLHttp ");
} Catch (e ){}
}
}
If (! Http_request) {// exception. An error occurred while creating the object instance.
Window. alert ("An error occurred while creating the XMLHttp object! ");
Return false;
}
Http_request.onreadystatechange = processrequest;
// Determine the request sending method, URL, and whether to execute the following code synchronously
Http_request.open ("GET", url, true );
Http_request.send (null );
}
// Function for processing the returned information
Function processrequest (){
If (http_request.readyState = 4) {// judge the object status
If (http_request.status = 200) {// The message is returned successfully. Start to process the information.
Document. getElementById ('result'). innerHTML = http_request.responseText;
}
Else {// The page is abnormal.
Alert ("the page you requested is abnormal! ");
}
}
}
Function dopage (obj, url ){
Document. getElementById (obj). innerHTML = "reading data ...";
Send_request (url );
Reobj = obj;
}

We only need to save the files on your server to run them.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More