PHP脚本输出的AJAX连续响应
我的PHP脚本的AJAX响应有问题 我已经创建了“Status”div,在这里我想输出PHP脚本的响应。它工作得很好,但只有在整个脚本完成时才会显示响应,我希望输出每个echo“live” 这是我的档案: form.phpPHP脚本输出的AJAX连续响应,php,jquery,ajax,nginx,flush,Php,Jquery,Ajax,Nginx,Flush,我的PHP脚本的AJAX响应有问题 我已经创建了“Status”div,在这里我想输出PHP脚本的响应。它工作得很好,但只有在整个脚本完成时才会显示响应,我希望输出每个echo“live” 这是我的档案: form.php <!-- left column --> <div class="col-md-6"> <!-- general form elements --> <div class="card ca
<!-- left column -->
<div class="col-md-6">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title"><?php echo $xmlData->name ?></h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form id="upload_form" enctype="multipart/form-data" method="post">
<div class="card-body">
<div class="form-group">
<label for="debFile">Deb file</label>
<span id="debMSG"></span>
<div class="input-group">
<div class="custom-file">
<input name="debFile" type="file" class="custom-file-input" id="debFile">
<label class="custom-file-label" for="debFile">Choose .deb file</label>
</div>
</div>
</div>
<div class="form-group">
<label for="version">Version</label>
<input type="text" name="version" id="version" class="form-control" value="<?php echo ver_up($xmlData->changelogs->change->version); ?>">
</div>
<div class="form-group">
<label for="log">Log</label>
<input type="text" name="log" id="log" class="form-control" value="Bug fix">
</div>
<div class="form-check">
<input name="tweet" type="checkbox" class="form-check-input" id="tweet" value="1">
<label class="form-check-label" for="tweet">Auto-post on Twitter</label>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button id="submit" name="upload" type="submit" class="btn btn-primary">Update</button>
</div>
</form>
</div>
<!-- /.card -->
</div>
<!-- Status -->
<div id="status" class="col-md-6" style="display:none;">
<div class="card card-default">
<div class="card-header">
<h3 class="card-title">Status:</h3>
</div>
<div class="alert alert-default">
<ul id="output" class="list-group"></ul>
</div>
</div>
</div>
<!--/.col (right) -->
<script type="text/javascript">
$(document).ready(function () {
bsCustomFileInput.init();
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 5000
});
$(document).on('submit', '#upload_form', function(event){
event.preventDefault();
if($('#debFile').val() == '')
{
$('#debMSG').html('<div class="alert alert-danger">Enter .deb file!</div>');
$('#debMSG').show();
setTimeout(function() {
$('#debMSG').fadeOut('fast');
}, 5000);
return false;
}
else
{
$.ajax({
type: 'POST',
url: 'scripts/test.php',
data: new FormData(this),
// async: true,
cache: false,
processData: false,
contentType: false,
beforeSend:function()
{
$('#debMSG').hide();
$('#submit').attr('disabled', 'disabled');
// $('#status').fadeIn('slow');
}
})
.done(function(data) {
// console.log(data);
$('#output').append(data);
$('#status').fadeIn('slow');
// if(!data.success){
// $('#submit').removeClass('btn-primary').addClass('btn-danger');
// $('#submit').attr('disabled', false);
// $('#submit').removeAttr('name type');
// $('#submit').attr('onClick', 'location.reload();');
// $('#submit').html('Reload');
// Toast.fire({
// icon: 'error',
// title: 'There was an error while updating tweak!'
// })
// } else {
$('#submit').removeClass('btn-primary').addClass('btn-success');
$('#submit').attr('disabled', false);
$('#submit').removeAttr('name type');
$('#submit').attr('onClick', 'window.location.href = "manage-packages.php";');
$('#submit').html('Finish');
Toast.fire({
icon: 'success',
title: 'Tweak has been successfully updated!'
})
// }
})
.fail(function(data) {
console.log(data);
$('#output').append("There was an error while updating tweak!");
// $('#output').removeClass('alert-success').addClass('alert-danger');
$('#status').fadeIn('slow');
$('#submit').removeClass('btn-primary').addClass('btn-danger');
$('#submit').attr('disabled', false);
$('#submit').removeAttr('name type');
$('#submit').attr('onClick', 'location.reload();');
$('#submit').html('Reload');
Toast.fire({
icon: 'error',
title: 'There was an error while updating tweak!'
})
});
}
});
});
</script>
<?php
header('Content-type: text/html; charset=utf-8');
require_once("../../src/config-ssh.php");
require_once("../../src/functions.php");
$deb_dir = "/var/www/html/debs/";
$repo_dir = "/var/www/html/";
function output($val) {
echo nl2br ($val);
flush();
ob_flush();
sleep(1);
}
try {
if (isset($_FILES["debFile"]["name"])) {
$debFile = $_FILES["debFile"]["tmp_name"];
$deb_file = $deb_dir . basename($_FILES["debFile"]["name"]);
if (!file_exists($deb_file)) {
output("<li class=\"list-group-item list-group-item-success\">DEB file \"". basename( $_FILES["debFile"]["name"]). "\" has been uploaded.</li>");
} else {
throw new Exception("<li class=\"list-group-item list-group-item-danger\">DEB file \"". basename( $_FILES["debFile"]["name"]). "\" already exists!</li>");
}
} else {
throw new Exception("<li class=\"list-group-item list-group-item-danger\">You didn't choose any DEB file!</li>");
}
preg_match('/(.*)_(.*)_(.*)\.deb/', basename($_FILES["debFile"]["name"]), $deb_reg);
$dirname = $deb_reg[1];
$prev_ver = ver_down($deb_reg[2]);
$exten = $deb_reg[3] . ".deb";
$prev_deb_name = $dirname."_".$prev_ver."_".$exten;
$prev_deb = $deb_dir . $prev_deb_name;
if (isset($_POST['version']) && isset($_POST['log'])) {
output("<li class=\"list-group-item list-group-item-success\">Values were added to XML!</li>");
}
if (file_exists($prev_deb)) {
output("<li class=\"list-group-item list-group-item-success\">Previous version of DEB file (\"". $prev_deb_name . "\") was deleted!</li>");
} else {
throw new Exception("<li class=\"list-group-item list-group-item-danger\">DEB file \"". $prev_deb_name . "\" wasn't deleted!</li>");
}
// Run a command
output("<li class=\"list-group-item list-group-item-info\">Running Repo update script...</li>");
output("<li class=\"list-group-item list-group-item-success\">Script finished successfully.</li>");
// Auto-post Tweet
if (isset($_POST['tweet'])) {
output("$msg");
output("<li class=\"list-group-item list-group-item-success\">Tweet has been successfully posted.</li>");
}
exit();
}
catch( Exception $e ) {
$message = $e->getMessage();
die( "ERROR: " . $message );
}
?>
姓名?>
Deb文件
选择.deb文件
版本
日志
在Twitter上自动发布
更新
地位:
form.php中的ajax
<!-- left column -->
<div class="col-md-6">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title"><?php echo $xmlData->name ?></h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form id="upload_form" enctype="multipart/form-data" method="post">
<div class="card-body">
<div class="form-group">
<label for="debFile">Deb file</label>
<span id="debMSG"></span>
<div class="input-group">
<div class="custom-file">
<input name="debFile" type="file" class="custom-file-input" id="debFile">
<label class="custom-file-label" for="debFile">Choose .deb file</label>
</div>
</div>
</div>
<div class="form-group">
<label for="version">Version</label>
<input type="text" name="version" id="version" class="form-control" value="<?php echo ver_up($xmlData->changelogs->change->version); ?>">
</div>
<div class="form-group">
<label for="log">Log</label>
<input type="text" name="log" id="log" class="form-control" value="Bug fix">
</div>
<div class="form-check">
<input name="tweet" type="checkbox" class="form-check-input" id="tweet" value="1">
<label class="form-check-label" for="tweet">Auto-post on Twitter</label>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button id="submit" name="upload" type="submit" class="btn btn-primary">Update</button>
</div>
</form>
</div>
<!-- /.card -->
</div>
<!-- Status -->
<div id="status" class="col-md-6" style="display:none;">
<div class="card card-default">
<div class="card-header">
<h3 class="card-title">Status:</h3>
</div>
<div class="alert alert-default">
<ul id="output" class="list-group"></ul>
</div>
</div>
</div>
<!--/.col (right) -->
<script type="text/javascript">
$(document).ready(function () {
bsCustomFileInput.init();
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 5000
});
$(document).on('submit', '#upload_form', function(event){
event.preventDefault();
if($('#debFile').val() == '')
{
$('#debMSG').html('<div class="alert alert-danger">Enter .deb file!</div>');
$('#debMSG').show();
setTimeout(function() {
$('#debMSG').fadeOut('fast');
}, 5000);
return false;
}
else
{
$.ajax({
type: 'POST',
url: 'scripts/test.php',
data: new FormData(this),
// async: true,
cache: false,
processData: false,
contentType: false,
beforeSend:function()
{
$('#debMSG').hide();
$('#submit').attr('disabled', 'disabled');
// $('#status').fadeIn('slow');
}
})
.done(function(data) {
// console.log(data);
$('#output').append(data);
$('#status').fadeIn('slow');
// if(!data.success){
// $('#submit').removeClass('btn-primary').addClass('btn-danger');
// $('#submit').attr('disabled', false);
// $('#submit').removeAttr('name type');
// $('#submit').attr('onClick', 'location.reload();');
// $('#submit').html('Reload');
// Toast.fire({
// icon: 'error',
// title: 'There was an error while updating tweak!'
// })
// } else {
$('#submit').removeClass('btn-primary').addClass('btn-success');
$('#submit').attr('disabled', false);
$('#submit').removeAttr('name type');
$('#submit').attr('onClick', 'window.location.href = "manage-packages.php";');
$('#submit').html('Finish');
Toast.fire({
icon: 'success',
title: 'Tweak has been successfully updated!'
})
// }
})
.fail(function(data) {
console.log(data);
$('#output').append("There was an error while updating tweak!");
// $('#output').removeClass('alert-success').addClass('alert-danger');
$('#status').fadeIn('slow');
$('#submit').removeClass('btn-primary').addClass('btn-danger');
$('#submit').attr('disabled', false);
$('#submit').removeAttr('name type');
$('#submit').attr('onClick', 'location.reload();');
$('#submit').html('Reload');
Toast.fire({
icon: 'error',
title: 'There was an error while updating tweak!'
})
});
}
});
});
</script>
<?php
header('Content-type: text/html; charset=utf-8');
require_once("../../src/config-ssh.php");
require_once("../../src/functions.php");
$deb_dir = "/var/www/html/debs/";
$repo_dir = "/var/www/html/";
function output($val) {
echo nl2br ($val);
flush();
ob_flush();
sleep(1);
}
try {
if (isset($_FILES["debFile"]["name"])) {
$debFile = $_FILES["debFile"]["tmp_name"];
$deb_file = $deb_dir . basename($_FILES["debFile"]["name"]);
if (!file_exists($deb_file)) {
output("<li class=\"list-group-item list-group-item-success\">DEB file \"". basename( $_FILES["debFile"]["name"]). "\" has been uploaded.</li>");
} else {
throw new Exception("<li class=\"list-group-item list-group-item-danger\">DEB file \"". basename( $_FILES["debFile"]["name"]). "\" already exists!</li>");
}
} else {
throw new Exception("<li class=\"list-group-item list-group-item-danger\">You didn't choose any DEB file!</li>");
}
preg_match('/(.*)_(.*)_(.*)\.deb/', basename($_FILES["debFile"]["name"]), $deb_reg);
$dirname = $deb_reg[1];
$prev_ver = ver_down($deb_reg[2]);
$exten = $deb_reg[3] . ".deb";
$prev_deb_name = $dirname."_".$prev_ver."_".$exten;
$prev_deb = $deb_dir . $prev_deb_name;
if (isset($_POST['version']) && isset($_POST['log'])) {
output("<li class=\"list-group-item list-group-item-success\">Values were added to XML!</li>");
}
if (file_exists($prev_deb)) {
output("<li class=\"list-group-item list-group-item-success\">Previous version of DEB file (\"". $prev_deb_name . "\") was deleted!</li>");
} else {
throw new Exception("<li class=\"list-group-item list-group-item-danger\">DEB file \"". $prev_deb_name . "\" wasn't deleted!</li>");
}
// Run a command
output("<li class=\"list-group-item list-group-item-info\">Running Repo update script...</li>");
output("<li class=\"list-group-item list-group-item-success\">Script finished successfully.</li>");
// Auto-post Tweet
if (isset($_POST['tweet'])) {
output("$msg");
output("<li class=\"list-group-item list-group-item-success\">Tweet has been successfully posted.</li>");
}
exit();
}
catch( Exception $e ) {
$message = $e->getMessage();
die( "ERROR: " . $message );
}
?>
$(文档).ready(函数(){
bsCustomFileInput.init();
const Toast=Swal.mixin({
吐司:是的,
位置:'顶端',
showconfixton:false,
计时器:5000
});
$(文档)。在('submit','upload_form',函数(事件){
event.preventDefault();
if($('#debFile').val()='')
{
$('#debMSG').html('Enter.deb file!');
$('#debMSG').show();
setTimeout(函数(){
$('#debMSG').fadeOut('fast');
}, 5000);
返回false;
}
其他的
{
$.ajax({
键入:“POST”,
url:'scripts/test.php',
数据:新表单数据(本),
//async:true,
cache:false,
processData:false,
contentType:false,
beforeSend:function()
{
$('#debMSG').hide();
$('提交').attr('禁用','禁用');
//$('#status').fadeIn('slow');
}
})
.完成(功能(数据){
//控制台日志(数据);
$(“#输出”)。追加(数据);
$('#status').fadeIn('slow');
//如果(!data.success){
//$(“#提交”).removeClass('btn-primary').addClass('btn-danger');
//$(“#提交”).attr('disabled',false);
//$(“#提交”).removeAttr('name type');
//$('#submit').attr('onClick','location.reload();');
//$('#submit').html('Reload');
//烤面包,火({
//图标:“错误”,
//标题:“更新调整时出错!”
// })
//}其他{
$(“#提交”).removeClass('btn-primary').addClass('btn-success');
$(“#提交”).attr('disabled',false);
$(“#提交”).removeAttr('name type');
$('#submit').attr('onClick','window.location.href=“manage packages.php”);
$('#submit').html('Finish');
烤面包,火({
图标:“成功”,
标题:“调整已成功更新!”
})
// }
})
.失败(功能(数据){
控制台日志(数据);
$(“#输出”).append(“更新调整时出错!”);
//$(“#输出”).removeClass('alert-success').addClass('alert-danger');
$('#status').fadeIn('slow');
$(“#提交”).removeClass('btn-primary').addClass('btn-danger');
$(“#提交”).attr('disabled',false);
$(“#提交”).removeAttr('name type');
$('#submit').attr('onClick','location.reload();');
$('#submit').html('Reload');
烤面包,火({
图标:“错误”,
标题:“更新调整时出错!”
})
});
}
});
});
test.php
<!-- left column -->
<div class="col-md-6">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title"><?php echo $xmlData->name ?></h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form id="upload_form" enctype="multipart/form-data" method="post">
<div class="card-body">
<div class="form-group">
<label for="debFile">Deb file</label>
<span id="debMSG"></span>
<div class="input-group">
<div class="custom-file">
<input name="debFile" type="file" class="custom-file-input" id="debFile">
<label class="custom-file-label" for="debFile">Choose .deb file</label>
</div>
</div>
</div>
<div class="form-group">
<label for="version">Version</label>
<input type="text" name="version" id="version" class="form-control" value="<?php echo ver_up($xmlData->changelogs->change->version); ?>">
</div>
<div class="form-group">
<label for="log">Log</label>
<input type="text" name="log" id="log" class="form-control" value="Bug fix">
</div>
<div class="form-check">
<input name="tweet" type="checkbox" class="form-check-input" id="tweet" value="1">
<label class="form-check-label" for="tweet">Auto-post on Twitter</label>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button id="submit" name="upload" type="submit" class="btn btn-primary">Update</button>
</div>
</form>
</div>
<!-- /.card -->
</div>
<!-- Status -->
<div id="status" class="col-md-6" style="display:none;">
<div class="card card-default">
<div class="card-header">
<h3 class="card-title">Status:</h3>
</div>
<div class="alert alert-default">
<ul id="output" class="list-group"></ul>
</div>
</div>
</div>
<!--/.col (right) -->
<script type="text/javascript">
$(document).ready(function () {
bsCustomFileInput.init();
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 5000
});
$(document).on('submit', '#upload_form', function(event){
event.preventDefault();
if($('#debFile').val() == '')
{
$('#debMSG').html('<div class="alert alert-danger">Enter .deb file!</div>');
$('#debMSG').show();
setTimeout(function() {
$('#debMSG').fadeOut('fast');
}, 5000);
return false;
}
else
{
$.ajax({
type: 'POST',
url: 'scripts/test.php',
data: new FormData(this),
// async: true,
cache: false,
processData: false,
contentType: false,
beforeSend:function()
{
$('#debMSG').hide();
$('#submit').attr('disabled', 'disabled');
// $('#status').fadeIn('slow');
}
})
.done(function(data) {
// console.log(data);
$('#output').append(data);
$('#status').fadeIn('slow');
// if(!data.success){
// $('#submit').removeClass('btn-primary').addClass('btn-danger');
// $('#submit').attr('disabled', false);
// $('#submit').removeAttr('name type');
// $('#submit').attr('onClick', 'location.reload();');
// $('#submit').html('Reload');
// Toast.fire({
// icon: 'error',
// title: 'There was an error while updating tweak!'
// })
// } else {
$('#submit').removeClass('btn-primary').addClass('btn-success');
$('#submit').attr('disabled', false);
$('#submit').removeAttr('name type');
$('#submit').attr('onClick', 'window.location.href = "manage-packages.php";');
$('#submit').html('Finish');
Toast.fire({
icon: 'success',
title: 'Tweak has been successfully updated!'
})
// }
})
.fail(function(data) {
console.log(data);
$('#output').append("There was an error while updating tweak!");
// $('#output').removeClass('alert-success').addClass('alert-danger');
$('#status').fadeIn('slow');
$('#submit').removeClass('btn-primary').addClass('btn-danger');
$('#submit').attr('disabled', false);
$('#submit').removeAttr('name type');
$('#submit').attr('onClick', 'location.reload();');
$('#submit').html('Reload');
Toast.fire({
icon: 'error',
title: 'There was an error while updating tweak!'
})
});
}
});
});
</script>
<?php
header('Content-type: text/html; charset=utf-8');
require_once("../../src/config-ssh.php");
require_once("../../src/functions.php");
$deb_dir = "/var/www/html/debs/";
$repo_dir = "/var/www/html/";
function output($val) {
echo nl2br ($val);
flush();
ob_flush();
sleep(1);
}
try {
if (isset($_FILES["debFile"]["name"])) {
$debFile = $_FILES["debFile"]["tmp_name"];
$deb_file = $deb_dir . basename($_FILES["debFile"]["name"]);
if (!file_exists($deb_file)) {
output("<li class=\"list-group-item list-group-item-success\">DEB file \"". basename( $_FILES["debFile"]["name"]). "\" has been uploaded.</li>");
} else {
throw new Exception("<li class=\"list-group-item list-group-item-danger\">DEB file \"". basename( $_FILES["debFile"]["name"]). "\" already exists!</li>");
}
} else {
throw new Exception("<li class=\"list-group-item list-group-item-danger\">You didn't choose any DEB file!</li>");
}
preg_match('/(.*)_(.*)_(.*)\.deb/', basename($_FILES["debFile"]["name"]), $deb_reg);
$dirname = $deb_reg[1];
$prev_ver = ver_down($deb_reg[2]);
$exten = $deb_reg[3] . ".deb";
$prev_deb_name = $dirname."_".$prev_ver."_".$exten;
$prev_deb = $deb_dir . $prev_deb_name;
if (isset($_POST['version']) && isset($_POST['log'])) {
output("<li class=\"list-group-item list-group-item-success\">Values were added to XML!</li>");
}
if (file_exists($prev_deb)) {
output("<li class=\"list-group-item list-group-item-success\">Previous version of DEB file (\"". $prev_deb_name . "\") was deleted!</li>");
} else {
throw new Exception("<li class=\"list-group-item list-group-item-danger\">DEB file \"". $prev_deb_name . "\" wasn't deleted!</li>");
}
// Run a command
output("<li class=\"list-group-item list-group-item-info\">Running Repo update script...</li>");
output("<li class=\"list-group-item list-group-item-success\">Script finished successfully.</li>");
// Auto-post Tweet
if (isset($_POST['tweet'])) {
output("$msg");
output("<li class=\"list-group-item list-group-item-success\">Tweet has been successfully posted.</li>");
}
exit();
}
catch( Exception $e ) {
$message = $e->getMessage();
die( "ERROR: " . $message );
}
?>
getMessage();
die(“错误:.$message”);
}
?>
最后,它打印此状态输出:
我已经尝试了好几个教程,但是没有一个适合这个
谢谢你的建议 您需要将处理程序绑定到XmlHttpRequest对象的
progress
事件。jQuery不提供本机接口来实现这一点,但如果您仍然希望使用jQuery进行AJAX调用,而不是直接使用XmlHttpRequest对象,则可以通过回调函数更改底层XmlHttpRequest对象,并通过以下方式添加处理程序:
$.ajax({
...
xhr: function() {
// get the native XmlHttpRequest object
const xhr = $.ajaxSettings.xhr();
// set the onprogress event handler
xhr.onprogress = function() {
// replace the '#output' element inner HTML with the received part of the response
$('#output').html(xhr.responseText);
}
return xhr;
}
})
.done(function(data) {
...
})
.fail(function(data) {
...
});
很难从XMLHttpRequest标准的定义中看出这一点,但是声明该事件大约每50毫秒或每接收一个字节触发一次,以频率最低的为准
您应该对javascript代码进行的其他更改包括
- 取消注释
$('#status').fadeIn('slow')在
函数中的code>行,并将其从其他函数中删除李>beforeSend
- 删除
$('#output')。追加(数据)代码>行从
事件处理程序函数中,所有接收到的数据应该已经通过done
处理程序函数注入onprogress
- 删除
nginx
标记。您已经使用了flush()
和ob\u flush()
PHP函数,没错,为了刷新PHP缓冲区,您需要这两个函数。然而,还有一个缓冲区