index.html

 <script src="jquery.min.js"></script>

  <script>

    $(function(){

    $.ajax({                //页面载入时载入评论信息

        type:"GET",

        url:"10-17.php?act=load&id="+Math.random(),

        error:function(){$("#comments").html("获取评论信息失败");},

        success:function(data){

            $("#comments").html(data);        }

   });

  $("#Submit").click(function(){

        title=$("#title").val(); author=$("#author").val(); //获取表单中的数据

        email=$("#email").val(); content=$("#content").val(); 

     $.post("10-17.php",{    //发送表单中的数据给addnew.asp

     title:escape(title), author:escape(author),

     email:escape(email), content:escape(content),

     act:"add"

   },

   function(data){  
　　　alert(data);

     if(data==){

       $("#title").val(''); $("#author").val(''); //清空添加记录框中的内容

       $("#email").val(''); $("#content").val(''); 

       var newcom="<div style='border:1px solid #CCC;margin:5px;'>网友："+author+" 发表于"+Date()+"<br/>标题："+title+"<br/>"+content+" Email："+email+"</div>";

   $("#comments").prepend(newcom);    //插入到元素内部的最前面

 }  
} );

    } );

} );

  </script>  

</head>

<body>

  <h3 style="margin:4px; text-align:center">网友评论</h3>

  <div id="comments"><!--用来载入评论的内容，未加载完时显示加载中图标-->

    <div style="border:1px solid #CCC;margin:5px 5px;"><img src="onLoad.gif" alt="加载中..." /> 评论加载中......</div>

  </div>

  <form style="margin:8px;">

    <table width="" border="" align="center" cellpadding="" cellspacing="" bgcolor="#333333">

      <caption>请在下面发表你的高见吧</caption>

      <tbody bgcolor="#ffffff">

        <tr>

          <td>昵称：</td>

          <td><input type="text" id="author"></td>

        </tr>

        <tr>

          <td>邮箱：</td>

          <td><input type="text" id="email"></td>

        </tr>

        <tr>

          <td width="">标题：</td>

          <td width=""><input type="text" id="title"></td>

        </tr>

        <tr>

          <td>内容：</td>

          <td><textarea id="content" cols="" rows=""></textarea></td>

        </tr>

        <tr>

          <td></td>

          <td><input type="button" id="Submit" value="发表评论"></td>

        </tr>

      </tbody>

    </table>

  </form>

10-17.php

<?

header("Content-type: text/html; charset=gb2312"); 

require('conn.php');

$act=$_REQUEST["act"]; //获取act变量的值

//$act="load";

if($act=="load") {        //如果是请求载入评论

    $result=$conn->query("select * from lyb order by ID desc limit 3");

    if($result->num_rows>) {

        while($row=$result->fetch_assoc()){

            ?>

            <div style="border:1px solid #CCC;margin:5px;">

                网友：<?= $row["author"] ?> 发表于<?= $row["date"] ?><br/>

                标题：<?= $row["title"] ?><br/>

                <?= $row["content"] ?> Email：<?= $row["email"] ?>

            </div>

            <? }

        }

            else    echo "<p>目前还没有用户留言</p>";

        }

if($act=="add") {

//'如果是发表评论

   $title = unescape($_POST["title"]);    //获取10-16.php传来的数据

   $author = unescape($_POST["author"]);

   $email = unescape($_POST["email"]);

   $content = unescape($_POST["content"]);

   $date=date("Y-m-d h:i:s");

   $sql="Insert into lyb(title,author,email,content,date) values('$title','$author','$email', '$content','$date')";    

   if($conn->query($sql)) echo ;

} ?>

(1)该评论系统中的新闻是在页面载入之后采用Ajax技术载入进来的，因此HTML代码中可以没有任何用来读取数据表lyb中的评论数据的php代码。

(2)载入评论的容器元素#comments中本来就含有一个“正在加载”的图像和文字，当载入完成之后，这些内容会被评论信息替换掉。达到不用$.ajax()方法的beforeSend（）函数也能实现显示“正在加载”图标的效果。

(3)该评论系统也采用了在服务器端和客户端分别插入记录的方法，服务器端插入记录成功后，发送标志1给客户端，客户端采用prepend()方法动态插入div元素。

Ajax制作无刷新评论系统的更多相关文章

  1. ajax无刷新评论示例

    下面就为大家带来一篇 ajax无刷新评论示例.学习还是有点帮助的,给大家做个参考吧. 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面 留言内容中为空,或者为灰色的“没有填写留言内容 ...

  2. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  3. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  4. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  5. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  6. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  7. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  8. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  9. JS---案例：无刷新评论---属于创建对象的案例拿出来复习

    案例:无刷新评论---属于创建对象的案例拿出来复习 创建行和单元格,添加到相应元素中,设置内容 createElement, appendChild,innerHTML <!DOCTYPE ht ...

随机推荐

  1. Nginx反向代理匹配部分二级域名或二级目录配置

    server { charset utf-; client_max_body_size 128M; # Add index.php to the list if you are using PHP i ...

  2. Spring-----7、bean实例的创建方式及依赖配置

    转载自:http://blog.csdn.net/hekewangzi/article/details/45648579

  3. C++程序设计实践指导1.7超长数列中n个数排序改写要求实现

    改写要求1:将以上程序改写为适合超长整数 改写要求2:将以上程序改写为适合超长数列 改写要求3:将数列中指定位置m开始的n个结点重新按降序排序 改写要求4:输出指定位置m开始的n个结点的超长整数 #i ...

  4. linux学习笔记之硬盘分区

    引用:http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/03/2997098.html PS:本文仅对知识点作总结.详情请参考原文. 首先 ...

  5. Caused by: android.view.InflateException: Binary XML file line #12: Error inflating class android.support.design.widget.TabLayout，TableLayout引起页面崩溃

    在使用TableLayout的时候,运行引用程序直接Crash. FATAL EXCEPTION: main Process: com.edaixi.activity, PID: 9703 java. ...

  6. 资源回收 left

    select DISTINCT human.tid,log_pv_change.systafftid from human left join human_user on human.tid=huma ...

  7. PHP环境搭配

    电脑上如果有apache,必须先卸载了先,如果有集成的环境,类似于apmserver,也必须先停止先.不然安装的时候,会出现修复和卸载选项,而不是典型安装跟用户自定义安装. apache安装目录 E: ...

  8. Sql Server专题一：索引（中）

    写在前面的废话: 索引这个知识点,我前前后后不知道看了多少边,网上的文章五花八门,搞的我晕头转向,搞的牛逼点的就是测试索引带来的好处,还搞一大堆的测试数据出来,有意思吗?MS自己不会测试吗?这样的测试 ...

  9. [Django 1.5] jQuery/Ajax 在Django使用 ，如何更新模板里里变量

    最近希望实现一个页面局部刷新的功能,于是开始查阅ajax资料.幸好现在ajax很多功能都封装在jQuery这个库里面,我们可以很方便去调用.通过学习几个简单的小例子,可以实现简单的前端代码更新,还有重 ...

  10. pack布局

    Chapter 2. Geometry Management 第2章 布局管理: 显示部件在屏幕上,他们必须被传递给布局管理器. 布局管理器 控制部件的位置和大小 在显示窗口,几个布局管理器是可用的在 ...