Question

在我的页面上，我有一个ajax脚本，其中包含一系列嵌套在彼此的成功函数中的ajax调用，以便下一个执行。例如-

            $.ajax({
                data: {
                    action: 'polly_pros',
                    pollytext: text
                },
                type: 'post',
                url: polpro.ajax_url,
                cache: false,
                success: function(data) {
                    $('#player')[0].pause();
                    $('#player')[0].load();
                    var aud_dur = $('#aud_dur').val();
              // NEXT AJAX CALL                  
                    $.ajax({
                        data: {

在我的表单上，我的隐藏输入-

<input type="hidden" name="aud_dur" id="aud_dur" value="" />

在我的页面上，无论何时加载音频文件，我都会更新隐藏的输入，我使用-

var Aud = $('#player');
var aud_dur = $('#aud_dur');
Aud[0].addEventListener('loadeddata', function() {
    aud_dur.val($('#player')[0].duration);
});

在我的php脚本上，我正试图检索值-

$aud_dur = $_POST['aud_dur'];

我的隐藏输入可以在表单上正常更新，但是不会发送回新值，因此我可以在下一个ajax调用中使用它。现在，似乎没有从该变量发送任何数据。

有什么建议吗？

编辑

我的ajax代码中有多个调用，上一个调用成功执行。

polly_pros ajax调用创建一个音频文件，下面的ajax调用假定是从那里获取音频持续时间，我也在其中输入了隐藏内容。

如果文件已经存在，我可以获取持续时间，但是如果动态创建文件（如我需要这样做），我将无法获取持续时间值。

这是我完整的ajax代码（为简化起见，删除了不相关的变量）---

jQuery(document).on('click', '#make-vid', function(e) {
    e.preventDefault();
    var aud_dur;
    var pollytext = $('#pollytext').val();
    var path = $('#path').val();
    var post_id = $('#post_id').val();
    // AJAX CALL
    $.ajax({
        url: vformpro.ajax_url,
        data: {
            action: 'vform_pros',
            post_id: post_id,
        },
        type: 'POST',
        success: function(data) {
            console.log(data);
            var audio = $("#player");
            var post_id = $("#post_id").val();
            var aud_dur = $("#aud_dur").val();
            var tune_dur = $("#tune_dur").val();

            // AJAX CALL
            $.ajax({
                data: {
                    action: 'polly_pros',
                    post_id: post_id
                },
                type: 'post',
                url: polpro.ajax_url,
                cache: false,
                success: function(data) {
                    console.log(data);
                    $('#player')[0].pause();
                    $('#player')[0].load(function() {

                        // HERE I AM TRYING TO GET THE AUDIO DURATION UPON SUCCESS OF THIS AJAX CALL SO // THAT I CAN PASS IT TO THE FOLLOWING AJAX CALL

                        var Aud = $('#player');
                        var aud_dur = $('#aud_dur');
                        Aud[0].addEventListener('loadeddata', function() {
                            aud_dur.val($('#player')[0].duration);
                            console.log(aud_dur);
                        });

                    });
                    // AJAX CALL
                    $.ajax({
                        data: {
                            action: 'mvid_pros',
                            post_id: post_id,
                            aud_dur: aud_dur,
                            tune_dur: tune_dur
                        },
                        type: 'post',
                        url: mvidpro.ajax_url,
                        cache: false,
                        success: function(data) {
                            console.log(data);
                            $("#video-preview")[0].pause();
                            $("#video-preview")[0].load();
                        },
                        error: function() {
                            $('.load-text').text('Error on making Video.');
                        }
                    });
                },
                error: function(data) {
                    console.log(data);
                },
            });
        }
    });
});

更新

这里是link to the full code（WIP），可以为我的问题提供更好的背景信息。

Answer 1

（更新后的答案）

我仍然认为，主要问题可能与this代码中的$('#player')[0].load(function() {...})一样。

我的意思是，如果id的{{1}}元素是player元素，那么您提供给该方法的audio方法的function load()元素将永远不会被调用。请注意，audio与$(selector).load()不同–“选择器”可以是$(selector)[0].load()，'#my_id'等。

但是无论如何，请尝试使用this代码，它是your代码的完整版本的优化版本。

您可能无法简单地将代码与优化版本进行比较；但是，发现主要变化并不难，例如，我使用单个'.my_class'对象而不是大量变量，其中form_data存储发送到PHP脚本的表单数据

在优化的代码中，您将找到执行第三个AJAX请求（使用动作form_data）的代码：

mvid_pros

这是调用上述函数的代码：

function mvidPros() {
  var aud_dur = $('#player')[0].duration;
  console.log(aud_dur);

  // Set the value of the #aud_dur field.
  $("#aud_dur").val(aud_dur);

  // Initialize the data for the 'mvid_pros' AJAX call.
  var form_data = {
    action: 'mvid_pros',
    post_id: $("#post_id").val()
  };

  // Add input values to the data.
  form_data.songlink = $("#songlink").val();
  ...
  form_data.aud_dur = aud_dur;
  form_data.tune_dur = $("#tune_dur").val();
  ...

  $.ajax({
    'data': form_data,
    type: 'post',
    url: mvidpro.ajax_url,
    cache: false,
    //async:false,
    success: function(data) {
      console.log(data);
      ...
    },
    error: function() {
      $('.load-text').text('Error on making Video.');
    }
  });
}

Answer 2

您需要将aud_dur的值包括在发布到服务器的数据中。表单提交方法未调用，您正在执行ajax请求。

$.ajax({
    data: {
        action: 'polly_pros',
        pollytext: text,
        aud_dur : $('#aud_dur').val()
    },
.....

将数据对象更改为将其包含在帖子值中，您应该会看到它已发送到服务器。您可以通过在浏览器的开发控制台中检查网络请求来检查实际发送的内容。

对于每个更新的问题，在分配aud_dur值之前，您的下一个Ajax调用正在运行。分配aud_dur变量后，将Ajax调用放入事件处理程序中

jQuery(document).on('click', '#make-vid', function(e) {
    e.preventDefault();
    var aud_dur;
    var pollytext = $('#pollytext').val();
    var path = $('#path').val();
    var post_id = $('#post_id').val();
    // AJAX CALL
    $.ajax({
        url: vformpro.ajax_url,
        data: {
            action: 'vform_pros',
            post_id: post_id,
        },
        type: 'POST',
        success: function(data) {
            console.log(data);
            var audio = $("#player");
            var post_id = $("#post_id").val();
            var aud_dur = $("#aud_dur").val();
            var tune_dur = $("#tune_dur").val();

            // AJAX CALL
            $.ajax({
                data: {
                    action: 'polly_pros',
                    post_id: post_id
                },
                type: 'post',
                url: polpro.ajax_url,
                cache: false,
                success: function(data) {
                    console.log(data);
                    $('#player')[0].pause();
                    $('#player')[0].load(function() {

                        // HERE I AM TRYING TO GET THE AUDIO DURATION UPON SUCCESS OF THIS AJAX CALL SO // THAT I CAN PASS IT TO THE FOLLOWING AJAX CALL

                        var Aud = $('#player');
                        var aud_dur = $('#aud_dur');
                        Aud[0].addEventListener('loadeddata', function() {
                            aud_dur.val($('#player')[0].duration);
                            console.log(aud_dur);
                            // AJAX CALL **MOVED**
                            $.ajax({
                                data: {
                                    action: 'mvid_pros',
                                    post_id: post_id,
                                    aud_dur: $('#aud_dur').val(),
                                    tune_dur: tune_dur
                                },
                                type: 'post',
                                url: mvidpro.ajax_url,
                                cache: false,
                                success: function(data) {
                                    console.log(data);
                                    $("#video-preview")[0].pause();
                                    $("#video-preview")[0].load();
                                },
                                error: function() {
                                    $('.load-text').text('Error on making Video.');
                                }
                            });
                        });

                    });


                },
                error: function(data) {
                    console.log(data);
                },
            });
        }
    });
});

Answer 3

您的代码有问题，请正确重构代码，然后应该没问题：

PS：我无法运行代码，因此请确保您正确定义变量的范围，以使代码正常工作。

jQuery(document).on('click', '#make-vid', function(e) {
    e.preventDefault();
    var pollytext = $('#pollytext').val();
    var path = $('#path').val();
    var post_id = $('#post_id').val();
    var onAudioDataLoaded = function() {
        var aud_duration = $('#player')[0].duration;
        var tune_duration = $("#tune_dur").val();
        $('#aud_dur').val(duration);

        // AJAX CALL
        $.ajax({
            data: {
                action: 'mvid_pros',
                post_id: post_id,
                aud_dur: aud_duration,
                tune_dur: tune_duration
            },
            type: 'post',
            url: mvidpro.ajax_url,
            cache: false,
            success: onMvidProsSuccess,
            error: onMvidProsError
        });
    };
    var onMvidProsSuccess = function(data) {
        console.log(data);
        $("#video-preview")[0].pause();
        $("#video-preview")[0].load();
    };
    var onMvidProsError = function() {
        $('.load-text').text('Error on making Video.');
    };
    var onPolyProsError = function(data) {
        console.log(data);
    };
    var onPolyProsSuccess = function(data) {
        console.log(data);

        $('#player')[0].pause();
        $('#player')[0].load(function() {

            // HERE I AM TRYING TO GET THE AUDIO DURATION UPON SUCCESS OF THIS AJAX CALL SO // THAT I CAN PASS IT TO THE FOLLOWING AJAX CALL

            var Aud = $('#player');
            Aud[0].addEventListener('loadeddata', onAudioDataLoaded);
        });
    };
    var onFormPostSuccess = function(data) {
        console.log(data);
        // AJAX CALL
        $.ajax({
            data: {
                action: 'polly_pros',
                post_id: post_id
            },
            type: 'post',
            url: polpro.ajax_url,
            cache: false,
            success: onPolyProsSuccess,
            error: onPolyProsError
        });
    };
    // AJAX CALL
    $.ajax({
        url: vformpro.ajax_url,
        data: {
            action: 'vform_pros',
            post_id: post_id,
        },
        type: 'POST',
        success: onFormPostSuccess
    });
});

每次调用多个ajax调用都会更新变量

3 个答案: