jquery Ajax No Refresh message board with article comment examples

Tables can be built on their own, only classid,title,content,updatetime,id five fields

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 "> <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> <script type= "Text/javascript" > $ (document). Ready (function () {//dom onload event handler $ ("#button"). Click (function () {//Functions when button buttons are clicked PostData (); Execute PostData function when button is clicked }); }); function PostData () {//Submit data functions $.ajax ({//Call jquery Ajax method Type: "POST",//Setting the format of the Ajax method submission data URL: "ok.php",//Submit data to ok.php     data: "title=" +$ ("#title"). Val () + "&content=" +$ ("#content"). Val () + "&classid=" +$ ("# ClassID "). Val (),   //input box writer value as data submitted Success:function (msg) {//After a successful callback, the MSG variable is the content of the ok.php output. // $ ("#div2"). HTML (msg); If necessary, you can display the value of the MSG variable in a DIV element $ ("#div1"). HTML ("<font color= ' #ff0000 ' >post ok</font>"); $ ("#title_span"). HTML ("<input type= ' text ' value= ' name= ' title ' id= ' title '/>"); $ ("#content_span"). HTML ("<textarea name= ' content ' cols= ' rows= ' 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= "" rows= "" "id=" content "></textarea ></span><br/> <input type= "Submit" name= "button" id= "button" value= "submitted"/> <div id= "Div2" > <?php require "show_main.php";? > </div>

ok.php file, submitted by Ajax data over the

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 succeeded!"; } else { echo "Sorry, 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 there is a problem with the data if the total is less than the data per page can not be displayed $page =isset ($_get[' page ')? Intval ($_get[' page '): 1; This is to get the value of page in Page=18, if there is no page, then the page number is 1. $num = 10; Display 10 data per page Require "conn.php"; mysql_select_db ($database _lr, $LR); /* First we have to get the database in the end how much data to determine the specific number of pages, the specific formula is The total database is divided by the number of bars displayed per page. That is to say, 10/3=3.3333=4 will enter one. */ $result =mysql_query ("SELECT * from blog where classid= ' $classid '"); $total =mysql_num_rows ($result); Query all the data $url = ' show_main.php ';//Get the URL of this page Page number calculation $pagenum =ceil ($total/$num); Get the total number of pages, also the last page $page =min ($pagenum, $page);//Get home $PREPG = $page -1;//Previous page $NEXTPG = ($page = = $pagenum 0: $page + 1);//Next page $offset = ($page-1) * $NUM; Gets the value of the first parameter of the limit, if the first page is (1-1) *10=0, and the second page is (2-1) *10=10. To start the pager bar code: $pagenav = $page. " /". $pagenum." &nbsp;<B>&nbsp; ". ($total? ($offset + 1): 0). " </B>-<B> "min ($offset +10, $total)." </B> &nbsp; Total $total &nbsp; "; First page: 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 number of pages passed in is greater than the total number of pages, an 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"); Get the data that the page needs to display 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 handler functions, sending requested functions Http_request=false; Start initializing the XMLHttpRequest object if (window. XMLHttpRequest) {//mozilla browser Http_request=new XMLHttpRequest (); if (http_request.overridemimetype) {//Set 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, failed to create object instance Window.alert ("Create XMLHTTP object failed!") "); return false; } Http_request.onreadystatechange=processrequest; Determine how to send the request, the URL, and whether to execute the next code synchronously Http_request.open ("Get", url,true); Http_request.send (NULL); } Functions that process return information function ProcessRequest () { if (http_request.readystate==4) {//Judge object state if (http_request.status==200) {//information returned successfully, start processing information document.getElementById (' result '). Innerhtml=http_request.responsetext; } else{//page is not normal Alert ("The page you requested is not normal!") "); } } } function Dopage (obj,url) { document.getElementById (obj). innerhtml= "reading data ..."; Send_request (URL); Reobj=obj; }

We just click on the file to save on your server to run OH.