代码之家 › 专栏 › 技术社区 › 730wavy

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

html5-audio ajax jquery javascript

730wavy · 技术社区 · 6 年前

在我的页面上,我有一个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)为我的问题提供更好的背景。

3 回复 | 直到 6 年前

Sally CJ 6 年前

(更新答案)

我仍然认为主要的问题可能是 $('#player')[0].load(function() {...}) 你拥有的 this 代码。

我是说,如果 id 属于 player 是一个 audio 元素,然后 function 你提供给 load() 方法 音频 元素永远不会被调用。注意到 $(selector).load() 不同于 $(selector)[0].load() -“选择器”可以是 '#my_id' 我是说, '.my_class' 等。

但是无论如何,请试试 this 代码是优化版本满的版本 your 代码。

您可能无法简单地将您的代码与优化版本进行比较;但是,您不应该太难发现主要的更改,例如我使用了一个 form_data 对象而不是大量变量,其中 表格数据 存储发送到php脚本的表单数据。

在优化后的代码中,您将找到执行第三个ajax请求的代码(使用 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.');
    }
  });
}

下面是调用上述函数的代码:

$('#player')[0].pause();
$('#player').one('loadeddata', mvidPros);
$('#player')[0].load();

Dipen Shah 6 年前

您的代码有问题,请正确重构您的代码,您应该可以:

备注:我无法运行代码,所以请确保正确地确定变量的范围,以便代码正常工作。

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

Matti Price 6 年前

你需要包括你的 aud_dur 将post数据中的值发送到服务器。表单提交方法没有被调用,而是在执行ajax请求。

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

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

根据您更新的问题,下一个ajax调用将在分配aud-dur值之前运行。在分配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);
                },
            });
        }
    });
});