基于jquery实现ajax无刷新评论

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

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

首先创建数据库“T_article”：

主键设置自增；

然后创建一个强类型的DataSet。

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

页面代码如下：

rush:xhtml;">

文章：

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!

glunlist">

<input id="btnpinglun" type="button"
    value="评论" />
</pre>
</div>
<p>然后创建两个一般处理程序WSXPL.ashx（用来插入数据的处理程序）和WSXPL1.ashx（用来<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>所有<a href="/tag/pinglun/" target="_blank" class="keywords">评论</a>数据的处理程序）；</p>
<p>WSXPL.ashx中的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下：</p>
<div class="jb51code">
<pre class="b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>: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.<a href="/tag/Now/" target="_blank" class="keywords">Now</a>); //创建<a href="/tag/yige/" target="_blank" class="keywords">一个</a>强类型的实例，然后<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>Insert()<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>插入；
      context.Response.Write("ok");
    }
</pre>
</div>
<p>WSXPL1.ashx中的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下：</p>
<div class="jb51code">
<pre class="b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>:csharp;">
    public void ProcessRequest(HttpContext context)
    {
      context.Response.ContentType = "text/plain";
      var datas = new T_articleTableAdapter().GetData(); //返回的是<a href="/tag/yige/" target="_blank" class="keywords">一个</a>DataTable
      StringBuilder sb = new StringBuilder(); //创建StringBuilder更加方便的搜集数据
      foreach (var data in datas)   //用foreach<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>遍历DataTable
      {//实现字符串的拼接；每行数据用$隔开，每行数据的每个元素用|隔开；有利于<a href="/tag/qiantai/" target="_blank" class="keywords">前台</a>解析数据；
        sb.Append(data.ipaddress).Append("|").Append(data.msg).Append("|").Append(data.posttime).Append("$");
      }
      context.Response.Write(sb);
    }
</pre>
</div>
<p>做完这些步骤，操作<a href="/tag/shujuku/" target="_blank" class="keywords">数据库</a>的部分就已经完成了。现在只要在<a href="/tag/qiantai/" target="_blank" class="keywords">前台</a>把一般处理程序返回的数据解析一下并附加的相应的位置就可以了！</p>
<p>首先在<a href="/tag/qiantai/" target="_blank" class="keywords">前台</a>引用“jquery-1.4.2.js”jquery库；然后开始编写js脚本；
</p>
<div class="jb51code">
<pre class="b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
$(function () {
      $.post("WSXPL1.ashx",function (data,status) { //通过WSXPL1.ashx<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>所有的<a href="/tag/pinglun/" target="_blank" class="keywords">评论</a><a href="/tag/neirong/" target="_blank" class="keywords">内容</a>
        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 pin<a href="/tag/glu/" target="_blank" class="keywords">glu</a>n = $("<li><a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>ID：" + line[0] + "； <a href="/tag/pinglun/" target="_blank" class="keywords">评论</a><a href="/tag/neirong/" target="_blank" class="keywords">内容</a>：" + line[1] + "； <a href="/tag/pinglun/" target="_blank" class="keywords">评论</a>时间：" + line[2] + "</li>");
            $("#pin<a href="/tag/glu/" target="_blank" class="keywords">glu</a>nlist").append(pin<a href="/tag/glu/" target="_blank" class="keywords">glu</a>n); //把得到的<a href="/tag/pinglun/" target="_blank" class="keywords">评论</a>结果追加到ul元素上
          }
        }
        else {
          alert("ajax<a href="/tag/cuowu/" target="_blank" class="keywords">错误</a>！");
        }
      })
<pre><code>  $("#btnpin<a href="/tag/glu/" target="_blank" class="keywords">glu</a>n").click(function () {  //设置btn事件
    var msg = $("#msg").val();
    $.post("ashx/WSXPL.ashx",{ "msg": msg },status) {
      if (status == "success") {
        if (data == "ok") {
          $.post("WSXPL1.ashx",status) { //为了实现<a href="/tag/pinglun/" target="_blank" class="keywords">评论</a>的时候<a href="/tag/pinglun/" target="_blank" class="keywords">评论</a><a href="/tag/neirong/" target="_blank" class="keywords">内容</a>会<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>的<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>到ul上
            if (status == "success") {
              var result = data.split("$");
              var msg = result[result.length - 2];    //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>最后一条<a href="/tag/pinglun/" target="_blank" class="keywords">评论</a>
              var line = msg.split("|");
              var pin<a href="/tag/glu/" target="_blank" class="keywords">glu</a>n = $("<li><a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>ID：" + line[0] + "； <a href="/tag/pinglun/" target="_blank" class="keywords">评论</a><a href="/tag/neirong/" target="_blank" class="keywords">内容</a>：" + line[1] + "； <a href="/tag/pinglun/" target="_blank" class="keywords">评论</a>时间：" + line[2] + "</li>");
              $("#pin<a href="/tag/glu/" target="_blank" class="keywords">glu</a>nlist").append(pin<a href="/tag/glu/" target="_blank" class="keywords">glu</a>n);   //把最后一条<a href="/tag/pinglun/" target="_blank" class="keywords">评论</a>追加到ul上
            }
            else {
              alert("ajax<a href="/tag/cuowu/" target="_blank" class="keywords">错误</a>！");
            }
          })
          alert("<a href="/tag/pinglun/" target="_blank" class="keywords">评论</a>成功！");
        }
        else {
          alert("<a href="/tag/pinglun/" target="_blank" class="keywords">评论</a>失败！");
        }
      }
    })

})
})</code></pre>
</pre>
</div>
<p>做完这些直接运行就可以了！
以上就是本文的全部<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助。</p><ins class="adsbygoogle"
                     style="display:inline-block;width:780px;height:90px"
                     data-ad-client="ca-pub-4605373693034661"
                     data-ad-slot="4286417769"></ins>
                <script>
                     (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
                                 <p class="small text-muted">版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。</p>
                            </div><div class="topcard-tags"><a href="/tag/ajaxp/" class="tag_link" target="_blank">ajax</a><a href="/tag/jqueryp/" class="tag_link" target="_blank">jquery</a><a href="/tag/wushuaxin/" class="tag_link" target="_blank">无刷新</a><a href="/tag/pinglun/" class="tag_link" target="_blank">评论</a></div></div>
                    </div>
                </div>
                <div class="row row-sm">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <div class="card">
                            <h4>相关推荐</h4>
                            <hr /><div class="list_con">
                                 <a href="/ajax/4611348.html" title="ajax 上传文件项目下载"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-20/09/0b41967cceb677edce88b0f0cf4683c1.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;"  loading="lazy"/><div class="title">ajax 上传文件项目下载</div>
                                <div class="summary">IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。</div>
                  <time class="summary">作者：编程之家 时间：2023-08-20</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="/ajax/4611347.html" title="ajax .post()"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-20/09/a0a6211b8638c200614e50d9c8a67135.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;"  loading="lazy"/><div class="title">ajax .post()</div>
                                <div class="summary">PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松</div>
                  <time class="summary">作者：编程之家 时间：2023-08-20</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="/ajax/4611346.html" title="ajax 不返回值 写法"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-20/09/cbcc59446f42f59c3227261ca1de9d32.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;"  loading="lazy"/><div class="title">ajax 不返回值 写法</div>
                                <div class="summary">使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要</div>
                  <time class="summary">作者：编程之家 时间：2023-08-20</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="/ajax/4611345.html" title="ajax 下载文件 blob"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-20/09/f1ef0ddff3ffeb80b1be4841dc198d3c.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;"  loading="lazy"/><div class="title">ajax 下载文件 blob</div>
                                <div class="summary">Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统</div>
                  <time class="summary">作者：编程之家 时间：2023-08-20</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="/ajax/4611344.html" title="ajax 下载excel文件流"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-20/09/6980981f0fcd9e4a50856e14364c5c59.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;"  loading="lazy"/><div class="title">ajax 下载excel文件流</div>
                                <div class="summary">本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详</div>
                  <time class="summary">作者：编程之家 时间：2023-08-20</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="/ajax/4611343.html" title="ajax .get .post"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-20/09/3159e114fae4646dc9b34d6229114163.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;"  loading="lazy"/><div class="title">ajax .get .post</div>
                                <div class="summary">Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请</div>
                  <time class="summary">作者：编程之家 时间：2023-08-20</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="/ajax/4611342.html" title="ajax 上传 excel"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-20/09/6f61dae2ee52fc8b9201ca85c158a5a9.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;"  loading="lazy"/><div class="title">ajax 上传 excel</div>
                                <div class="summary">AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、</div>
                  <time class="summary">作者：编程之家 时间：2023-08-20</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="/ajax/4611341.html" title="ajax 下拉 360取不到值"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-20/09/d80af3ac3548816520325899ed1d976d.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;"  loading="lazy"/><div class="title">ajax 下拉 360取不到值</div>
                                <div class="summary">在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当</div>
                  <time class="summary">作者：编程之家 时间：2023-08-20</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="/ajax/4611340.html" title="ajax 与 .post 区别"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-20/09/b27c3dec7a33cf54defc065c0e5e9de2.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;"  loading="lazy"/><div class="title">ajax 与 .post 区别</div>
                                <div class="summary">本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步</div>
                  <time class="summary">作者：编程之家 时间：2023-08-20</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="/ajax/4611339.html" title="ajax 上传文件 目录权限"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-20/09/a001194b3be17e670af7e1e0d8deda84.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;"  loading="lazy"/><div class="title">ajax 上传文件 目录权限</div>
                                <div class="summary">AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，</div>
                  <time class="summary">作者：编程之家 时间：2023-08-20</time>
                                </a>
                            </div></div>
                    </div>
</div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-3">
              
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="7541177540"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
              </div>
            </div>
          </div>
          
           
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card" style="padding:20px;">
                <label class="main-content-label ">小编推荐</label><div class="entry-img"><img src="/res/2023/06-29/12/fa513c17761076a6649593e2bd17f268.jpg" height="150" width="100%"><div class="entry-wrap"><a href="/mp/4606010.html" title="苹果市值2025年有望达4万亿美元" >苹果市值2025年有望达4万亿美元</a> </div></div><ul class="n-list"><li><a href="/mp/4857821.html" title="格力主导，全球制冷压缩机领域ISO标准实现“零”的突破" >• 格力主导，全球制冷压缩机领域ISO标准实</a></li><li><a href="/mp/4857820.html" title="英伟达旗舰显卡价格松动，RTX 5090降价趋势初显" >• 英伟达旗舰显卡价格松动，RTX 5090降价</a></li><li><a href="/mp/4857819.html" title="英伟达特供中国的B20/B40 spec分析" >• 英伟达特供中国的B20/B40 spec分析</a></li><li><a href="/mp/4857818.html" title="中国显示技术助力FIFA世俱杯VAR系统 为精准判罚提供支持" >• 中国显示技术助力FIFA世俱杯VAR系统 为</a></li><li><a href="/mp/4857817.html" title="Meta买下Scale AI半壁江山，谷歌据称准备斩断合作关系" >• Meta买下Scale AI半壁江山，谷歌据称准</a></li><li><a href="/mp/4857816.html" title="炸裂！Claude以第一作者写论文反驳苹果“推理模型根本没有推理能力”：苹果有三大错误" >• 炸裂！Claude以第一作者写论文反驳苹果</a></li><li><a href="/mp/4857815.html" title="李飞飞：创办World Labs的初衷，就是想无所畏惧地解决空间智能问题，没有空间智能，AI将是不完整的" >• 李飞飞：创办World Labs的初衷，就是想</a></li></ul>
              </div>
            </div>
          </div>
          
          
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <label class="main-content-label ">热门标签<a href="/all" class="pull-right">更多</a>
                </label>
                <div class="topcard-tags"><a href="/tag/python/" title="python">python</a><a href="/tag/JavaScript/" title="JavaScript">JavaScript</a><a href="/tag/java/" title="java">java</a><a href="/tag/HTML/" title="HTML">HTML</a><a href="/tag/reactjs/" title="reactjs">reactjs</a><a href="/tag/C/" title="C#">C#</a><a href="/tag/Android/" title="Android">Android</a><a href="/tag/CSS/" title="CSS">CSS</a><a href="/tag/Nodejs/" title="Node.js">Node.js</a><a href="/tag/sql/" title="sql">sql</a><a href="/tag/rp/" title="r">r</a><a href="/tag/python3x/" title="python-3.x">python-3.x</a><a href="/tag/MysqL/" title="MysqL">MysqL</a><a href="/tag/jQuery/" title="jQuery">jQuery</a><a href="/tag/c4343/" title="c++">c++</a><a href="/tag/pandas/" title="pandas">pandas</a><a href="/tag/flutter/" title="Flutter">Flutter</a><a href="/tag/angular/" title="angular">angular</a><a href="/tag/IOS/" title="IOS">IOS</a><a href="/tag/django/" title="django">django</a><a href="/tag/linux/" title="linux">linux</a><a href="/tag/swift/" title="swift">swift</a><a href="/tag/typescript/" title="typescript">typescript</a><a href="/tag/luyouqi/" title="路由器">路由器</a><a href="/tag/JSON/" title="JSON">JSON</a><a href="/tag/luyouqishezhi/" title="路由器设置">路由器设置</a><a href="/tag/wuxianluyouqi/" title="无线路由器">无线路由器</a><a href="/tag/h3c/" title="h3c">h3c</a><a href="/tag/huasan/" title="华三">华三</a><a href="/tag/huasanluyouqishezhi/" title="华三路由器设置">华三路由器设置</a><a href="/tag/huasanluyouqi/" title="华三路由器">华三路由器</a><a href="/tag/diannaoruanjianjiaocheng/" title="电脑软件教程">电脑软件教程</a><a href="/tag/arrays/" title="arrays">arrays</a><a href="/tag/docker/" title="docker">docker</a><a href="/tag/ruanjiantuwenjiaocheng/" title="软件图文教程">软件图文教程</a><a href="/tag/C/" title="C">C</a><a href="/tag/vuejs/" title="vue.js">vue.js</a><a href="/tag/laravel/" title="laravel">laravel</a><a href="/tag/springboot/" title="spring-boot">spring-boot</a><a href="/tag/reactnative/" title="react-native">react-native</a></div>
              </div>
            </div>
          </div>
</div>
        </div>
    </div>
    <footer id="footer">
    <div class="container" style="width:1440px;">
        <div class="row hidden-xs">
            <div class="col-sm-12 col-md-9 col-lg-9 site-link">
                <ul class="list-inline">
                    <li>友情链接:</li></ul>
                <ul class="list-inline">
                    <li><a href="" title="编程之家">编程之家</a></li>-<li><a href="https://t5m44pq3f7.jiandaoyun.com/f/638ca61b7b079a000a5d2dd6" rel="nofollow" title="我要投稿" target="_blank">我要投稿</a></li>-<li><a target="_blank" rel="nofollow" href="https://t5m44pq3f7.jiandaoyun.com/f/638ca8c69ad234000a79561f" title="广告合作">广告合作</a></li>-<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></li>-<li><a href="/disclaimers.html" title="免责声明">免责声明</a></li>-<li><a href="/sitemap/all/index.xml" title="网站地图" target="_blank">网站地图</a></li>
                </ul>
                <div>版权所有 © 2018编程之家<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a>
                </div>
            </div>
            <div class="col-sm-12 col-md-3 col-lg-3"><img src="/qrcode.jpg" width="90" alt="微信公众号搜索 “ 程序精选 ” ，选择关注！">
                <div class="pull-right">微信公众号搜<span class="text-danger">"智元新知"</span>关注<br />微信扫一扫可直接关注哦！</div>
            </div>
        </div>
    </div>
</footer>
<script src="/js/count.js"></script>
    
</body>
</html><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"95d0ced75bc528c0","version":"2025.6.2","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfEdge":true,"cfOrigin":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"a492ad3e807e4a89b38d4923bc282b96","b":1}' crossorigin="anonymous"></script>