使用jQuery/Ajax/JS加载PHP文件和显示状态的正确或最佳过程
Correct or best process for loading PHP files and displaying the status using jQuery/Ajax/JS
所以我正在做一个项目,将使用PHP下载文件与CURL和更新他们在服务器上。我已经得到了这部分的照顾,现在我正在工作的前端gui,将显示进度给用户。
所以我最初的想法是这样使用代码:
$('#startupgrade').click(function() {
$('#upgradeprogress').css({"width": "0%"});
$('#upgradestatus').append('<p>Starting Upgrade...</p>');
$('#upgradeprogress').css({"width": "10%"});
$('#currentstep').load('upgrade.php #statusreturn', 'step=1');
$('#upgradestatus').append('<p>Step 1 Complete...</p>');
$('#upgradeprogress').css({"width": "20%"});
})
这背后的想法是加载PHP页面并从PHP在ID #statusreturn中生成的页面中提取"状态消息",如果该步骤失败或成功,则将该消息添加到当前页面。在上面的例子中,我保持简单,只是继续并附加步骤1完成,但我会在那里添加一些类型的标准JS来检查第一步是否完成。
我对JS和jQuery非常陌生,我觉得应该有一个更容易或更正确的方法来做到这一点。也许运行一些标准的JS使用基于步骤数的if语句?
有没有人对如何用更少的代码或更简单的方式完成这一点有任何建议或建议?我想确保我最终使用和学习的方法是正确的,希望我不会犯新手错误,使用比必要更多的代码。
感谢您的建议和帮助。
#upgradeprogress使用Twitter Bootstrap进度条,它由宽度控制。#upgradestatus是一个Bootstrap井,它将显示与终端几乎相似的输出。
load函数是一个异步函数。这意味着它将直接继续,而不是等待加载。为了等待加载,将进度条的更新放入成功回调处理程序中:
http://api.jquery.com/load/$('#result').load('steps/step1.php', function() {
$('#upgradeprogress').css({"width": "10%"}); //update your status bar here
$('#currentstep').load('upgrade.php #statusreturn', function() {
$('#upgradeprogress').css({"width": "20%"});
//add more steps here if required
});
});
只有当成功函数()被执行时,你才能确定请求已经完成。
相关文章:
- 为effect Composer创建GodRays效果过程
- 事件和状态
- 获取选择框的状态
- 相位器状态未捕获参考错误
- 如何更改reactjs中外部/独立组件的状态或属性
- 如何使用密码检测网络中的状态连接
- Ember.js-接口状态应该存储在哪里
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 在Angular 2中布线期间保持零部件处于活动状态
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- XMLHttpRequest未返回值-状态202
- 使用javascript反复检查用户在facebook上的登录状态
- 如何使bxslider仅在移动视图中处于活动状态
- 获取ASP.NET Ajax Timer状态
- React redux初始化功能,无论状态变化如何
- 无法在现有状态转换期间更新-未使用任何非法的setState()
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 如何选中所有复选框并在分页过程中保持选中状态
- Websocket错误:Websocket握手过程中出现错误:状态行中没有找到响应代码
- 使用jQuery/Ajax/JS加载PHP文件和显示状态的正确或最佳过程