javascript - 在 php 中的 mp4 => mp3 转换后更改 js/ajax 中的按钮文本
问题描述
我正在处理html 表格行(目前是两个) ,如下所示,其中单击按钮:
=>调用 JS/jQuery代码(其中Go文本更改为Converting)
=>然后通过 AJAX convert.php脚本将mp4 转换为 mp3。
html/php 代码:
<?php foreach ($programs as $key => $program) { ?>
<tr data-index="<?php echo $key; ?>">
<td><input type="submit" id="go-btn" name="go-button" value="Go" data-id="<?php echo $key; ?>" ></input></td>
</tr>
<?php }?>
转换.php:
$f = $mp4_files[$_POST['id']];
$parts = pathinfo($f);
switch ($parts['extension'])
{
case 'mp4' :
$filePath = $src_dir . DS . $f;
system('C:\ffmpeg\bin\ffmpeg.exe -i ' . $filePath . ' -map 0:2 -ac 1 ' . $destination_dir . DS . $parts['filename'] . '.mp3', $result);
print_r("Hello World");
break;
}
JS/jQuery 代码:
$("input[name='go-button']").click( function() {
// Change the text of the button, and disable
$(this).val("Converting").attr("disabled", "true");
});
一旦从上面的html/php 代码中单击按钮,文本就会在 UI 中从Go更改为Converting,因为我在我的代码库中添加了 JS/jQuery 代码,但是我添加的这个 JS/jQuery 代码只是更改了纯文本。它实际上并不知道转换是在后台发生的。
问题陈述:
我想知道我需要在上面的JS/jQuery代码中进行哪些修改,以便 UI 实际上知道转换是在后台发生的。
可能,我们需要在上面的JS/jQuery和 php 代码之间添加 make 建立一些连接,但我不确定我们该怎么做。
解决方案
首先,让我们修复html。您不需要按钮name
或id
按钮上的属性,它们不会是唯一的,因为您是在循环中编写它们。只需将它们替换为class="converter"
. <input>
标签不需要</input>
结束。
类型按钮具有submit
默认行为(您不想与 ajax 请求结合使用)。您可以e.preventDefault();
像这样使用,也可以将标签更改为不会触发表单提交的东西。
未经测试的代码:
js
$(document).ready(function () {
$("input.converter").click(function (e) {
e.preventDefault();
let btn = $(this);
btn.val("Converting").attr("disabled", "true");
$.ajax({
cache: false,
type: "POST",
dataType: "json",
data: {id: btn.data('id')},
url: "convert.php",
success: function(response) {
btn.val(response.message).attr("disabled", response.message == "Converted" ? "false" : "true");
},
error: function (jqXHR, status, err) {
console.log("Request failed: " + status);
},
complete: function (jqXHR, status) {
console.log("Done. No matter the outcome");
}
});
return false;
});
});
php
if (empty($mp4_files[$_POST['id']])) {
exit(json_encode(['message' => 'Failed']);
}
$f = $mp4_files[$_POST['id']];
$parts = pathinfo($f);
switch ($parts['extension'])
{
case 'mp4' :
$filePath = $src_dir . DS . $f;
system('C:\ffmpeg\bin\ffmpeg.exe -i ' . $filePath . ' -map 0:2 -ac 1 ' . $destination_dir . DS . $parts['filename'] . '.mp3', $result);
exit(json_encode(['message' => 'Converted']);
}
exit(json_encode(['message' => 'Invalid File Type']);
这是一个快速演示(在本地测试可以工作):
主文件
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function (e) {
e.preventDefault();
let btn = $(this);
btn.html("Converting...").attr("disabled", "true");
$.ajax({
cache: false,
type: "POST",
dataType: "json",
data: {id: btn.data('id')},
url: "convert.php",
success: function(response) {
btn.html(response.message)
.attr("disabled", response.message != "Bad"); // re-enables if Bad
}
});
});
});
</script>
</head>
<body>
<?php
for ($i = 0; $i < 3; ++$i) {
echo "<div>{$i}: <button data-id=\"{$i}\">Convert</button></div>";
}
?>
</body>
</html>
转换.php
<?php
$lookup = [
'Good',
'Bad'
];
sleep(1);
echo json_encode(['message' => $lookup[$_POST['id']] ?? 'Error']);
它是如何执行的:
------------------------------------------------------- 启用 -> 禁用... ... -> 禁用
- 按钮 #1 文本进度:转换 -> 转换... -> 好
- 按钮 #2 文本进度:转换 -> 转换... -> 错误(启用)
- 按钮 #3 文本进度:转换 -> 转换... -> 错误
推荐阅读
- javascript - 如何在 javascript 或 jquery 中获取当前选项卡的 favicon url
- reactjs - 为什么测试期间的useParams在带有包装器的测试环境中返回未定义?
- python - 尝试安装 mingw python 版本时出现问题
- javascript - Angular:尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象
- reactjs - React js我如何在登录页面中隐藏私有脚本
- excel - 如何根据日期转置Excel中的数据
- git - “git add”本身有什么作用吗?
- css - 表动态高度上的引导溢出 y 问题
- python - 用python打开终端窗口
- objective-c - Objective-C:在两个未连接的视图控制器之间传递数据