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

How to send a short Ajax request to PHP, get confirmation and don't wait for full processing to finish

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

理想情况下:

在应用程序上:

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

很简单,不显示微调器。

反正是异步的

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

备选反馈

因此,我不会显示微调器叠加层,而是会在页面顶部显示一个小通知,上面写着 'Saving....',一些不会过多阻挡视线的东西,甚至可能只是一个小图标或动画在角落里,或者在他们点击的按钮顶部(见下面的片段)来执行操作。

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

处理导航

离开页面将结束请求。这并不意味着 PHP 脚本立即结束,但如果您开始输出信息并将其发送到客户端,您的服务器将注意到连接已断开,并且它将终止 PHP 脚本.您可以通过使用 ignore_user_abort(true).

来阻止这种情况并使 PHP 完成请求

小细节:保存朋友邀请时,您无法真正看到它,因此如果您导航到另一个也显示朋友邀请按钮的页面,则很难使其显示正确的状态。一种解决方案可能是在您开始保存邀请后立即设置一个 'saving' 标志,但我个人不会走那么远。只需确保您的脚本能够优雅地处理重复保存并向用户隐藏碰撞。

内联指标的原型

这是一个小片段,通过内联显示来说明我的意思。它不执行实际请求,而是使用 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>