博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【JAVASCRIPT】jquery实现ajax无刷新评论
阅读量:6371 次
发布时间:2019-06-23

本文共 4016 字,大约阅读时间需要 13 分钟。

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

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

首先创建数据库“T_article”:

主键设置自增;

然后创建一个强类型的DataSet,关于怎么创建强类型的DataSetnet小伙在中已经写过;

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

页面代码如下:

前台布局代码
1     
2

文章:

3

this a text!this a text!this a text!this a text!this a text!this a text!this a text!this a text! 4 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! 5 this a text!this a text!this a text!this a text!this a text!this a text!

6
    7
8
9 10

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

WSXPL.ashx中的代码如下:

执行插入数据处理程序
1         public void ProcessRequest(HttpContext context)2         {3             context.Response.ContentType = "text/plain";4             string msg = context.Request["msg"];5             new T_articleTableAdapter().Insert(context.Request.UserHostAddress, msg, DateTime.Now); //创建一个强类型的实例,然后调用Insert()函数插入;6             context.Response.Write("ok");7         }

WSXPL1.ashx中的代码如下:

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

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

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

1         $(function () { 2             $.post("WSXPL1.ashx", function (data, status) { //通过WSXPL1.ashx获取所有的评论内容 3                 if (status == "success") { 4                     var result = data.split("$");   //按照$分割字符串 5                     for (var i = 0; i < result.length - 1; i++) { 6                         var msg = result[i]; 7                         var line = msg.split("|");      //按照|分割字符串 8                         var pinglun = $("
  • 用户ID:" + line[0] + "; 评论内容:" + line[1] + "; 评论时间:" + line[2] + "
  • "); 9 $("#pinglunlist").append(pinglun); //把得到的评论结果追加到ul元素上10 }11 }12 else {13 alert("ajax错误!");14 }15 })16 17 $("#btnpinglun").click(function () { //设置btn事件18 var msg = $("#msg").val();19 $.post("ashx/WSXPL.ashx", { "msg": msg }, function (data, status) {20 if (status == "success") {21 if (data == "ok") {22 $.post("WSXPL1.ashx", function (data, status) { //为了实现评论的时候评论内容会自动的添加到ul上23 if (status == "success") {24 var result = data.split("$");25 var msg = result[result.length - 2]; //获取最后一条评论26 var line = msg.split("|");27 var pinglun = $("
  • 用户ID:" + line[0] + "; 评论内容:" + line[1] + "; 评论时间:" + line[2] + "
  • ");28 $("#pinglunlist").append(pinglun); //把最后一条评论追加到ul上29 }30 else {31 alert("ajax错误!");32 }33 })34 alert("评论成功!");35 }36 else {37 alert("评论失败!");38 }39 }40 })41 42 })43 })

    做完这些直接运行就可以了!

    转载地址:http://mruqa.baihongyu.com/

    你可能感兴趣的文章
    Python import其他文件夹的文件
    查看>>
    Jvm(22),回收策略-----标记清除算法
    查看>>
    MySQL多表关联查询效率高点还是多次单表查询效率高,为什么?
    查看>>
    UNIX 高手的 10 个习惯
    查看>>
    传值与传引用
    查看>>
    HDU 1538 A Puzzle for Pirates(海盗分金问题)
    查看>>
    C# Web Forms - Using jQuery FullCalendar
    查看>>
    Sublime-Text-2-pydocstring --- 自动生成python docstring的插件
    查看>>
    UNIX进程环境
    查看>>
    学习面试题Day03
    查看>>
    我最喜欢的jQuery插件模板
    查看>>
    【云计算】Docker 多进程管理方案
    查看>>
    [LeetCode] Best Meeting Point 最佳开会地点
    查看>>
    基于InstallShield2013LimitedEdition的安装包制作
    查看>>
    【转】从Shell脚本内部将所有标准输出及标准错误显示在屏幕并同时写入文件的方法...
    查看>>
    iOS开发小技巧--利用MJExtension解决数据结构复杂的模型转换
    查看>>
    Python中的图形库
    查看>>
    Linux操作系统分析 ------------------中国科技大学
    查看>>
    Apache多站点实现原理和配置
    查看>>
    javascript类型系统——包装对象
    查看>>