嵌套.ajax()调用的JavaScript/jQuery可变范围问题 [英] JavaScript/jQuery Variable Scope Issue with Nested .ajax() calls

问题描述

我在传递变量postData(这是一个序列化的jQuery数组对象)传递给嵌套子.ajax()调用时遇到了困难. postData已成功传递到第一个.ajax()调用，但是当我尝试在第二个.ajax()调用中使用它时，它没有发布任何表单元素，因为该级别的变量未定义:

I'm having a difficult time passing the variable postData which is a serialized jQuery array object to a nested child .ajax() call. postData is passed successfully to the first .ajax() call, but when I attempt to use it in the second .ajax() call, it does not post any form elements, as the variable is undefined at that level:

$(".myForm").submit(function () {
    var postData=$(this).serializeArray();
    $.ajax({
        type        : "POST",
        async       : false,
        cache       : false,
        url         : "./insertComment.php",
        data        : postData,
        success: function() {
            $.ajax({
               type         : "POST",
               async       : false,
               cache        : false,
               url          : "./getComments.php",
               data        : postData,
               success: function(comments) {
                   $(".Comments").html(comments);
               }
            });
        }
    });
    return false;
});

我尝试创建第二个变量_postData，尝试将变量永久保留到下一个.ajax()调用，但未成功(也尝试了var _postData=$(this).parent().serializeArray();，但我仍然无法永久保留该变量):

I tried creating a second variable _postData attempting to perpetuate the variable on to the next .ajax() call, but it was unsuccessful (also tried var _postData=$(this).parent().serializeArray(); but I still wasn't able to perpetuate the variable):

$(".myForm").submit(function () {
    var postData=$(this).serializeArray();
    $.ajax({
        type        : "POST",
        async       : false,
        cache       : false,
        url         : "./insertComment.php",
        data        : postData,
        success: function() {
            var _postData=$(this).serializeArray();
            $.ajax({
               type         : "POST",
               async       : false,
               cache        : false,
               url          : "./getComments.php",
               data        : _postData,
               success: function(comments) {
                   $(".Comments").html(comments);
               }
            });
        }
    });
    return false;
});

我尝试实现所谓的JavaScript闭包(我仍然不完全了解)，但这导致了更多未定义变量和更多失败:

I tried implementing so-called JavaScript closure (something I still don't fully grok), but that led to more undefined variables and more failure:

$(".myForm").submit(function () {
    var postData = function() {
        $(this).serializeArray();
    }();
    $.ajax({
        type        : "POST",
        async       : false,
        cache       : false,
        url         : "./insertComment.php",
        data        : postData,
        success: function() {
            $.ajax({
               type         : "POST",
               async       : false,
               cache        : false,
               url          : "./getComments.php",
               data        : postData,
               success: function(comments) {
                   $(".Comments").html(comments);
               }
            });
        }
    });
    return false;
});

我尝试搜索并尝试实现其他几种技术，包括jQuery遍历(.parent()，.filter()等)，但未成功.我知道对于许多人来说这是一个普遍的问题，但是到目前为止，我还没有找到一个简单易懂的解决方案.任何建议将不胜感激.谢谢！

I tried searching around and tried implementing several other techniques, including jQuery traversal (.parent(), .filter(), etc.), but was unsuccessful. I know this is a common problem for a lot of folks, but so far I have not found a simple, understandable solution. Any suggestions would be greatly appreciated. Thanks!

推荐答案

尝试一下:

$(".myForm").submit(function () 
    {
        var postData=$(this).serializeArray();
        $.ajax({ type        : "POST",
                 async       : false,
                 cache       : false,
                 url         : "./insertComment.php",
                 data        : postData,
                 success: (function(pData) 
                   {
                      // capture the posted data in a closure
                      var _postData = pData;
                      return function() 
                             {                    
                               $.ajax({ type: "POST",
                                        async: false,
                                        cache: false,
                                        url: "./getComments.php",
                                        data: _postData,
                                        success: function(comments)
                                        {
                                            $(".Comments").html(comments);
                                        }
                                    });
                            }
                   })(postData)   // execute the outer function to produce the colsure
               });
      return false;
    });

这篇关于嵌套.ajax()调用的JavaScript/jQuery可变范围问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！