如何在 jQuery 中输出 JSON 列

发布于 2024-09-03 07:13:10 字数 1022 浏览 7 评论 0原文

我正在使用 qTip jQuery 插件来创建动态工具提示。工具提示将 id 发送到 cfc，该 cfc 运行查询并返回 JSON 格式的数据。

目前，工具提示加载以下内容：

{"COLUMNS:" ["BOOKNAME","BOOKDESCRIPTION"["MYBOOK","MYDESC"]]}

Here's the jQuery

$('#catalog a[href]').each(function()
{
    var gi = parseInt($(this).attr("href").split("=")[1])
    $(this).qtip(
    {
        content: {
            url: 'cfcs/viewbooks.cfc?method=bookDetails',
            data: { bookID: gi  },
            method: 'get',
            title: {
                text: $(this).text(),
                button: 'Close'
            }
        },
        api :{
        onContentLoad : function(){
            }
        },
    });
});

正如我所提到的，数据已成功返回，但我不确定如何输出它并使用 HTML 格式化它。

我尝试添加 content: '

' + data.BOOKNAME + '

' to api :{ onContentLoad : function(){ ..... to see if I could get it to output something, but I get a 'data is undefined error'

尝试使用 HTML 格式输出此数据的正确方法是什么？

原文

I'm using the qTip jQuery plugin to create dynamic tool tips. The tooltip sends an id to a cfc which runs a query and returns data in JSON format.

At the moment, the tooltip loads with the following:

{"COLUMNS:" ["BOOKNAME","BOOKDESCRIPTION"["MYBOOK","MYDESC"]]}

Here's the jQuery

$('#catalog a[href]').each(function()
{
    var gi = parseInt($(this).attr("href").split("=")[1])
    $(this).qtip(
    {
        content: {
            url: 'cfcs/viewbooks.cfc?method=bookDetails',
            data: { bookID: gi  },
            method: 'get',
            title: {
                text: $(this).text(),
                button: 'Close'
            }
        },
        api :{
        onContentLoad : function(){
            }
        },
    });
});

As I mentioned, the data is returned successfully, but I am unsure how to output it and format it with HTML.

I tried adding content: '<p>' + data.BOOKNAME + '

' to api :{ onContentLoad : function(){ ..... to see if I could get it to output something, but I get a 'data is undefined error'

What is the correct way to try and output this data with HTML formatting?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

红ご颜醉 2024-09-10 07:13:10

从 qTip 论坛来看，作者似乎正在添加api 回调中的 ajax 调用。也许这能解决你的问题？

这是他的例子：

$(this).qtip({
 content: 'Loading...',
 api: {
  onRender: function()
  {
   // Setup your AJAX request here
   $.ajax({
    url: DOC_ROOT + "admin/ajax/tooltip_process.php",
    type: 'GET';
    contentType: "application/json charset=utf-8",
    dataType: "json",
    success: function(json) {
     if(json[0].result == 'success') return json[0].tip;
     else alert('^$%#$#
);
    }
   });
  }
});

From the qTip forums, it appears that the author is adding an ajax call inside the api callback. Maybe that will solve your problem?

Here is his example:

$(this).qtip({
 content: 'Loading...',
 api: {
  onRender: function()
  {
   // Setup your AJAX request here
   $.ajax({
    url: DOC_ROOT + "admin/ajax/tooltip_process.php",
    type: 'GET';
    contentType: "application/json charset=utf-8",
    dataType: "json",
    success: function(json) {
     if(json[0].result == 'success') return json[0].tip;
     else alert('^$%#$#
);
    }
   });
  }
});

回复收藏 0 原文