jQuery的加载图像在搜索表单

Question

我希望做一个域搜索与点击按钮时，显示loading.gif图像。所以，当PHP处理域名搜索请求，加载图像出现，当显示搜索结果中消失。

下面从我的PHP页面的代码：

<form class="form-full-width" method="post">
 <div class="group align-center form-row">
  <input autofocus class="group-stretch" type="text" name="domain" placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
   <input type="hidden" name="token" value="70ed0e77d1b8f7124c494a970929ccb2">
    <button class="button-secondary"> Search </button>
 </div>
 </form>

---

这是点击搜索按钮后的结果，会点击搜索按钮后，出现约5-30秒

$response = '<section class="content-row">
   <div class="container">
     <center>
       <header class="content-header">
         <h3><i class="fa fa-check text-color-success icon-left"></i> Selamat! Domain <b class="text-color-primary">'.$domain.'</b> Tersedia</h3>
           <h4>Hanya dengan <b>Rp. 200.000</b> / tahun</h4>
             <p>
              <a href="member.domain.com/cart.php?a=add&amp;domain=register&amp;sld='.$domain.'" class="button button-primary">
              <i class="fa fa-shopping-cart icon-left"></i>DAFTARKAN
              </a>
             </p>
             <p>
            atau<br><a href="#saran">Lihat saran domain lainnya <i class="fa fa-angle-double-right"></i></a>
             </p>
         </header>
       </center>
     </div>
  </section>

---

使用Javascript

  <script type="text/javascript">
    $( document ).ready(function() {
       $('.button-secondary').click(function(){
          var domain = $('input[name=domain]').val()

            $.get( "cari-domain-function.php?domain="+domain, function( data ) {
            $( "section.content-row-gray" ).html(data);
                });

              event.preventDefault();
            })
        });
  </script>

Answer 1

添加<img id='loading' src='loading.gif' style='display:none' >隐藏图像，然后当搜索提示添加这对你的脚本$("#loading").css("display","block");后来当PHP请求结束$("#loading").css("display","none");，希望工程

HTML

    <form class="form-full-width" method="post">
     <img id='loading' src='loading.gif' style='display:none' >
     <div class="group align-center form-row">
       <input autofocus class="group-stretch" type="text" name="domain" 
         placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
        <input type="hidden" name="token" 
          value="70ed0e77d1b8f7124c494a970929ccb2">
        <button class="button-secondary"> Search </button>
      </div>
    </form>

JQuery的

<script type="text/javascript">
$( document ).ready(function() {
  $('.button-secondary').click(function(){
    $("#loading").css("display","block");
    var domain = $('input[name=domain]').val()

    $.get( "cari-domain-function.php?domain="+domain, function( data ) {
      $( "section.content-row-gray" ).html(data);
      $("#loading").css("display","none"); 
    });

    event.preventDefault();
  })
});
</script>

JQuery的EDIT

<script type="text/javascript">
$( document ).ready(function() {
  $(document).on('click','.button-secondary',function(){
    $("#loading").css("display","block");
    var domain = $('input[name=domain]').val()

    $.get( "cari-domain-function.php?domain="+domain, function( data ) {
      $( "section.content-row-gray" ).html(data);
      $("#loading").css("display","none"); 
    });

    event.preventDefault();
  })
});
</script>