为啥不能将父ajax调用的参数访问到子ajax调用中

Posted 2023-05-08

【中文标题】为啥不能将父ajax调用的参数访问到子ajax调用中

【英文标题】：Why can not access parameter of parent ajax call into child ajax call为什么不能将父ajax调用的参数访问到子ajax调用中

【发布时间】：2022-01-13 04:00:42

【问题描述】：

我使用 ajax 调用从数据库中检索数据。在我的代码中，无法访问父 ajax 调用请求到子 ajax 请求调用的parameter。我可以在控制台中看到错误。我可以尝试将asyc: false 放入子请求中，但使用async 我可以访问参数，但子ajax 调用只能工作一次。

下面是我的代码

$.ajax(
        type: "GET",
        url: "/url",
        data:   acId: acId, pstId: pstId ,
        success: function(res) 
            // res.lenth = 2
            for (var i = 0; i < res.length; i++) 
                $.ajax(
                    type: "GET",
                    url: "/url",
                    data: commentId: res[i].comment_id,
                    success: function(likeornot)
                        
                        if(likeornot == 0)
                        
                            $("#btnlikeornot").append("<button type = 'submit' onclick ='btncommentunlike("+res[i].comment_id+")' id='commentunlikebtn"+res[i].comment_id+"' data-id='"+res[i].u_id+" ' class='comment-like-button-style'>" +
                                                "<img src='https://img.icons8.com/material-outlined/24/000000/like--v1.png'/>" +
                                            "</button>");
                        
                        else
                        
                            $("#btnlikeornot").append("<button type = 'submit' onclick ='btncommentlike("+res[i].comment_id+")' id='commentlikebtn"+res[i].comment_id+"' data-id='"+res[i].u_id+" ' class='comment-like-button-style'>" +
                                                "<img src='https://img.icons8.com/material-rounded/24/fa314a/like.png' />" +
                                            "</button>");
                        
                    
                );
            
       
);

错误

imagezoom.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'comment_id')
    at Object.success (imagezoom.js:68)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)

【问题讨论】：

你能打印“res[i]”的值吗？好像它不是一个对象。

是的，实际上comment_id来自spring boot实体

【参考方案1】：

问题是变量i 在成功事件发生之前发生了变化，因此它没有预期值。要解决该问题，您必须在循环中的每次迭代中使用变量的本地副本。这可以通过使用let 而不是var 声明变量来实现：

for (let i = 0; i < res.length; i++) 

【参考方案2】：

我不知道对象 res 但这是您更喜欢在没有任何异步进程的情况下在 ajax 中调用 ajax 的方式。 不需要。

//First ajax:  return comments
function func_GetComments() 
    return new Promise(function (resolve, reject) 
        $.ajax(
            type: "GET",
            url: "/meetzen/comments",
            data:  acId: accountId, pstId: postId ,
            success: function (res) 
                if (res.length > 0) 
                    resolve(res);
                
                else 
                    reject("true");
                
            
        );
    );

//第二个ajax，阅读成功块的注释。 data:commentId:comment.comment_id，这里使用comment对象获取id

function GetLikeOrNotImgZoom(comment) 
    $.ajax(
        type: "GET",
        url: "/meetzen/getlikeornotimgzoom",
        data:  commentId: comment.comment_id ,
        success: function (likeornot) 

            if (likeornot == 0) 
                //i have chaned syntex to concat string, apply in else as well to better perfromace.
                $("#btnlikeornot").append(`<button type = 'submit' onclick ='btncommentunlike("$res[i].comment_id")' id="commentunlikebtn$res[i].comment_id" data-id="$res[i].u_id" class='comment-like-button-style'><img src='https://img.icons8.com/material-outlined/24/000000/like--v1.png'/></button>`);
            
            else 
                $("#btnlikeornot").append("<button type = 'submit' onclick ='btncommentlike(" + res[i].comment_id + ")' id='commentlikebtn" + res[i].comment_id + "' data-id='" + res[i].u_id + " ' class='comment-like-button-style'>" +
                    "<img src='https://img.icons8.com/material-rounded/24/fa314a/like.png' />" +
                    "</button>");
            
        
    );

我们调用 ajax 的方式总是很重要。

主启动线程 参考承诺：https://www.w3schools.com/js/tryit.asp?filename=tryjs_promise2

let IPromiseToReturnComments = func_GetComments();
IPromiseToReturnComments.then(() => 
    //here value is comments which is return by func_GetComments promise.
    $.each(value, (index, comment) => 
        GetLikeOrNotImgZoom(comment);
    );
);