Javascript 在mp4=>；之后更改js/ajax中的按钮文本；php中的mp3转换_Javascript_Php_Ajax_Upload_Progress Bar

Javascript 在mp4=>；之后更改js/ajax中的按钮文本；php中的mp3转换

javascript php ajax

Javascript 在mp4=>；之后更改js/ajax中的按钮文本；php中的mp3转换,javascript,php,ajax,upload,progress-bar,Javascript,Php,Ajax,Upload,Progress Bar,我正在处理html表格行（此时为两行）如下所示，在其中单击按钮： =>JS/jQuery代码被调用（其中Go文本更改为转换） =>然后通过AJAX将mp4转换为mp3的转换为.php脚本 html/php代码： JS/jQuery代码：从上面的html/php代码中单击按钮后，文本将在UI中从Go更改为Converting，因为我在代码库中添加了JS/jQuery代码，但我添加的这个JS/jQuery代码只更改了文本它实际上并不知道转换是在后台进行的问题陈述：我想知道我需要在上面的JS/j

我正在处理html表格行（此时为两行）如下所示，在其中单击按钮：

=>JS/jQuery代码被调用（其中Go文本更改为转换）
=>然后通过AJAX将mp4转换为mp3的转换为.php脚本

html/php代码：

JS/jQuery代码：

从上面的html/php代码中单击按钮后，文本将在UI中从Go更改为Converting，因为我在代码库中添加了JS/jQuery代码，但我添加的这个JS/jQuery代码只更改了文本它实际上并不知道转换是在后台进行的

问题陈述：

我想知道我需要在上面的JS/jQuery代码中做些什么修改，以便UI真正知道转换是在后台进行的

也许，我们需要在上面的JS/jQuery和php代码之间添加一些连接，但我不确定我们如何才能做到这一点。

尝试更改以下内容：

$.ajax({
            url: 'convert.php',
            type: 'POST',
            data: {id: target}, //change to what you want
            success: function(res)
            {   
            },
            error: function(res)
            {
            }
        })

为此：

$.ajax({
        url: 'convert.php',
        type: 'POST',
        data: {id: target}, //change to what you want
        success: function(res)
        {   
//You can add $(".go-btn").html('completed'); to here, but I prefer the other way.
        },
        error: function(res)
        {
// This is unnecessary if you are not gonna make it do anything if error occurs.
        }
    }) 
.done(function(data) {
$('.go-btn').html('Completed!');
//This fires when AJAX call suceeds the process. As a side note, "data" is what your .php code outputs, so you can do whatever you want to do with it.
});

还有我的评论。

我希望这有帮助。

首先，让我们修复html。按钮上不需要

name

或

id

属性，它们也不会是唯一的，因为它们是在循环中编写的。只需将它们替换为

class=“converter”

。

标记不需要关闭

submit

type按钮具有默认行为（您不希望与ajax请求结合使用）。您可以使用

e.preventDefault（）喜欢或更改标记，使其不触发表单提交
未经测试的代码：
js
php

下面是一个快速演示（在本地测试，可以正常工作）：
main.php
<!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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（功能（e）{
e、 预防默认值（）；
设btn=$（此）；
html（“转换…”）.attr（“禁用”、“真实”）；
$.ajax({
cache:false，
类型：“POST”，
数据类型：“json”，
数据：{id:btn.data（'id'）}，
url:“convert.php”，
成功：功能（响应）{
html（response.message）
.attr（“已禁用”，response.message！=“错误”）；//如果错误，则重新启用
}
});
});
});

convert.php
<?php
$lookup = [
    'Good',
    'Bad'
];
sleep(1);
echo json_encode(['message' => $lookup[$_POST['id']] ?? 'Error']);

你的问题不是很清楚。如果“用户界面确实知道转换正在进行”，您认为它应该是什么样子的？你想看“Go”->“Converting”->“Converted”吗？我想的另一件事是，当我在不同的机器上打开同一个网页时，它应该知道文件已经完成（意味着mp4=>mp3的转换已经完成）。在不同的机器上打开页面时，Go按钮文本再次显示属于特定文件的文本，该文件不正确，因为该文件已完成。这是您发布问题的新要求。发布后，您不打算更改您的要求。如果你愿意，你可以发布一个新问题。如果我已经解决了最初的问题，那么在继续之前，让我们先把这个问题缝合起来。我添加了两个php脚本，以快速演示我认为您需要的内容。至于检查已经转换的内容，您需要将任何新转换的行保存到数据库表中，并检查它们是否在main.php和convert.php中都已转换。此问题扩展太多，无法附加到此页面@我还有一个。不一样。我想知道你是否可以看一看。谢谢。用户给出的答案很接近，但在某些情况下仍然失败。
$.ajax({
        url: 'convert.php',
        type: 'POST',
        data: {id: target}, //change to what you want
        success: function(res)
        {   
//You can add $(".go-btn").html('completed'); to here, but I prefer the other way.
        },
        error: function(res)
        {
// This is unnecessary if you are not gonna make it do anything if error occurs.
        }
    }) 
.done(function(data) {
$('.go-btn').html('Completed!');
//This fires when AJAX call suceeds the process. As a side note, "data" is what your .php code outputs, so you can do whatever you want to do with it.
});

$(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;
    });
});

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
$lookup = [
    'Good',
    'Bad'
];
sleep(1);
echo json_encode(['message' => $lookup[$_POST['id']] ?? 'Error']);