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调用）中多次单击提交的最佳方法是禁用提交按钮 。

不要误会我的意思，我仍然认为你应该加入“请稍候”的消息或其他什么。 我所说的是让你的信息集中在一个消息上，让你的按钮专注于不让自己被点击。

它很简单，它不需要在检查中保持很多复杂性，并且它可以工作。