热门标签 | 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("评论失败!"); } } }) }) })

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


    推荐阅读
    • 深入解析ES6至ES8的新特性与应用
      本文详细介绍了自2015年发布的ECMAScript 6.0(简称ES6)以来,JavaScript语言的多项重要更新,旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]
    • 深入分析十大PHP开发框架
      随着PHP技术的发展,各类开发框架层出不穷,成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架,旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细]
    • 探讨在 Vue 框架中遇到的数据更新延迟或失败的问题,并提供解决方案。 ... [详细]
    • C# 对象转 JSON 字符串的方法与应用
      本文介绍如何在 C# 中使用一般处理程序(ASHX)将对象转换为 JSON 字符串,并通过设置响应类型为 application/json 来确保客户端能够正确解析返回的数据。同时,文章还提供了 HTML 页面中不依赖 jQuery 的 AJAX 方法来接收和处理这些 JSON 数据的具体实现。 ... [详细]
    • 本文深入探讨了 Prototype.js 框架及其与 JavaScript 原生 toString() 方法之间的区别,适合对前端开发感兴趣的开发者阅读。文章将帮助读者理解两者在功能实现和应用场景上的不同,从而更好地利用这些工具进行高效编程。 ... [详细]
    • 我有这种ajax$.ajax({type:"POST",url:"bee_sesi_edit.php&# ... [详细]
    • 深入解析Axios与jQuery的核心差异
      本文详细对比了Axios与jQuery在Web前端开发中的应用,探讨两者在异步请求处理、数据封装及请求方式上的不同之处。 ... [详细]
    • jQuery 1.4.4 已经发布,这是自 1.4.3 版本以来不到一个月的又一更新。本次更新主要集中在基于用户反馈的错误修复,并引入了一项新的功能。 ... [详细]
    • Web前端性能提升指南:简化JavaScript与消除重复脚本
      本文为Web前端性能优化系列的第七篇,重点探讨简化JavaScript代码及清除重复脚本的方法。通过这些技术,可以显著提高网页加载速度和用户体验。了解更多信息,请参阅我们的完整指南:Web前端性能优化。 ... [详细]
    • 文章目录17、less17-UpdateQuery-Errorbased-String18、less18-HeaderInjection-ErrorBased-string19、l ... [详细]
    • 使用原生 AJAX 处理文件下载与 IE 浏览器图片显示问题
      本文探讨了如何利用原生 AJAX 实现文件的 POST 或 GET 请求下载,并监控下载状态。同时,针对 IE 浏览器及部分移动设备浏览器因路径问题导致图片无法正常显示的情况,提供了有效的解决方案。 ... [详细]
    • DWR(Direct Web Remoting)是一个用于简化Web应用中JavaScript与Java服务器端交互的Ajax库。本文通过一个简单的示例,展示如何使用DWR框架实现基本的Ajax功能。 ... [详细]
    • 本文详细介绍了在PHP中实现轮询的各种方法,包括短轮询、长轮询以及结合数据库的应用场景,适合不同需求的技术人员参考。 ... [详细]
    • C++网络编程:连接成功后的回调机制及前端视角下的异步编程解析
      本文探讨了C++网络编程中连接成功后的回调机制,并从一个前端开发者的角度深入浅出地介绍了异步编程的基本概念及其重要性,特别强调了JavaScript中异步编程的各种实现方式。 ... [详细]
    • 本文详细介绍了Java库com.linecorp.armeria.client.Endpoint中的withIpAddr()方法的使用方式,并提供了多个实际代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
    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社区 版权所有