如何向 PHP 发送一个简短的 Ajax 请求，获得确认并且不等待完整处理完成

Question

这里的第一篇文章 :) 我有一个向 PHP 服务器发送 ajax 请求的移动应用程序（Phonegap），比如朋友邀请。收到请求时，需要做一些事情（创建链接、授权、发送电子邮件等），这需要很长时间（5 秒）。在此期间，应用上的用户正在查看微调器，等待 ajax 请求完成。

理想情况下：

• 返回确认“已收到好友请求”，无需等待过程完成。
• 没有 Cron 作业，因为等待 1 分钟太长。
• 简单的事情（Gearman 很可怕）

在应用上：

$.ajax({
    url: 'http://www.my_site.com/action.php',
    type: 'POST',
    data: "my_guid="+my_guid+"&friend_guid="+friend_guid, 
    dataType: 'json',
    success: function(json) {
        // Send confirmation
    },
    error: function(json) {
        // Show error
    }
}

在服务器上 (PHP)：

$my_guid = $_POST['my_guid'];
$friend_guid = $_POST['friend_guid'];
// return here confirmation to the app
veryLongFunction($my_guid,$friend_guid); //continue executing long function

Answer 1

简单，不显示微调器。

反正是异步的

只是不要显示微调器。请求本身是异步的。当请求在后台等待响应时，用户可以继续使用该页面。只有当收到响应时，成功处理程序才会启动。

替代反馈

因此，我不会显示微调器叠加层，而是在页面顶部显示一个小通知，上面写着“正在保存....”，这不会过多阻碍视线，甚至可能只是一个小图标或动画在角落，或在他们单击的按钮顶部（参见下面的 sn-p）以执行操作。

然后，当收到响应时，会显示一个更明显的通知，指示成功或错误。

处理导航

离开页面会结束请求。这并不意味着 PHP 脚本会立即结束，但是如果您开始输出信息并将其发送到客户端，您的服务器会注意到连接已断开，并且会终止 PHP 脚本。您可以使用ignore_user_abort(true) 阻止这种情况并让PHP 完成请求。

次要细节：在保存好友邀请时，您无法真正看到它，因此如果您导航到另一个显示好友邀请按钮的页面，则很难让该页面显示正确的状态。一种解决方案可能是在您开始保存邀请后立即设置“保存”标志，但我个人不会走那么远。只需确保您的脚本优雅地处理重复保存并向用户隐藏冲突即可。

内嵌指示器原型

这是一个小sn-p，通过内联显示它来说明我的意思。它不执行实际请求，而是使用setTimeout 模拟它。您可以单击每个按钮，然后可以继续使用该页面。我没有显示一个大的微调器，而是在您刚刚单击的按钮中显示一个文本，这样您就知道您正在保存哪个好友请求。

因此，这样，对用户的反馈更多（正在保存的确切名称），反馈不那么突兀（它只存在于不应再单击的按钮的位置），并且您可以在同一位置显示响应，或选择显示通知（或两者）。

$('button').on('click', function(){
  
  // Button is clicked. Disable and show an indicator.
  var button = $(this);
  button.prop('disabled', true);
  button.text('saving...');
  
  // Simulate the request that takes 5 seconds.
  setTimeout(
    function(){
      // Simulate success
      button.text('Saved!');
      button.css('color', 'green');
    }, 5000);
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>John <button>Send friend request</button>
<li>Jane <button>Send friend request</button>
<li>Jack <button>Send friend request</button>
<li>Janet <button>Send friend request</button>