Question

在我的表单中，我在电子邮件输入按钮失去焦点后进行ajax调用。我正在使用返回的响应数据来填充模态。然后在模态中，用户可以单击按钮来选择他们想要的记录，并使用该数据填充表单。我正在传递按钮上的数据ID。

一切正常，直到我点击模态中的按钮。我想那时ajax响应不再可用了吗？

所以我的问题是：我是否必须再次进行ajax调用以查找数据，还是仍然可以引用它？

这是我的代码：

$(document).ready(function () {
    $(document).on('click', '.choosebtn', function () {
        console.log(this);
        $(".myModal").modal("hide");
        $('.myform').populate({
            response.DATA[event.target.id]
        }, {
            phpNaming: true,
            debug: true
        });
    });

    $('.email').blur(email_check);
});

function email_check() {
    var email = $('.email').val();
    var data = $('form').serialize();

    if (email == "" || email.length < 10) {
        $('.email').css('border', '3px ##CCC solid');
    } else {
        jQuery.ajax({
            type: "POST",
            url: "/managemembers/checkemail?format=json",
            data: data,
            dataType: "json",
            cache: false,
            success: function (response) {
                if (response.DATA) {
                    var trHTML = '';
                    $.each(response.DATA, function (index, value) {
                        trHTML += '<tr><td width="25%">' 
                        + value[0] + '</td><td width="25%">' 
                        + value[1] + '</td><td width="25%">' 
                        + value[2] + '</td><td width="25%">' 
                        + value[3] + '</td><td><button type="button" class="choosebtn" id=' 
                        + index + '>Choose</button></td></tr>';
                    });
                    $('.mytable').append(trHTML);

                    $(".myModal").modal("show");
                }
            }
        });
    }
}

Answer 1

response是AJAX success函数的本地函数，因此您无法访问populate函数。快速解决方法是将response分配给全局变量：

$(document).ready(function(){
    var ajaxResponseData;
    ..
    //Reference global in populate
    $('.myform').populate({ajaxResponseData.DATA......
    ..
    ..
    ..
    success: function (response) {
        ajaxResponseData = response;
});

Answer 2

目前尚不清楚您在哪里尝试访问无法访问的响应，但不是，您将无法在回调之外访问它。但是，如果稍后需要，可以将响应保存在ajax调用之外的变量中。像这样：

var yourResponseVariable;

jQuery.ajax({
   type: "POST",
   url: "/managemembers/checkemail?format=json",
   data: data,
   dataType: "json",
   cache: false,
   success: function (response) {
            if(response.DATA){
            var trHTML = '';

            $.each(response.DATA, function (index, value) {
                trHTML += '<tr><td width="25%">' + value[0] + '</td><td width="25%">' + value[1] + '</td><td width="25%">' + value[2] + '</td><td width="25%">' + value[3] + '</td><td><button type="button" class="choosebtn" id=' + index + '>Choose</button></td></tr>';
            });

            $('.mytable').append(trHTML);

            yourResponseVariable = response;

            $(".myModal").modal("show");
        }    
   }

});

您也可以保存部分内容，而不是整个回复，具体取决于您的需求。

Answer 3

一个选项是将您关心的值存储在隐藏字段中，并使用jQuery遍历函数来查找它：

所以目前在你的标记中，你最终会得到这个片段（以及其他内容）：

<td>
    <button type="button" class="choosebtn" id='1'>Choose</button>
</td>

您可以更改它，以便最终得到这个，隐藏字段包含您想要的信息：

<td>
    <button type="button" class="choosebtn" id='1'>Choose</button>
    <input type="hidden" class="myValue" />
</td>

然后在js：

$(document).on('click', '.chooseBtn', function() {
    var myVal = $(this).siblings('.myValue').val();
});

在回调后引用JQuery ajax响应

3 个答案: