ajax静态页面无刷新添加留言，无刷新分页，翻页综合应用

最新推荐文章于 2024-10-01 20:12:28 发布
最新推荐文章于 2024-10-01 20:12:28 发布
阅读量2k 收藏
点赞数
文章标签： ajax border function input email action
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gsx123/article/details/2010816
版权

演示页面： http://www.uptoday.cn/index.htm

纯htm页面，通过ajax实现动态功能。添加留言，翻页，看是否有新留言等，完全不用刷新。

前台代码:

 *****************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> uptoday.cn </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <SCRIPT LANGUAGE="JavaScript">
 <!--
/*********************
功能: ajax静态页面无刷新留言板
演示：http://www.uptoday.cn/index.htm
作者：乐不思学
主页: http://www.uptoday.cn
Q  Q: 254539697
email:gsx123@gmail.com
有问题请联系我！
************************/

/*改这里*/
var ajax_url="guestbook.php";  //后台处理页面


 var xmlhttp = "";    //将ajax对象实例写在函数外，便于多个ajax函数共用   
           //处理多种浏览器  
 if   (window.XMLHttpRequest)   {   //   Mozilla,   Safari,...  
    xmlhttp =new XMLHttpRequest();              
    }  
 else if(window.ActiveXObject)   {   //   IE   
    xmlhttp =new ActiveXObject("Msxml2.XMLHTTP");   
     } 
function ajax(url,div,func)   //通用ajax函数
  {
   var arg_arr=ajax.arguments;

   argstr=null;
   if(arg_arr.length>2)
   {
      argstr="";
        for(i=3;i<arg_arr.length;i+=2)
           argstr+=arg_arr[i].toString()+"="+(arg_arr[i+1])+"&";
      argstr=argstr.substr(0,argstr.length-1);
      }
    
   xmlhttp.open("POST",url,true);
   xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
       switch(func)
       {
       case "update_reply":
  xmlhttp.onreadystatechange=update_reply;
   break;
       case "reshow":
  xmlhttp.onreadystatechange=reshow;  
   break;
       default :
  xmlhttp.onreadystatechange=ajaxget;    
   break; 
       }
  
   xmlhttp.send(argstr); 

       function ajaxget() //默认状态改变时调用的函数
   {    
     if (xmlhttp.readyState==1)
    {
     document.getElementById(div).innerHTML="刷新中……";
    }
 
          else if(xmlhttp.readyState==4)
    {
      document.getElementById(div).innerHTML=xmlhttp.responseText;
                 
    }
          }
  }

