1、前台html页面,jqueryadd.html
复制代码 代码示例:
<html>
<head>
<!--<mce:script language="
javascript" type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script>-->
<!--使用Google jquery api-->
<mce:script language="javascript" type="text/javascript" src="/js/jquery-1.4.2.min.js" mce_src="/js/jquery-1.4.2.min.js""></mce:script>
<!---包含处理事件的js文件,推荐将处理事件写入单独的js文件内------>
<mce:script language="javascript" type="text/javascript" src="addhandler.func.js" mce_src="addhandler.func.js"></mce:script>
</head>
<!---一些输出的信息-->
<body id="contentlist" >
<input type="text" name="content" id="content" >
<button>添加</button>
</body>
</html>
2、前台处理事件的js文件,addhandler.func.js
复制代码 代码示例:
//为了避免冲突,以后使用$jq代替常用到的$
var $jq=jQuery.noConflict();
//dom就绪事件
$jq("document").ready( function (){
//当点击button时触发该事件
$jq('button').click(function (){
//使用load ajax方法添加数据
$jq("body").load("../ajax/handler.php",{action:"add",vote:$jq("#content").val()},function (){
//添加后首先去除结果
checkNew();
//然后每个8秒刷新一下数据
setInterval(checkNew,8000);
});
});
}); //www.jb200.com
//刷新取数据的函数
function checkNew(){
$jq("body").load("../ajax/handler.php");
}
3、后台php处理文件,handler.php
复制代码 代码示例:
<?php
//连接
数据库
require_once('operate.inc.php');
$o=new Operate();
$o-> startAnnounce();
//如果是添加数据
if((isset($_POST['action']))&&('add'==$_POST['action'])){
$addArray=array( 'title'=> $_POST['vote'],
'content'=> $_POST['vote'],
'announceTime'=> $_POST['vote']
);
$o-> addAnnounce($addArray);
}else{
$result=$o-> selectAllAnnounces('*','id',0,'>');
$result=json_encode($result);
echo $result;
}
?>
注意:
留意程序中的文件路径,不明白的地方可以去w3school教程校目学习下。