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

小编典典

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

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 }?>

convert.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代码 上面的文字会从改变进入到转换，因为我已经在我的代码库中添加JS /
jQuery的代码，但我已经添加了这个JS / jQuery代码只是改变的UI纯文本。 实际上并不知道转换是在后台进行的 。

问题陈述：

我想知道我需要在上面的 JS / jQuery 代码中进行哪些修改，以便UI实际上知道转换是在后台进行的。

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

阅读 273

2020-07-26

共1个答案

小编典典

首先，让我们修复html。你并不需要name或id在您的按钮属性和因为你是在一个循环中写他们，他们不会是唯一的。只需将它们替换为class="converter"。该<input>标签不需要关闭</input>。

一个submit类型按钮有一个默认的行为（你不想与一个Ajax请求相结合）。您可以e.preventDefault();像这样使用标签，也可以将标签更改为不会触发表单提交的标签。

未经测试的代码：

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

这是一个快速演示（在本地测试可以正常工作）：

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>

convert.php

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

效果如何：

-------------------------------------------启用->禁用… …->禁用

按钮＃1文本进度：转换->正在转换…->良好
按钮＃2文本进度：转换->正在转换…->错误（已启用）
按钮＃3文本进度：转换->正在转换…->错误

2020-07-26