Ajax+php 無刷新更新數據.並將數據庫操作改寫成類.
Ajax+php 無刷新更新數據.
數據庫建表
sql.sql
- phpMyAdmin SQL Dump
-- version 2.11.1.2
-- http://www.phpmyadmin.net
--
-- 主機: 137.200.32.183
-- 生成日期: 2009 年 07 月 01 日 13:35
-- 服務器版本: 5.0.51
-- PHP 版本: 5.2.4
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- 數據庫: `test`
--
-- --------------------------------------------------------
--
-- 表的結構 `cr_fourm`
--
CREATE TABLE IF NOT EXISTS `cr_fourm` (
`id` int(11) NOT NULL,
`username` varchar(20) character set utf8 collate utf8_unicode_ci NOT NULL,
`newfourm` varchar(30) character set utf8 collate utf8_unicode_ci NOT NULL,
`time` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- 導出表中的數據 `cr_fourm`
--
INSERT INTO `cr_fourm` (`id`, `username`, `newfourm`, `time`) VALUES
(1, '2', '3', '2009-08-21'),
(1, '2', '3', '2009-08-21'),
(1, '2', '3', '2009-08-21'),
(1, '3', '1', '0000-00-00'),
(1, '545', '4', '0000-00-00'),
(1, '232', '2323', '0000-00-00'),
(1, '2008', '2009', '0000-00-00'),
(2, 'good', 'well', '2009-07-15'),
(1, '2008', '2009', '0000-00-00'),
(1, 'china', 'shanghai', '2009-07-01'),
(1, '??????', '???', '2009-07-01'),
(1, '河南鄭州', '???', '2009-07-01'),
(1, '評論', '發表', '2009-07-01');
up.php
************************************************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="ajax.js"></script>
</HEAD>
<BODY>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="center">
</td>
</tr>
<tr>
<td align="center"><br><br>
<div align="center" id="result"></div>
<form name="fourm">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25"> 快速發表評論<span class="STYLE1">（必須先登陸）<BR>用戶名：
<input name="username" type="text" value="">
</span></td>
</tr>
<tr>
<td height="32" align="" valign="middle">
<textarea name="newfourm" class="f" id="newfourm"></textarea>
</td>
</tr>
<tr>
<td height="32"> <input name="submit" type="button" value="發表評論" onClick=checkfourm("result")>
<input name="reset" type="reset" id="reset" value="重新填寫">
<input name="id" type="hidden" id="id" value="<?php echo"$id";?>"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</BODY>
</HTML>
ajax.php
*****************************************************************************
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(reobj).innerHTML=http_request.responseText;
}
else{//頁面不正常
alert("您所請求的頁面不正常！");
}
}
}
function checkfourm(obj){
var f=document.fourm;
var newfourm=f.newfourm.value;
var username=f.username.value;
var id=f.id.value;
if(username==""){
document.getElementById(obj).innerHTML="<img src=images/false.gif> <font color=red>您必須先登錄！</font>";
return false;
}
else if(newfourm==""){
document.getElementById(obj).innerHTML=" <font color=red>您還沒填寫評論內容！</font>";
return false;
}
else{
document.getElementById(obj).innerHTML="正在發送數據...";
send_request("sendnewfourm.php?username="+username+"&newfourm="+newfourm+"&id="+id);
reobj=obj;
}
}
sendnewfourm1.php
*****************************************************************************************************************
<?php
header("Content-Type:text/html;charset=GB2312");//避免輸出中文亂碼，linux下不需要
$username=trim($_GET["username"]);
$newfourm=trim($_GET["newfourm"]);
$id=$_GET["id"];
$time=date("Y-m-d");
$con = mysql_connect('137.200.32.183', 'root', '123456');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_query("SET NAMES GB2312");
mysql_select_db("test", $con);
$sql="insert into cr_fourm(id,username,newfourm,time) values('1','$newfourm','$username','$time')";
echo $newfourm;
echo $username;
echo $time;
$result = mysql_query($sql);
echo"<font color=red>評論已成功發表！</font>";
?>
將數據操作寫成一個類dbclasss.php ,數據連接參數單獨定義在config.inc.php
<?php
//定義數據庫操作類
class db{
//類屬性定義
var $dbhost="137.200.32.183";//MYSQL主機
var $dbuser="root";//連接帳戶
var $password="";//連接密碼
var $dbname="";//數據庫名
//變量引用
function mysql($dbhost,$dbuser,$password,$dbname){
$this->dbhost=$dbhost;
$this->dbuser=$dbuser;
$this->password=$password;
$this->dbname=$dbname;
}
//創建MYSQL連接
function mycon(){
@mysql_connect($this->dbhost,$this->dbuser,$this->password);
}
//選擇相應的數據庫
function selectdb(){
@mysql_select_db($this->db);
}
//創建數據庫連接並選擇相應數據庫
function createcon(){
mysql_connect($this->dbhost,$this->dbuser,$this->password);
mysql_query("SET NAMES 'GB2312'");//這是解決亂碼的關鍵哦，LINUX下改為UTF8
mysql_select_db($this->dbname);
}
//執行SQL語句，並返回結果集
function fetch_array($sql){
$result=mysql_query($sql);
return mysql_fetch_array($result);
}
//執行SQL語句
function query($sql){
return mysql_query($sql);
}
//取得結果集數組
function loop_query($result){
return mysql_fetch_array($result);
}
//關閉數據庫連接
function close() {
return mysql_close();
}
}
?>
config.inc.php
*******************************************
<?php
/*
* Created on 2007-11-10
*
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates
*/
// database host
//$dbhost = "localhost";
$dbhost = "137.200.32.183";
// database name
$dbname = "test";
// database username
$dbuser = "root";
// database password
$password = "123456";
?>