php執行時，jQuery“請等待”

Question

我有一個連接到PayPal api的腳本來檢查有效的信用卡輸入。 該腳本可能需要大約5秒鍾才能執行，並且為了防止用戶多次點擊“提交”，如果他們沒有看到立即響應，我想放置一個“請稍候”指示符。

我有一個div，“pleaseWait”是隱藏的。 在jQuery我有：

$('#submit').click(function(){
    $('#pleaseWait').show();
});

唯一的問題是如果有問題，它將發回php錯誤，“請等待”將繼續在屏幕上。 我決定嘗試另一種方法，並在腳本開始運行后在php中回顯jQuery，並在出現錯誤時隱藏它。

 /* Echo the jQuery so the "Please wait" indicator will show on screen */
 echo "<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js\"></script>";
 echo "<script type='text/javascript' charset='utf-8'>";
 echo "\$(document).ready(function(){";
 echo "\$('#pleaseWait').show();";
 echo "});";
 echo "</script>";


 if($error == ""){

      /* There is not an error, run php. */

 }else{
      /* There was an error, stop the jQuery from displaying the "please wait" and display the error */
      echo "<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js\"></script>";
      echo "<script type='text/javascript' charset='utf-8'>";
      echo "\$(document).ready(function(){";
      echo "\$('#pleaseWait').hide();";
      echo "});";
      echo "</script>";
 }

這可以工作，但似乎非常混亂。 除了PHP中的多個回聲之外，還有更好的方法嗎？

Answer 1

嘗試使用ajax

$('#submit').click(function(){
    $('#pleaseWait').show();
    $.post('url',card,function(data){
         $('#pleaseWait').hide();
         alert(data);
    })
});

Answer 2

使用$.ajax() ，讓PHP腳本回復JSON，可以在單獨的success/error回調或單個complete回調中讀取。

有許多jQuery插件可以為您提供簡單的ajaxified表單，現成的。 Mike Alsup的jQuery Form插件是一個特別受歡迎的插件 。

---

或者，完全跳過ajax調用，並在提交表單時禁用提交按鈕：

$('#submit').click(function(){
    this.disabled = true;
});

Answer 3

我不能說我完全理解你的問題，但我會盡力回答我的問題。 如果您的問題有多個回聲，請嘗試跳入和跳出php：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#pleaseWait').show();
});
</script>

<?php
if($error == ""){
      /* There is not an error, run php. */
 }else{
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#pleaseWait').hide();
});
</script>

<?php } ?>

但也許你的問題是php在頁面加載之前首先運行，並且javascript在頁面加載之后運行（或作為）。

Answer 4

它並不完全是您最初要求的，但根據經驗，阻止用戶在長時間處理（如AJAX調用）中多次單擊提交的最佳方法是禁用提交按鈕 。

不要誤會我的意思，我仍然認為你應該加入“請稍候”的消息或其他什么。 我所說的是讓你的信息集中在一個消息上，讓你的按鈕專注於不讓自己被點擊。

它很簡單，它不需要在檢查中保持很多復雜性，並且它可以工作。