Jquery 添加内容自动刷新的实现代码

发布时间:2020-10-28编辑:脚本学堂
本文介绍下,如何用Jquery实现添加内容后,自动刷新的一例代码,有需要的朋友,参考下吧。

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教程校目学习下。