自学MVC（九）：jquery里实现ajax无刷新发表评论,和异步获取评论,带loading-2009年05月22日

这是我从学mvc以来做得最艰苦的功能.

             一开始我为了解决无刷新提交数据,用了jquery的form插件.好不容易做好了.
           当我写延迟加载评论的特效时,和无刷新提交发生了冲突: 当我点击表单里的文本框时候就触发了loading动画,也就是ajaxStart事件被触发了
           我查了几天的资料,花了近一周的时间,才发现端倪.
           我的validate插件是会触发ajaxStart事件的.

           所以我放弃了
             jQuery().ajaxStart(function() {
             }).ajaxStop(function() {})
           这样的写法.
            自己去写ajax的post方法,把数据传递到一个页面(.aspx)或者一般程序文件(.ashx) 去处理.
            没有再用MVC里的Action 去处理数据,因为我发现 Action对评论是否成功的状态也就是发表评论后的返回消息不能很好处理.
           最后的解决方案如下:

           Html页面:
            <form id="commentForm" name="commentForm" method="POST" >
             <textarea id="content" name="content" title="请输入评论"></textarea>
            <button id="bt_comment" name="bt_comment"  type="submit"  >发表评论</button>
          </form>

         js代码:
       <script language="javascript">
      $().ready(function() {
         //页面初始化时获取评论内容
         getComments(0);
     });
     //获取评论内容
     function getComments(pageindex) {
         $.post("http://www.cnblogs.com/Services/GetComments.ashx", { Mid: <%= Model.Mid  %>, PageIndex: pageindex, PageSize: 10},
  function(data, textStatus) {
         $("#videobodycommentlist").text("");
      $("#videobodycommentlist").append(data.result);
  }, "json");
     }
</script>
<script language="javascript" type="text/javascript">
         jQuery(function() {
             var loader = jQuery('<div id="loader"><img src="http://images.cnblogs.com/loading.gif" alt="loading..."  align="absmiddle"/> 评论正在发表，请等待</div>')
   .appendTo("#commentLoading")
   .hide(); //加载一个loading动画,先隐藏起来
             $("#commentForm").validate({
                 errorElement: "reg",
                 success: function(label) {
                     label.text(" ").addClass("success");
                  
                 },
                 rules:
                         {
                             content: { required: true, minlength: 11 }
                         },
                 submitHandler: function(form) {  //在页面验证事件里注册一个提交事件,这个事件在表单数据验证通过才会触发
                 addComment(); //ajax提交数据
                 $("#commentForm").resetForm();//清空表单数据
             }
         });
     });
         function addComment() {
                     $("#bt_comment").attr("disabled", "disabled"); //把提交按钮禁用,防止用户反复提交
                     $("#loader").show();          //loading动画开始
                     $("#postcommentform").hide();
                     var datas = $("#commentForm").formToArray();        //用了jquery.form.js 插件里面的一个方法,把表单数据拼接起来
                     $.ajax({
                         type: "POST",
                         url: "http://www.cnblogs.com/Services/AddComment.ashx",
                         data: datas,
                         dataType: "json",
                         success: function(msg) {
                          
                             alert(msg.result);  //把返回消息弹出
                             $("#bt_comment").removeAttr("disabled");
                             $("#loader").hide();
                             $("#postcommentform").show();
                             getComments(0);  //重新获取评论数据.
                         }
                     });
            
         }
  </script>

<!--v:3.2-->

   本文版权属于www.51kancctv.com，williams所有，首发http://www.cnblogs.com/，转载请注明出处。