jquery html没有传回getJSON函数范围问题中的html变量

时间:2014-07-06 18:58:17

标签: jquery ajax json

    html += '<ul>';
    var url = '/jr/public/ajax/stories.php?storyId=' + data.storyId + '&type=comments' ;        
    jQuery.getJSON(url,function(datum){                     
        jQuery.each(datum,function(i,elm){
            html += '<li><div class="c-thumb">';
            html += '<img alt="" src="'+elm.thumbImageUrl+'"/>';
            html += '<div class="c-text">';
            html += '<h6><a href="">'+elm.userName+'</a> - '+elm.dateStamp+'</h6>';
            html += '<p>' + elm.commentContent+'</p>';
            html += '</div></li>';      
        });
    });     
    html += '</ul>';

html变量未将getJSON函数中的内容添加到范围外的html变量集中。

1 个答案:

答案 0 :(得分:2)

getJSON函数立即返回 。这是因为来自A首字母缩写的第一个AJAX字母意味着异步。发送请求,当服务器完成处理时,将执行回调。

因此,只有内部此回调才能使用html变量。

var url = '/jr/public/ajax/stories.php';
jQuery.getJSON(url, { storyId: data.storyId, type: 'comments' }, function(datum) {                     
    var html = '<ul>';
    jQuery.each(datum,function(i,elm){
        html += '<li><div class="c-thumb">';
        html += '<img alt="" src="'+elm.thumbImageUrl+'"/>';
        html += '<div class="c-text">';
        html += '<h6><a href="">'+elm.userName+'</a> - '+elm.dateStamp+'</h6>';
        html += '<p>' + elm.commentContent+'</p>';
        html += '</div></li>';      
    });

    html += '</ul>';
    // Here and only here use the html variable. For example you could update the
    // DOM with the value of this variable
});