Question

所以，我是Javascript的新手，让我们解决这个问题。

无论如何，我有以下代码可以在IE中使用，但不能在Chrome或FF中使用。它应该从Reddit RSS中获取数据，然后输出它，就是这样。它只在IE中工作。谁能解释我在这里做错了什么？

<html>                                                                  
<head>                                                                  
<script type="text/javascript"         
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>          
<script type="text/javascript"> 


var result = null;
 $.ajax({
    url: "http://www.reddit.com/.rss",
    type: 'get',
   dataType: 'html',
    async: false,
    success: function(data) {
     result = data;

    }
 });

 document.write(result);

</script>
</head>
</body>
</html>

Answer 1

是的，这段代码看起来不正确。这是一场竞争。 document.write立即执行。 ajax可能会也可能没有及时设置结果。你需要在成功事件中将结果添加到页面中......例如：

$.ajax({
    url: "http://www.reddit.com/.rss",
    type: 'get',    dataType: 'html',
    async: false,
    success: function(data) {
     $("#some-div").html(data);

    }  });

Answer 2

由于$.ajax异步，您有竞争条件。改为在成功处理程序中显示结果，以确保请求已完成。

 $.ajax({
    url: "http://www.reddit.com/.rss",
    type: 'get',
   dataType: 'html',
    async: false,
    success: function(data) {
      document.write(data);
    }
 });

<强>更新

由于您将async设置为false，因此上述语句不适用。但是，我没有找到使用document.write()的充分理由，这可能是您问题的一部分。尝试使用其他方法将数据注入到您的页面中，例如.html()，.append()，alert()等。在document.ready内执行此操作也不会有任何问题。

$(document).ready(function() {
    var result = null;
     $.ajax({
        url: "http://www.reddit.com/.rss",
        type: 'get',
       dataType: 'html',
        async: false,
        success: function(data) {
         result = data;
        }
     });

    alert(result);
    $("body").append(result);
});

Answer 3

以这种方式处理怎么样：

(function(url, callback) {
    jQuery.ajax({
        url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
        dataType: 'json',
        success: function(data) {
            callback(data.responseData.feed);
        }
    });
})('http://www.reddit.com/.rss', function(feed) {
    var entries = feed.entries,
        feedList = '';
    for (var i = 0; i < entries.length; i++) {
        feedList += '<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>';
    }
    jQuery('.rssfeed > ul').append(feedList);
});

HTML：

<div class="rssfeed">
    <h4>RSS News</h4> 
    <ul></ul> 
</div>

示例：http://jsfiddle.net/QusQC/

JavaScript - 结果在IE中显示但不在Chrome或FF中显示

3 个答案: