热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

基于jquery实现ajax无刷新评论

这篇文章主要为大家详细介绍了基于jquery实现ajax无刷新评论的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考

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

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

首先创建数据库“T_article”:

主键设置自增;

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

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

页面代码如下:

 

文章:

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!

然后创建两个一般处理程序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 用户ID:" + line[0] + "; 评论内容:" + line[1] + "; 评论时间:" + line[2] + "");
      $("#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 = $("
  • 用户ID:" + line[0] + "; 评论内容:" + line[1] + "; 评论时间:" + line[2] + "
  • "); $("#pinglunlist").append(pinglun); //把最后一条评论追加到ul上 } else { alert("ajax错误!"); } }) alert("评论成功!"); } else { alert("评论失败!"); } } }) }) })

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


    推荐阅读
    • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
    • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
    • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
    • 从零基础到精通的前台学习路线
      随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
    • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
    • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
    • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
    • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
    • POCOCLibraies属于功能广泛、轻量级别的开源框架库,它拥有媲美Boost库的功能以及较小的体积广泛应用在物联网平台、工业自动化等领域。POCOCLibrai ... [详细]
    • 我一直都有记录信息的习惯,不知是从什么时候开始,大约是在工作后不久。如今还真有点庆幸从那时开始记了点东西,当然是电子版的,写 ... [详细]
    • 用了element-ui的dialog组件加上canvas来绘图,在老版本 ... [详细]
    • 交换机配置:intg100unshintvlani1ipadd192.168.56.177qstelseuser-iv4authaaaproinsshupl3qsshuserpyt ... [详细]
    • asp.net(vb脚本)如何获取xml的节点值?xmlversion1.0encodingutf-8?rootimageimagemenusmenuurl#frame_paren ... [详细]
    • 使用ajax优化注册时用户名校验
      加注释的好处响应数据࿱ ... [详细]
    • 1.webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用(1) ... [详细]
    author-avatar
    waiwaiwai
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有