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

时间：2023-12-02

本文介绍了在 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 = 路径信息($f);开关($parts['extension']){案例mp4":$filePath = $src_dir .DS .$f;system('C:ffmpeginffmpeg.exe -i ' . $filePath . ' -map 0:2 -ac 1 ' . $destination_dir . DS . $parts['filename'] . '.mp3', $结果);print_r("你好世界");休息;}

<块引用>

JS/jQuery 代码:

$("input[name='go-button']").click( function() {//更改按钮的文本，并禁用$(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(); 像 this 或将标签更改为不会触发表单提交.

未经测试的代码:

$(document).ready(function () {$("input.converter").click(函数 (e) {e.preventDefault();让 btn = $(this);btn.val("正在转换").attr("已禁用", "true");$.ajax({缓存:假，类型:发布"，数据类型:json"，数据:{id:btn.data('id')}，网址:转换.php"，成功:功能(响应){btn.val(response.message).attr("disabled", response.message == "Converted" ? "false" : "true");},错误:函数(jqXHR，状态，错误){console.log("请求失败:" + status);},完成:功能(jqXHR，状态){console.log("完成.无论结果如何");}});返回假；});});

php

if (empty($mp4_files[$_POST['id']])) {exit(json_encode(['message' => '失败']);}$f = $mp4_files[$_POST['id']];$parts = 路径信息($f);开关($parts['extension']){案例mp4":$filePath = $src_dir .DS .$f;system('C:ffmpeginffmpeg.exe -i ' . $filePath . ' -map 0:2 -ac 1 ' . $destination_dir . DS . $parts['filename'] . '.mp3', $结果);exit(json_encode(['message' => 'Converted']);}exit(json_encode(['message' => '无效的文件类型']);

<小时>

这是一个快速演示(在本地测试可以工作):

main.php

<!DOCTYPE html><html><头><script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><脚本>$(文档).ready(函数 () {$("按钮").click(函数 (e) {e.preventDefault();让 btn = $(this);btn.html("正在转换...").attr("已禁用", "true");$.ajax({缓存:假，类型:发布"，数据类型:json"，数据:{id:btn.data('id')}，网址:转换.php"，成功:功能(响应){btn.html(response.message).attr("已禁用", response.message != "Bad");//如果不好则重新启用}});});});</脚本></头><身体>

转换.php

表现如何:

------------------------------------------- 启用 -> 禁用...... -> 禁用

按钮 #1 文本进度:转换 -> 正在转换... -> 好
按钮 #2 文本进度:转换 -> 正在转换... -> 错误(已启用)
按钮 #3 文本进度:转换 -> 正在转换... -> 错误

I am working on html table rows (which is two at this moment) as shown below in which on button click:



=> JS/jQuery code is called (where Go text changes to Converting)  

=> and then convert.php script through AJAX where conversion of mp4 into mp3 happens.

  html/php code:


  <?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:ffmpeginffmpeg.exe -i ' . $filePath . ' -map 0:2 -ac 1 ' . $destination_dir . DS . $parts['filename'] . '.mp3', $result);    
         print_r("Hello World");
         break;                  
 } 



  JS/jQuery code:


$("input[name='go-button']").click( function() {

  // Change the text of the button, and disable
  $(this).val("Converting").attr("disabled", "true");

});
As soon as the button is clicked from the html/php Code above, the text gets changed from Go to Converting in the UI because I have added JS/jQuery code in my codebase but this JS/jQuery code which I have added just change the text only. It doesn't actually know that the Conversion is happening in the background.

Problem Statement:

I am wondering what modification I need to do in the JS/jQuery code above so that UI actually knows that conversion is happening in the background.

Probably, we need to add make establish some connection between JS/jQuery and php code above but I am not sure how we can do that.
 解决方案 
First, let's fix the html.  You don't need name or id attributes on your button and they won't be unique because you are writing them in a loop.  Just replace them with class="converter".  The <input> tag doesn't need a closing </input>.

A submit type button has a default behavior (which you don't want to combine with an ajax request). You can either use e.preventDefault(); like this or change the tag to something that does not fire a form submission.

Untested Codes:

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:ffmpeginffmpeg.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']);




Here's a quick demo (tested locally to work):

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']);
How it performs:

------------------------------------------- enabled -> disabled...... -> disabled


Button #1 Text Progression: Convert -> Converting... -> Good
Button #2 Text Progression: Convert -> Converting... -> Bad (enabled)
Button #3 Text Progression: Convert -> Converting... -> Error


                        这篇关于在 php 中的 mp4 =&gt;mp3 转换后更改 js/ajax 中的按钮文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！



上一篇：php 上传时唯一的文件名 
下一篇：如何使用 PLupload 发送附加数据? 

 
相关文章

     
    
阻止上传可执行图像 (PHP)
PHP - 最大总上传大小?
安全的 PHP 文件上传脚本
重命名文件，如果已经存在 - php上传系统
使用唯一文件名通过 php 上传图像
php在上传时或上传之前调整图像大小
使用纯 PHP/AJAX 上传进度?
PHP上传文件增强安全性
在 PHP 中自动修剪 mp3
Android:使用 php 在服务器上上传图像

在 php 中的 mp4 =&gt;mp3 转换后更改 js/ajax 中的按钮文本

问题描述

相关文章

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