var end_replyshow=false;

 //-->
 </SCRIPT>
 <style>
  body{ background:url(bg.gif);font-size:12px;}
  #right{position:absolute;left:350px;top:15px;width:430px;height:630px;background:#C0DFE0;}

  #myword{width:100%;height:40px;border:4px solid #006666;border-bottom:0px solid #006666;
         padding:5px 3px 3px 16px;
          }
  #word{margin:auto;color:red;font:14px;}
 /*reply*/
 #replyform{border:4px solid #006666;padding:6px 4px 6px 5px;width:320px;z-index:3;}
 #showreply,#addreply{border:4px solid #006666;padding:6px 4px 5px 5px;}
 #showreply{height:560px;border-bottom:0px solid #006666;}

  #tuo{cursor:move;color:blue;}
 .hand,#next,#prev{cursor:hand;}


 .inputpage{width:16px;background:transparent;}
 
  #input{float:left;width:53%;border:0px solid #006666;}
  .text{width:100px;}

  #facearea{float:left;width:47%;border:0px solid #006666;}

  .replylist{list-style-type: none;margin-left:13px;}
  .replylist li{}
  .reply_user{font:bold;color:blue;float:left;}
  .reply_addtime{margin-left:20px;float:left;}
  .reply_qq{margin-left:10px;float:right;margin-right:5px;}
  .reply_email{margin-left:10px;float:right;}
  .reply_ip{margin-right:10px;float:right;}
  .reply_content{clear:both;width:96%;padding:6px 3px 5px 5px;border:1px solid       #006666;height:100px;margin-bottom:12px;}
 </style>


 <BODY>

 
  <div id="right">
    <div id="myword">
      <span id="word">无刷新留言本</span>

 </div>
    <div id="showreply">
      载入中……

 </div>

    <div id="addreply">
     <span id="replycount">共<span id=allnum></span>回复 今日</span>
  <span id="prev" οnclick="showreply('prev');">上一页</span>
    <INPUT TYPE="text" id="page" NAME="page" value="1" class="inputpage">
  <span id="next" οnclick="showreply('next');">下一页</span>
  <span class="hand" οnclick="end_replyshow=false;showreply(1,4);update_count();">刷新</span>
  <span class="hand" οnclick="toreply()" style="color:red;font:bold">我要留言</span>
 </div>

  </div><!-- right --> 
  <div id="replyform" style="display:none;position:absolute;  z-index:auto;left:400px;top:260px;background:white;">
    <span id="tuo">添加留言</span>
    <FORM METHOD=POST ACTION="" name=form1>
    <div id="input" >
      大&nbsp;名：<INPUT TYPE="text" NAME="user" class="text"><BR>
     Q &nbsp;&nbsp;Q：<INPUT TYPE="text" NAME="qq" class="text"><BR>
     Email：<INPUT TYPE="text" NAME="email" class="text"><BR>
    </div>
    <div id="facearea" >
    <INPUT TYPE="radio" NAME="face" id="face"  value="1" checked><IMG SRC="txt/img/face/icon_1.gif" WIDTH="15" HEIGHT="15" BORDER="0" ALT="">
    <INPUT TYPE="radio" NAME="face" id="face" value="2"><IMG SRC="txt/img/face/icon_2.gif" WIDTH="15" HEIGHT="15" BORDER="0" ALT="">
    <INPUT TYPE="radio" NAME="face" id="face" value="3"><IMG SRC="txt/img/face/icon_3.gif" WIDTH="15" HEIGHT="15" BORDER="0" ALT="">
    <INPUT TYPE="radio" NAME="face" id="face" value="4"><IMG SRC="txt/img/face/icon_4.gif" WIDTH="15" HEIGHT="15" BORDER="0" ALT="">
    <INPUT TYPE="radio" NAME="face" id="face" value="5"><IMG SRC="txt/img/face/icon_5.gif" WIDTH="15" HEIGHT="15" BORDER="0" ALT="">
     <INPUT TYPE="radio" NAME="face" id="face" value="6"><IMG SRC="txt/img/face/icon_6.gif" WIDTH="15" HEIGHT="15" BORDER="0" ALT="">
    <INPUT TYPE="radio" NAME="face" id="face" value="7"><IMG SRC="txt/img/face/icon_7.gif" WIDTH="15" HEIGHT="15" BORDER="0" ALT="">
    <INPUT TYPE="radio" NAME="face" id="face" value="8"><IMG SRC="txt/img/face/icon_8.gif" WIDTH="15" HEIGHT="15" BORDER="0" ALT="">
    <INPUT TYPE="radio" NAME="face" id="face" value="9"><IMG SRC="txt/img/face/icon_9.gif" WIDTH="15" HEIGHT="15" BORDER="0" ALT="">
    </div>

    <TEXTAREA NAME="content" ROWS="5" COLS="40"></TEXTAREA><BR>
 
    <INPUT TYPE="button" NAME="" value="保存" οnclick="savereply(user.value,content.value,qq.value,email.value)">
    <INPUT TYPE="button" NAME="" value="关闭" οnclick="document.getElementById('replyform').style.display='none';">
   </FORM>
  </div><!-- replyform -->
<SCRIPT LANGUAGE="JavaScript">
<!--


  setTimeout("showreply()",1000);
  
   function showreply(action,num) //显示留言
   {
    if (num==null){num=4;}
    var page=parseInt(document.getElementById("page").value);
 
     switch(action)
     {
     case "next":
   page=page+1;
         if (page>parseInt(document.getElementById("allnum").innerHTML)/num+1){return;}
  break;
     case "prev":
   page=page-1;
   if (page<=0){return;}
     break;
  default:
         page=1;
  break;
 
     }
     sql=" limit "+(page-1)*num+","+num;
 
     ajax(ajax_url,'','reshow','action','show','sql',sql);
     document.getElementById("page").value=page;
   }
  
 

 function toreply(id,page)
 {
  document.getElementById("replyform").style.display='block';
 }

  function savereply(user,content,qq,email) //ajax,提交留言的表单
   {
  
    for(var i=0;i<document.form1.face.length;i++)
        if(document.form1.face[i].checked)
     face=document.form1.face[i].value;

   
    if (user==""||content=="")
   {
   alert("请填写大名和留言!");
      return;
   }
  
   end_replyshow=false;
   ajax(ajax_url,'','update_reply','action','add','user',user,'content',content,'qq',qq,'email',email,'face',face);
  }
           function update_reply() //ajax返回数据后更新页面
            {
       if (xmlhttp.readyState==1)
    {
     document.getElementById("tuo").innerHTML="添加留言中……";
    }
 
          else if(xmlhttp.readyState==4)
    {
      document.getElementById("showreply").innerHTML=xmlhttp.responseText;
                  showreply(1,4);update_count();
                  document.getElementById("content").innerHTML="";
     document.getElementById("tuo").innerHTML="Success!";
     setTimeout("display()",1500);
               
    }
 
            }

   function display()
   {
    document.getElementById('replyform').style.display='none';
    document.getElementById("tuo").innerHTML="添加留言";
   }

           function reshow() //
           {
       if (xmlhttp.readyState==1)
    {
     document.getElementById("showreply").innerHTML="加载中……";
    }
 
          else if(xmlhttp.readyState==4)
    {
      document.getElementById("showreply").innerHTML=xmlhttp.responseText;
                   end_replyshow=true;
    }
 
            }
  
function update_count(){ //更新留言数
  if (end_replyshow==true)
    getcount();
  else
    setTimeout("update_count()",3000);  
  }
function getcount(){
   ajax(ajax_url,'replycount','dd','action','getcount');
  }

  update_count();


//********************************
function drag(o1,o2){//拖动
 o1.onselectstart=function() {return(false)};
 o1.οnmοusedοwn=function(e){
  e=e||window.event;
  e.cancelBubble = true;
  var x=e.layerX||e.offsetX;
  var y=e.layerY||e.offsetY;
  document.οnmοusemοve=function(e){
   e=e||window.event;
   o2.style.left=(e.clientX-x)+"px";
   o2.style.top=(e.clientY-y)+"px";
  };
  document.οnmοuseup=function(){document.οnmοusemοve=null;};
 };
}
drag(document.getElementById("tuo"),document.getElementById("replyform"));


//-->
</SCRIPT>
 </BODY>
</HTML>

*************************************************************

后台关键代码 guestbook.php

###############################

<?php
header('Content-Type:text/html;charset=GB2312');
require("txt/inc/mysql.inc.php");
mysql_select_db("guestbook",$conn);

$action=$_REQUEST['action'];
If (!empty($_REQUEST['sql']))$sql=$_REQUEST['sql'];
If (!empty($_POST["content"]))
{
$user=clean_str(iconv("UTF-8","gbk",$_POST["user"]));
If (empty($user))$user=get_client_ip();
$content=clean_str(iconv("UTF-8","gbk",$_POST["content"]));
$email=$_POST["email"];
$qq=$_POST["qq"];
$face=$_POST["face"];
//echo $content;


}

 

function isShow($type,$what)
  {
    If (!empty($what))
       switch($type)
       {
       case "qq":
  return "<A HREF=/"/"><IMG SRC=/"txt/img/small/qq.gif/" WIDTH=/"20/" HEIGHT=/"16/" BORDER=/"0/" ALT=/"qq:".$what."/"></A>";
   break;
       case "email":
  return "<A HREF=/"mailto:".$what."/"><IMG SRC=/"txt/img/small/email.gif/" WIDTH=/"20/" HEIGHT=/"16/" BORDER=/"0/" ALT=/"".$what."/"></A>";
   break;
       case "ip":
  return "<A HREF=/"http://www.ip138.com/ips.asp?ip=".$what."/" target=_blank><IMG SRC=/"txt/img/small/ip.gif/" WIDTH=/"14/" HEIGHT=/"14/" BORDER=/"0/" ALT=/"".$what."/"></A>";  
   break; 
       }
    else
     return "";
  }

    switch($action)    //
    {
    case "show":   //显示
   $sql="select * from 留言数据表 order by id desc ".$sql;
   $result=mysql_query($sql) or die("无数据");
   while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
    {
         echo "<ul class=replylist>";
         echo "<li class=reply_user>".$row['id']."楼:<span >".$row['user']."</span></li>";
         echo "<li class=reply_addtime>".$row['addtime']."</li>";
         echo "<li class=reply_ip>".isShow('ip',$row['ip'])."</li>";
         echo "<li class=reply_qq>".isShow('qq',$row['qq'])."</li>";
         echo "<li class=reply_email>".isShow('email',$row['email'])."</li>";

         echo "<li class=reply_content><IMG SRC=/"txt/img/face/icon_".$row['face'].".gif/" WIDTH=/"15/" HEIGHT=/"15/" BORDER=/"0/" ALT=/"/"> ".($row['content'])."</li>";
         echo "</ul>";
       }
   break;

    case "add":   //添加
  $sql="insert into 留言数据表 (user,content,qq,email,ip,addtime,face) values ('".$user."','".$content."','".$qq."','".$email."','".get_client_ip()."','".date("Y-m-d H:i:s",time())."','".$face."') ";
  echo $sql;
     $result=mysql_query($sql)  or die("<FONT  COLOR=red>ERROR: </FONT>".mysql_error());
   break;

    case "getcount":   //统计
   echo "共<span id=allnum>".getnum("guestbook")."</span>回复 今日".getnum("guestbook where addtime>'".date("Y-m-d H:i:s",time()-24*60*60) ."'")."";
   break;

    case "other":
  
   break;   
    }


 function   clean_str($val)   {  
  if   ($val   ==   "")  
          {  
          return   "";  
          }  
  $val   =   trim($val);  
                    $val   =   str_replace("&#032;","   ",$val);  
  $val   =   str_replace("&"  , "&amp;" ,   $val   );  
  $val   =   str_replace("<!--" , "&#60;&#33;--",  $val);  
  $val   =   str_replace("-->"   , "--&#62;" ,  $val);  
  $val   =   preg_replace("/<script/i","&#60;script" , $val);  
  $val   =   str_replace(">"  ,   "&gt;" , $val);  
  $val   =   str_replace("<"  ,   "&lt;",   $val);  
  $val   =   str_replace("/""  ,   "&quot;" , $val);  
  $val   =   preg_replace("//|/",   "&#124;", $val);  
  $val   =   preg_replace("//n/",   "<br>",   $val);   //   Convert   literal   newlines  
  $val   =   preg_replace("$/" ,"&#036;",$val);  
  $val   =   preg_replace("//r/",   ""   ,   $val);   //   Remove   literal   carriage   returns  
  $val   =   str_replace("!","&#33;" , $val);  
  $val   =   str_replace("'", "&#39;" , $val);   //   IMPORTANT:   It   helps   to   increase   sql   query   afety.  
  $val   =   stripslashes($val);                                                                           //   Swop   PHP   added   backslashes  
  $val   =   preg_replace("/","&#092;",$val);   //   Swop   user   inputted   backslashes
  $val   =   str_replace("  ","　",$val);
  return   $val;  
 }

?>

##############################

欢迎测试……

michael-S
关注
利用分页插件对Ajax请求到后台数据进行分页
Chauncymaster的博客
05-06 7152
1.在学习过程中，积累和思考是必须的，所以我还是选择用博客一边记录一边学习 一款简单的分页插件下载地址： 插件下载地址 解压之后分别把.css文件和.js文件导入相应的项目文件夹中，并且在页面中进行路径引入，确保无误。 具体做法前台： 分页：` <table id="mytable"></table> <ul class="page" id="page"></ul>`
基于LayUI分页和LayUI laypage分页的使用示例
08-29
本资源摘要信息主要介绍了基于LayUI分页和LayUI laypage分页的使用示例，涵盖了LayUI分页、LayUI动态分页、LayUI laypage分页、LayUI laypage刷新当前页等知识点。 1. LayUI分页：LayUI提供了laypage插件来实现分页...
jquery实现ajax查询后台数据列表，支持分页
石羊博客专栏
03-12 5941
自己写一些页面 为查数据简单方便，写了一个基于jquery和ajax的数据查询列表，有分页功能 一、使用方法 mobiPage.init({         id:"1",         url:"    /mmvpn/servlet/StatListServlet",         onload:true,         formid:"q_id",         ty
Ajax实现分页一
Joy
08-24 517
这里要实现分页，我们的思路是从后台开始，先从数据库获取数据开始，那么首先我们要准备SQL语句select code,name,layer from area;这里我们查出了所有的数据 通过select count(1) from area;查出所有的数据，发现在area表里面一共有742717条数据，如果我们每页显示10条数据，那么就需要查出前十条数据 这里如果获取到前十条的数据，那么就需要借助
Ajax 实现无刷新分页
热门推荐
ruxing.li 的专栏
01-21 8万+
注：本文中使用到的一些类库在前面文章都能找到源代码，我会在文中指明链接所在，为了缩短文章篇幅，由此带来的阅读不便，敬请谅解。 本文讲解 Ajax 实现无刷新分页、实现原理、代码展示、代码下载。 这里需要说明一些知识： 1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态； 2、那么，Ajax 无刷新页
Ajax+Js+Dom+Json无刷新分页技术
麻球科技
10-08 425
本文首次发表地址：http://qiuchangsheng.com 终极分页：Ajax+Js+Dom+Json无刷新分页技术 采用了时下比较流行的Ajax无刷新技术、JavaScript、JavaScript Dom、Json等技术实现，使得用户在向服务器发出请求的时候通过Ajax的异步通讯实现，这样极大的提升的用于界面的友好性，避免了传统分页技术在实现分页时页面刷新的情况。   
ajax无刷新分页类
weixin_34009794的博客
10-12 57
2019独角兽企业重金招聘Python工程师标准>>> ...
用AJAX实现无刷新的分页
weixin_30819163的博客
04-18 70
　　最近学习了AJAX技术。AJAX,指的是异步的Javascript和xml。它的基本原理就是页面用Javascript发送一个异步的http请求到服务器，服务器返回数据后，再用Javascript静态的去更改页面某个地方的值，而无需提交表单。之前，服务器返回的数据都是用xml的形式传给客户端的，但是xml传一个类的对象的数据会很长，流量大，所以现在都是改用json来传数据，复杂数据用...
thinkphp+ajax无刷新分页并加载显示图片
weixin_34138139的博客
03-17 125
2019独角兽企业重金招聘Python工程师标准>>> ...
详解ajax +jtemplate实现动态分页
10-23
动态分页是Web开发中常见的功能之一，它允许用户在不刷新整个页面的情况下浏览数据。传统的分页是静态的，即数据已经在服务器端被分好页，然后一次性发送到客户端，这样的做法在数据量不是很大的情况下是可行的。...
超强php分页打包 通用分页 万能分页 ajax分页 google分页
09-17
AJAX分页是一种无刷新的技术，用户在点击分页链接时，页面不会整体刷新，而是仅更新数据部分。这提供了更好的用户体验，减少了页面加载时间。实现AJAX分页，通常需要以下几个步骤： 1. 创建一个JavaScript函数，监听...
js真假分页示例
11-06
"js真假分页示例"是关于如何使用JavaScript（特别是jQuery）实现无刷新分页的一个教程。这种技术允许用户在不重新加载整个页面的情况下浏览多页内容，提高用户体验并减少服务器负担。 "真假分页"的概念在前端开发中...
爬取Ajax动态加载和翻页时url不变的网页+网站案例
大数据开发、JAVA开发、人工智能AI
01-30 3万+
最近在爬取一个网页的时候，遇到了需要对对多页表格的爬取，但是在对表格进行翻页的时候，url的地址并不会改变，而且网页的源代码中只有当前加载页出现的表格内容，并没有其余页所对应的<a href = ''>的内容，所以一开始纠结了很久，如何对这一类表格，或者说是对这一类在希望获取信息时无法获取跳转到其他页面的条件的情况进行爬取。后来查了很多知道，知道这是一种ajax书写的动态页面，ajax通过在后台与服
index.html 调用 ajax
flamesfather的博客
10-01 589
index.html 调用 ajax
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
最新发布
2301_77012231的博客
10-01 166
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
【漏洞复现】孚盟云oa AjaxSendDingdingMessage接口 存在sql注入漏洞
qq_48368964的博客
09-28 921
孚盟与阿里强强联手将最受青睐的经典C系列产品打造成全新的孚盟云产品，让用户可以用云模式实现信息化管理，让用户的异地办公更加流畅，大大降低中小企业在信息化上成本，用最小的投入享受大型企业级别的信息化服务，使中小企业在网络硬件环境、内部贸易过程管理与快速通关形成一套完整解决方案。Web程序中对于用户提交的参数未做过滤直接拼接到SQL语句中执行，导致参数中的特殊字符破坏了SQL语句原有逻辑，攻击者可以利用该漏洞执行任意SQL语句，如查询数据、下载数据、写入webshell、执行系统命令以及绕过登录限制等。
使用Ajax实现ThinkPHP无刷新分页教程
"thinkphp+ajax无刷新分页技术实现教程" 在Web开发中，无刷新分页是一种提高用户体验的重要技术，它允许用户在不重新加载整个页面的情况下获取新的内容。本教程将介绍如何结合ThinkPHP框架和AJAX来实现这种功能。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值