Question

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

但是，当我运行代码时，它会刷新页面并默认为display none设置。

这是我的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

您需要通过将事件传递给函数并阻止它来阻止表单提交：

prop

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; });没有做到这一点。

.show（）在ajax调用后无法正常工作

1 个答案: