基于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 相关文章推荐
jquery 打开窗口返回值实现代码
Mar 04 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
微信小程序动态设置图片大小的方法
Nov 21 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP缓冲区用法总结
2016/02/14 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python实现图片上添加图片
2019/11/26 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
十八大报告观后感
2014/01/28 职场文书
人事部岗位职责范本
2014/03/05 职场文书
《穷人》教学反思
2014/04/08 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
JavaScript 对象创建的3种方法
2021/11/17 Javascript
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers