Question

我正在尝试使用javascript和jquery根据从数据库返回的信息构建HTML表。我有JSON和数据库命中正常工作，但我无法在我的页面上显示数据。

这是显示数据的代码

var temp;

var init = function() {
    $(_getMarketInfo()).appendTo(document.body);

    // Used for logging
    temp = $(_getMarketInfo());
    console.log(temp);
};

然后获取并处理数据

function _getMarketInfo() {
    $.ajax({
        url:'scripts/db_getMarketInfo.cgi',
        dataType:'json',
        success:function(data, testStatus) {
            var html = '';
            html +='<div class="marketInfoHolder">';
            html +='<table class="tbl" border=1>';
            html +='    <tr><th>Market Information</th></tr>';
            html +='    <tr><td>Market</td></tr>';

            for (var i=0;i< data.marketInfo.length; i++){
                html += '<tr><td>' + data.marketInfo[i].market_name + '</td></tr>';
            }

            html +='</table>';
            html +='</div>';

            //used for logging
            console.log(html);

            return html;
        },
        error:function(data, textStatus) {
            alert('There was an error getting market information.');
        }
    });
 };

根据控制台日志，html变量确实有一个表的正确html代码，但是当我查看temp变量时，它被记录为[]。看来，由于某种原因，_getMarketInfo（）没有正确地将html返回到temp。

Answer 1

只需将你的appendTo逻辑移动到成功中：函数（data，testStatus）{你的ajax调用

Answer 2

由于ajax运行异步，因此无法从成功函数返回。此外，如果你在$（）中包装东西，它们将成为一个数组，因为这就是jQuery的工作方式。

var init = function() {
  $.ajax({
    url: 'scripts/db_getMarketInfo.cgi',
    dataType: 'json',
    success: marketsDownloaded,
    error: errorRecieved
  });
},

marketsDownloaded = function(data, status) {
  // build your html here and append it to body
},

errorRecieved = function(data, status) {
}

$(function() {
  init();
}

您还可以将代码放在某个命名空间中，以便将其清理得更多

Answer 3

我会使用在ajax调用成功时触发的自定义事件。

var init;

// bind a custom event to the document that is
// triggered in your ajax success callback
$(document).bind('init', function (html) {
    init = html;

    // Used for logging
    console.log(init);    
});

// run _getMarketInfo in a document ready handler
// because you are accessing the DOM
$(document).ready(function () {
    $(_getMarketInfo()).appendTo(document.body);    
});

// your ajax call function
function _getMarketInfo() {
    $.ajax({
        url:'scripts/db_getMarketInfo.cgi',
        dataType:'json',
        success:function(data, testStatus) {
            var html = '';
            html +='<div class="marketInfoHolder">';
            html +='<table class="tbl" border=1>';
            html +='    <tr><th>Market Information</th></tr>';
            html +='    <tr><td>Market</td></tr>';

            for (var i=0;i< data.marketInfo.length; i++){
                html += '<tr><td>' + data.marketInfo[i].market_name + '</td></tr>';
            }

            html +='</table>';
            html +='</div>';

            // trigger your custom event with
            // the html used as a custom parameter;
            // custom event parameters must be passed
            // in an array
            $(document).trigger('init', [html]);

            // return your html for appending
            return html;
        },
        error:function(data, textStatus) {
            alert('There was an error getting market information.');
        }
    });
 };

使用函数用Javascript设置变量？

3 个答案: