基于jquery实现ajax无刷新评论

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>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="1811740773"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
                  <div class="topcard-tags"></div>
                </div>
              </div>
          </div>
            
            <div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="1811740773"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="clearfix"></div>

            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <div class="title"><h1>相关文章</h1></div><div class="list_con">
                <img src="/res/2023/08-20/09/0b41967cceb677edce88b0f0cf4683c1.jpg" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="/ajax/4611348.html" title="ajax 上传文件项目下载">ajax 上传文件项目下载</a>
              </div>
              <div class="summary">IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但...</div>
            </div><div class="list_con">
                <img src="/res/2023/08-20/09/a0a6211b8638c200614e50d9c8a67135.jpg" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="/ajax/4611347.html" title="ajax .post()">ajax .post()</a>
              </div>
              <div class="summary">PHP中的count()函数是用来计算数组或容器中元素的个数。这个...</div>
            </div><div class="list_con">
                <img src="/res/2023/08-20/09/cbcc59446f42f59c3227261ca1de9d32.jpg" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="/ajax/4611346.html" title="ajax 不返回值 写法">ajax 不返回值 写法</a>
              </div>
              <div class="summary">使用 AJAX（Asynchronous JavaScript and XML）技术可以在不...</div>
            </div><div class="list_con">
                <img src="/res/2023/08-20/09/f1ef0ddff3ffeb80b1be4841dc198d3c.jpg" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="/ajax/4611345.html" title="ajax 下载文件 blob">ajax 下载文件 blob</a>
              </div>
              <div class="summary">Ajax（Asynchronous JavaScript and XML）是一种用于改进网页...</div>
            </div><div class="list_con">
                <img src="/res/2023/08-20/09/6980981f0fcd9e4a50856e14364c5c59.jpg" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="/ajax/4611344.html" title="ajax 下载excel文件流">ajax 下载excel文件流</a>
              </div>
              <div class="summary">本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以...</div>
            </div><div class="list_con">
                <img src="/res/2023/08-20/09/3159e114fae4646dc9b34d6229114163.jpg" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="/ajax/4611343.html" title="ajax .get .post">ajax .get .post</a>
              </div>
              <div class="summary">Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...</div>
            </div>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="1811740773"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
              </div>
            </div>
           
        </div>
      </div>
    <footer id="footer">
    <div class="container">
        <div class="copyright">
            Copyright © 2018 编程之家. 当前版本 V7.0.16<br>
            <span class="ml5">编程之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-8</a>
        </div>
    </div>
</footer>
<script src="/js/count.js"></script>
  </body>
</html>