基于jquery实现ajax无刷新评论

 更新时间:2020年08月19日 11:49:35   作者:net小伙  
这篇文章主要为大家详细介绍了基于jquery实现ajax无刷新评论的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考

jquery实现ajax无刷新评论需要用的技术:(本次试验用的是“jquery-1.4.2.js”版本的jquery)

$.post("一般处理程序路径",{以字典的形式传递参数},function(data,status){``````});
jquery中的基本选择器操作;

首先创建数据库“T_article”:

主键设置自增;

然后创建一个强类型的DataSet。

接着创建一个“无刷新评论.aspx”页面:

页面代码如下:

 <div>
  <h2>文章:</h2>
  <p>this a text!this a text!this a text!this a text!this a text!this a text!this a text!this a text!
  this a text!this a text!this a text!this a text!this a text!this a text!this a text!this a text!this a text!
  this a text!this a text!this a text!this a text!this a text!this a text!</p>
  <ul id="pinglunlist">
  </ul>
 </div>
 <textarea id="msg" style="margin-left:20px;" cols="40" rows="10"></textarea>
 <input id="btnpinglun" type="button"
  value="评论" />

然后创建两个一般处理程序WSXPL.ashx(用来插入数据的处理程序)和WSXPL1.ashx(用来获取所有评论数据的处理程序);

WSXPL.ashx中的代码如下:

  public void ProcessRequest(HttpContext context)
  {
   context.Response.ContentType = "text/plain";
   string msg = context.Request["msg"];
   new T_articleTableAdapter().Insert(context.Request.UserHostAddress, msg, DateTime.Now); //创建一个强类型的实例,然后调用Insert()函数插入;
   context.Response.Write("ok");
  }

WSXPL1.ashx中的代码如下:

  public void ProcessRequest(HttpContext context)
  {
   context.Response.ContentType = "text/plain";
   var datas = new T_articleTableAdapter().GetData(); //返回的是一个DataTable
   StringBuilder sb = new StringBuilder(); //创建StringBuilder更加方便的搜集数据
   foreach (var data in datas)  //用foreach方法遍历DataTable
   {//实现字符串的拼接;每行数据用$隔开,每行数据的每个元素用|隔开;有利于前台解析数据;
    sb.Append(data.ipaddress).Append("|").Append(data.msg).Append("|").Append(data.posttime).Append("$");
   }
   context.Response.Write(sb);
  }

做完这些步骤,操作数据库的部分就已经完成了。现在只要在前台把一般处理程序返回的数据解析一下并附加的相应的位置就可以了!

首先在前台引用“jquery-1.4.2.js”jquery库;然后开始编写js脚本;

$(function () {
   $.post("WSXPL1.ashx", function (data, status) { //通过WSXPL1.ashx获取所有的评论内容
    if (status == "success") {
     var result = data.split("$"); //按照$分割字符串
     for (var i = 0; i < result.length - 1; i++) {
      var msg = result[i];
      var line = msg.split("|");  //按照|分割字符串
      var pinglun = $("<li>用户ID:" + line[0] + "; 评论内容:" + line[1] + "; 评论时间:" + line[2] + "</li>");
      $("#pinglunlist").append(pinglun); //把得到的评论结果追加到ul元素上
     }
    }
    else {
     alert("ajax错误!");
    }
   })

   $("#btnpinglun").click(function () { //设置btn事件
    var msg = $("#msg").val();
    $.post("ashx/WSXPL.ashx", { "msg": msg }, function (data, status) {
     if (status == "success") {
      if (data == "ok") {
       $.post("WSXPL1.ashx", function (data, status) { //为了实现评论的时候评论内容会自动的添加到ul上
        if (status == "success") {
         var result = data.split("$");
         var msg = result[result.length - 2];  //获取最后一条评论
         var line = msg.split("|");
         var pinglun = $("<li>用户ID:" + line[0] + "; 评论内容:" + line[1] + "; 评论时间:" + line[2] + "</li>");
         $("#pinglunlist").append(pinglun);  //把最后一条评论追加到ul上
        }
        else {
         alert("ajax错误!");
        }
       })
       alert("评论成功!");
      }
      else {
       alert("评论失败!");
      }
     }
    })

   })
  })

做完这些直接运行就可以了!
以上就是本文的全部内容,希望对大家的学习有所帮助。

相关文章

  • 10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)

    10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)

    这篇文章与大家分享的是10款新鲜出炉的基于 jQuery 开发的 Ajax 插件,有幻灯片、图片画廊、菜单等很多有用的插件。这些作者的想法特别新颖,希望你能从中找到自己需要的插件。
    2011-06-06
  • jqueryMobile使用示例分享

    jqueryMobile使用示例分享

    这里是本人学习jQuery Mobile的过程,现在将学习过程中的实例一一展现出来,希望能帮到更多的新手。本系列中实例都经过了本人的亲自测试。
    2016-01-01
  • jQuery is()函数用法3例

    jQuery is()函数用法3例

    这篇文章主要介绍了jQuery is()函数用法3例,jQuery的is()函数其实是非常有用的,能不能用好直接决定你的代码是否高效,需要的朋友可以参考下
    2014-05-05
  • jQuery实现的淡入淡出图片轮播效果示例

    jQuery实现的淡入淡出图片轮播效果示例

    这篇文章主要介绍了jQuery实现的淡入淡出图片轮播效果,涉及jQuery基于定时器的页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • 精心挑选的15款优秀jQuery 本特效插件和教程

    精心挑选的15款优秀jQuery 本特效插件和教程

    今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果
    2012-08-08
  • 实用的Jquery选项卡TAB示例代码

    实用的Jquery选项卡TAB示例代码

    Jquery选项卡想必大家并不陌生,本文为大家介绍个比较实用的jquery TAB选项卡,喜欢的朋友可以学习下
    2013-08-08
  • 简单的jquery拖拽排序效果实现代码

    简单的jquery拖拽排序效果实现代码

    写了简单的跟随鼠标移动效果。这个拖拽排序的效果的区别在于: 运用了插入insertBefore 和 insertAfter 的方法
    2011-09-09
  • jQuery树形下拉菜单特效代码分享

    jQuery树形下拉菜单特效代码分享

    这篇文章主要介绍了jQuery实现幻树形下拉菜单特效,代码简单,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • 一文带你详细了解jQuery

    一文带你详细了解jQuery

    jQuery是一个JavaScript库,它简化了客户端JavaScript编程的过程,特别是针对HTML文档遍历和操作、事件处理、动画效果和Ajax操作。感兴趣的小伙伴可以参考阅读
    2023-04-04
  • jquery操作checkbox实现全选和取消全选

    jquery操作checkbox实现全选和取消全选

    这篇文章主要介绍了jquery操作checkbox实现全选和取消全选,需要的朋友可以参考下
    2014-05-05

最新评论