Bootstrap Popover通过Ajax取数后显示[object Object]问题求助

问题根源 #

你在Popover的content函数中直接返回了$.ajax()的返回值（一个jqXHR对象），而非异步请求获取到的数据。由于Ajax是异步操作，content函数会立即执行完毕并返回这个对象，Popover将其转换成字符串[object Object]显示，而success回调里的return data根本不会被Popover接收。

解决方案 #

方案一：通过Popover事件动态加载内容 #

先初始化Popover，再在显示前的事件里发起Ajax请求，拿到数据后更新内容：

$(document).ready(function () {
    $('#tog').on('click', function (e) {
        e.preventDefault();
    });
    console.log("Popover initialization started.");
    
    // 初始化Popover，先留空内容
    $('[data-toggle="popover"]').popover({
        placement: 'right',
        title: 'Update Changes',
        trigger: 'hover',
        html: true,
        content: ''
    })
    // 监听Popover即将显示的事件
    .on('show.bs.popover', function () {
        var $currentElement = $(this);
        var reasonCode = $currentElement.closest('tr').find('.reason_code').text();
        console.log("Reason code:", reasonCode);
        
        $.ajax({
            type: 'POST',
            url: 'CCA_Crups_Reason.aspx/GetPopoverContent',
            data: JSON.stringify({ reasonCode: reasonCode }),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (response) {
                var data = response.d;
                console.log(data);
                // 更新Popover的内容
                $currentElement.data('bs.popover').config.content = data;
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
                console.error("Ajax request failed:", xhr.responseText);
                // 加载失败时显示提示
                $currentElement.data('bs.popover').config.content = '加载失败，请重试';
            }
        });
    });
});

方案二：在content函数中用临时容器异步填充 #

返回一个空DOM容器，Ajax请求成功后再把数据填充进去：

$(document).ready(function () {
    $('#tog').on('click', function (e) {
        e.preventDefault();
    });
    console.log("Popover initialization started.");
    
    $('[data-toggle="popover"]').popover({
        placement: 'right',
        title: 'Update Changes',
        trigger: 'hover',
        html: true,
        content: function () {
            // 创建临时容器
            var $tempContainer = $('<div></div>');
            var reasonCode = $(this).closest('tr').find('.reason_code').text();
            console.log("Reason code:", reasonCode);
            
            $.ajax({
                type: 'POST',
                url: 'CCA_Crups_Reason.aspx/GetPopoverContent',
                data: JSON.stringify({ reasonCode: reasonCode }),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    var data = response.d;
                    console.log(data);
                    // 把数据填充到临时容器
                    $tempContainer.html(data);
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    console.error("Ajax request failed:", xhr.responseText);
                    $tempContainer.html('加载失败，请重试');
                }
            });
            
            return $tempContainer;
        }
    });
});

注意事项 #

• 不建议设置Ajax为同步（async: false），会阻塞页面，严重影响用户体验；
• 如果返回的data是HTML字符串，确保html: true配置正确，这样Popover会解析HTML内容。

内容的提问来源于stack exchange，提问作者Mr_Bcan