基于jquery实现ajax无刷新评论

发布时间：2020-12-15 23:27:06 所属栏目：百科来源：网络整理

导读：jquery实现ajax无刷新评论需要用的技术：（本次试验用的是“jquery-1.4.2.js”版本的jquery） $.post("一般处理程序路径",{以字典的形式传递参数},function(data,status){``````});jquery中的基本选择器操作；首先创建数据库“T_article”：主键设置自增；

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!

<input id="btnpinglun" type="button"
    value="评论" />
</pre>
</div>
<p>然后创建两个一般处理程序WSXPL.ashx（用来插入数据的处理程序）和WSXPL1.ashx（用来获取所有评论数据的处理程序）；</p>
<p>WSXPL.ashx中的代码如下：</p>
<div class="jb51code">
<pre class="brush:csharp;">
    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");
    }
</pre>
</div>
<p>WSXPL1.ashx中的代码如下：</p>
<div class="jb51code">
<pre class="brush:csharp;">
    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);
    }
</pre>
</div>
<p>做完这些步骤，操作数据库的部分就已经完成了。现在只要在前台把一般处理程序返回的数据解析一下并附加的相应的位置就可以了！</p>
<p>首先在前台引用“jquery-1.4.2.js”jquery库；然后开始编写js脚本；
</p>
<div class="jb51code">
<pre class="brush: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错误！");
        }
      })
<pre><code>  $("#btnpinglun").click(function () {  //设置btn事件
    var msg = $("#msg").val();
    $.post("ashx/WSXPL.ashx",{ "msg": msg },status) {
      if (status == "success") {
        if (data == "ok") {
          $.post("WSXPL1.ashx",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("评论失败！");
        }
      }
    })

})
})</code></pre>
</pre>
</div>
<p>做完这些直接运行就可以了！
以上就是本文的全部内容，希望对大家的学习有所帮助。</p>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/223014.html" target="_blank">Swift - 数组排序方法（附样例）</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/398506.html" target="_blank">c# – 使用偏航和俯仰创建旋转矩阵并模拟FPS摄像机</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/236417.html" target="_blank">KBEngine Cocos2d JS 客户端启动过程</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/247266.html" target="_blank">【cocos2dx之CCAnimation、CCAnimate、CCAnimationCache使用</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/486992.html" target="_blank">c – 限制不同计算机上的游戏速度</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/402311.html" target="_blank">Dwr的简单配置及运行。</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/469515.html" target="_blank">XML解析之PULL解析</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/428838.html" target="_blank">【分享】分享一个发送ajax请求的dom</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/350528.html" target="_blank">c# – 从VSPackage获取Visual Studio颜色方案</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/374205.html" target="_blank">c# – Azure WebJobs和ServiceBusTrigger</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/386905.html" target="_blank">c# – Windows.Form ComboBox无法设置Unbound Co</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/53803.html" target="_blank">Oracle游标遍历</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/401388.html" target="_blank">样式、主题、原始XML资源、Android程序国际化、M</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/250554.html" target="_blank">objective-c – 从NSString调试EXC_BAD_ACCESS</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/343321.html" target="_blank">&#34;Insufficient RAM for Flash Algorithms&#3</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/436292.html" target="_blank">PC端 微信支付 扫码之后页面跳转处理</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/423972.html" target="_blank">[C#.Net][VB.NET] 换行使用 Environment.NewLine</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/221406.html" target="_blank">swift将struct转化为json</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/313204.html" target="_blank">Flex中使用模块Module的例子</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/293604.html" target="_blank">ios – Xcode 4.6 xcode更新后的zXing编译错误(4</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>