javascript - 表单提交后加载 Ajax

Question

我想在提交表单后显示加载图像。这是我当前的代码(我正在使用 Bootstrap):

<form method="GET" action="/search/results" id="searchform">
        <div class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="name" name="name" placeholder="Search" style="min-width: 300px;" required autofocus>
        </div>
        <button type="submit" class="btn btn-dark btn-md">Search</button>
        </div>
        <br>
        <div class="form-group">
            <h4 class="text-muted">Scoring Type</h4>
            <label class="radio-inline">
                <input type="radio" name="scoring" id="standard" value="standard" checked> Standard
            </label>
            <!-- other radio options -->
        </div>
</form>
<br>
<div class="modal">
</div>
<style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: rgba( 255, 255, 255, .8 ) 
                        url("{% static 'img/loading.gif' %}") 
                        50% 50% 
                        no-repeat;
            }
        body.loading {
            overflow: hidden;   
        }
        body.loading .modal {
            display: block;
        }
</style>

表单提交到名为/search/results 的页面，但我希望使用 ajax 加载该页面。加载完成后，我想用包含结果的网页完全替换搜索网页。在加载时，我希望应用 $('body').addClass('loading');，这将以我想要的方式显示加载图标(我不希望进行任何更改在 css 中，它按我想要的方式工作)。我找遍了所有地方，但似乎找不到适合我的解决方案。谢谢。

Answer 1

为确保表单不会像正常表单一样提交:删除 method="GET";

 <form action="/search/results" id="searchform">

Js:

$("#searchform").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this );
  var url = $form.attr( "action" );
  //before send
  $("body").addClass("loading");

  /* Send the data using post */
  var posting = $.post(url , $( "#searchform" ).serialize() );

  /* Alerts the results */
  posting.done(function( data ) {
     //use data
     $("body").removeClass("loading");

  });
});