.show（）在ajax调用后不工作

Question

好的，所以我试图在用户导航到我的页面然后提交表单时初始隐藏表格，然后使用Ajax处理它并显示结果表格。

但是，当我运行代码时，它刷新页面并默认显示无设置。

这里是我的CSS和JavaScript：

JS：

<script> 

     var frm = $('#myform'); 
     frm.submit(function() { 
      $('#loader').show(); 
      $('#results-table').hide(); 
      e.preventDefault(); 
      $.ajax({ 
       type: frm.attr('method'), 
       url: frm.attr('action'), 
       data: frm.serialize(), 
       async: true, 
       success: function (data) { 
        $('#loader').hide(); 
        $('#results-table').show(); 
        $("#results-table").html(data); 
       }, 

      }); 
      return false; 

     }); 

    </script> 

CSS：

 #results-table { 
     display: none; 

     } 

HTML：

<table class="table table-bordered table-striped table-hover table-responsive" id="results-table" > 

<form action="{% url 'results-view' %}" method="POST" class="autocomplete-me ui-widget" id="myform" > 

Answer 1

您需要防止的形式提交，通过将事件传递给fu并防止它：

var frm = $('#myform'); 
     frm.submit(function (e) { 
      e.preventDefault(); 
      $('#loader').show(); 
      $('#results-table').hide(); 
      e.preventDefault(); 
      $.ajax({ 
       type: frm.attr('method'), 
       url: frm.attr('action'), 
       data: frm.serialize(), 
       async: true, 
       success: function (data) { 
        $('#loader').hide(); 
        $('#results-table').show(); 
        $("#results-table").html(data); 
       }, 

      }); 
      return false; 
     }); 

return false不会伎俩。