基于jquery实现ajax无刷新评论


Posted in Javascript onAugust 19, 2020

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

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

首先创建数据库“T_article”:

主键设置自增;

基于jquery实现ajax无刷新评论

然后创建一个强类型的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("评论失败!");
      }
     }
    })

   })
  })

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

Javascript 相关文章推荐
深入理解JavaScript定时机制
Oct 29 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
悬浮数字的实现案例
Feb 19 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
JS变量及其作用域
Mar 29 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
JavaScript代码性能优化总结篇
May 15 #Javascript
window.onload绑定多个事件的两种解决方案
May 15 #Javascript
js仿淘宝和百度文库的评分功能
May 15 #Javascript
RequireJS使用注意细节
May 15 #Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 #Javascript
jQuery插件开发汇总
May 15 #Javascript
Javascript的无new构建实例详解
May 15 #Javascript
You might like
以文件形式缓存php变量的方法
2015/06/26 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
ajax异步请求详解
2017/01/06 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python定位xpath 节点位置的方法
2019/08/27 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
大学班长的职责
2014/01/27 职场文书
婚礼主持结束词
2014/03/13 职场文书
杭白菊导游词
2015/02/10 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
校运会加油稿大全
2015/07/22 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
Python实现聚类K-means算法详解
2022/07/15 Python
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技