首頁 > 開發者 > Ajax

jquery ajax無重新整理留言板與文章評論執行個體

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

表可以自己建立，只有classid,title,content,updatetime,id五個欄位


首頁index.php

 代碼如下 複製代碼

<!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>

<script type="text/javascript">

$(document).ready(function(){        //DOM的onload事件處理函數
$("#button").click(function(){          //當按鈕button被點擊時的處理函數
    postdata();                                      //button被點擊時執行postdata函數
});
});

function postdata(){                             //提交資料函數
$.ajax({                                                 //調用jquery的ajax方法
    type: "POST",                                     //設定ajax方法提交資料的形式
    url: "ok.php",                                      //把資料提交到ok.php
    data: "title="+$("#title").val()+"&content="+$("#content").val()+"&classid="+$("#classid").val(),    //輸入框writer中的值作為提交的資料

    success: function(msg){                 //提交成功後的回調，msg變數是ok.php輸出的內容。
              //
     $("#div2").html(msg);                    //如果有必要，可以把msg變數的值顯示到某個DIV元素中
  $("#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='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="提交" />
<hr />
<div id="div2">
<?php require "show_main.php";?>
</div>
<hr />

ok.php檔案，由ajax提交資料過來的

 代碼如下 複製代碼

<?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資料庫連接檔案

 代碼如下 複製代碼

<?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 "非常好,MYSQL串連成功了!";
//} else {
//echo "不好意思,失敗了！";
//}

?>

show_main.php檔案

 代碼如下 複製代碼

<script language="javascript" src="ajaxpg.js"></script>
<div id="result">
<?php
$classid=$_REQUEST['classid'];
//注意有個問題，就是資料如果總數小於每頁資料不能顯示

$page=isset($_GET['page'])?intval($_GET['page']):1; //這句就是擷取page=18中的page的值，假如不存在page，那麼頁數就是1。
$num=10; //每頁顯示10條資料

require "conn.php";
mysql_select_db($database_lr, $lr);
/*
首先咱們要擷取資料庫中到底有多少資料，才能判斷具體要分多少頁，具體的公式就是
總資料庫除以每頁顯示的條數，有餘進一。
也就是說10/3=3.3333=4 有餘數就要進一。
*/

$result=mysql_query("select * from blog where classid='$classid'");
$total=mysql_num_rows($result); //查詢所有的資料

$url='show_main.php';//擷取本頁URL

//頁碼計算
$pagenum=ceil($total/$num); //獲得總頁數,也是最後一頁
$page=min($pagenum,$page);//獲得首頁
$prepg=$page-1;//上一頁
$nextpg=($page==$pagenum ? 0 : $page+1);//下一頁
$offset=($page-1)*$num; //擷取limit的第一個參數的值，假如第一頁則為(1-1)*10=0,第二頁為(2-1)*10=10。

//開始分頁導航條代碼：
$pagenav=$page."/".$pagenum."&nbsp;<B>&nbsp;".($total?($offset+1):0)."</B>-<B>".min($offset+10,$total)."</B> &nbsp;Total $total &nbsp;";

//第一頁：
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($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"); //擷取相應頁數所需要顯示的資料

if ($total>0)
{
 while($it=mysql_fetch_array($info)){
 echo $it['title']."&nbsp;(".$it['updatetime'].")";
 echo "<br>";
 echo $it['content'];
 echo "<br>";
 } //顯示資料
 echo"<br>";
 echo $pagenav;//輸出分頁導航
}
else
{
 echo"No comment.";
}
?>
</div>

ajaxpg.js檔案

 代碼如下 複製代碼

var http_request=false;
function send_request(url){//初始化，指定處理函數，發送請求的函數
http_request=false;
//開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest){//Mozilla瀏覽器
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){//設定MIME類別
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){//IE瀏覽器
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
if(!http_request){//異常，建立對象執行個體失敗
window.alert("建立XMLHttp對象失敗！");
return false;
}
http_request.onreadystatechange=processrequest;
//確定發送請求方式，URL，及是否同步執行下段代碼
http_request.open("GET",url,true);
http_request.send(null);
}
//處理返回資訊的函數
function processrequest(){
if(http_request.readyState==4){//判斷對象狀態
if(http_request.status==200){//資訊已成功返回，開始處理資訊
document.getElementById('result').innerHTML=http_request.responseText;
}
else{//頁面不正常
alert("您所請求的頁面不正常！");
}
}
}
function dopage(obj,url){
document.getElementById(obj).innerHTML="正在讀取資料...";
send_request(url);
reobj=obj;
}

我們只要按上面一個個檔案儲存在你的伺服器上即可運行了哦。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
jquery ajax file upload codeigniter jquery ajax jquery ajax rest jquery unobtrusive ajax min jquery ajax upload multiple files php jquery ajax json example jquery ajax get status code
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

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