javascript - Jquery 在搜索表单上加载图像

Question

我想在使用单击按钮进行域搜索时显示loading.gif 图像。所以当php处理域名搜索请求时，加载图片出现，当搜索结果出现时加载图片消失。

以下代码来 self 的 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 编辑

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