javascript - .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

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

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 不会成功。