如何向 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 请求完成。
理想情况下:
- return 确认 "Friend request received",无需等待过程完成。
- 没有 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
很简单,不显示微调器。
反正是异步的
只是不要显示微调器。请求本身是异步的。当请求在后台等待响应时,用户可以继续使用该页面。只有当收到响应时,成功处理程序才会启动。
备选反馈
因此,我不会显示微调器叠加层,而是会在页面顶部显示一个小通知,上面写着 '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>
首先 post 这里 :) 我有一个移动应用程序 (Phonegap),它向 PHP 服务器发送 ajax 请求,比如朋友邀请。收到请求时,必须完成一些需要很长时间(5 秒)的事情(创建链接、授权、发送电子邮件等)。在此期间,应用程序上的用户正在查看微调器,等待 ajax 请求完成。
理想情况下:
- return 确认 "Friend request received",无需等待过程完成。
- 没有 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
很简单,不显示微调器。
反正是异步的
只是不要显示微调器。请求本身是异步的。当请求在后台等待响应时,用户可以继续使用该页面。只有当收到响应时,成功处理程序才会启动。
备选反馈
因此,我不会显示微调器叠加层,而是会在页面顶部显示一个小通知,上面写着 '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>