Question

所以我是jQuery的新手，我正在尝试设置一个带有标签的html页面。每个选项卡应显示不同的html页面，如下所示：

<div id="tabs">
   <a href="page1.html"><div class="tabdiv tabActive">Page1</div></a>
   <a href="page2.html"><div class="tabdiv">Page2</div></a>
   <a href="page3.html"><div class="tabdiv">Page3</div> </a>
   <a href="page4.html"><div class="tabdiv">Page4</div></a>
</div>
<div class="tabscontent" id="ajax-content">
    Default text
</div>

所以我想要的是当我点击第1页时，page1.html将被加载到div.tabscontent中。这是我的jQuery代码。

$(document).ready(function() {
    $("div#tabs a").click(function() {
                alert(this.href);
        $("#ajax-content").empty().append("Loading");
        $("div#tabs div.tabdiv").removeClass('tabActive');
        $(this).children('div.tabdiv').addClass('tabActive');

        $.ajax({ 
            url: this.href, 
            success: function(html) {
                $("#ajax-content").empty().append(html);
                alert("Success!");},
            error: function() {
                $("#ajax-content").empty().append("Didn't work");}
            });
    return false;
    });
});

注意：1）我附加了最新的jquery 2）我的page1.html，page2.html等与上面的html文件位于同一个文件夹中。 3）我在本地工作并尝试过google-chrome，firefox和opera，他们都有标签显示“没有工作”。即使我在网址中引用http://www.facebook.com它也不起作用。请帮帮我。

我将警报放在那里以查看href是否有效并且确实有效。例如，对于page1选项卡，它返回`file：///u/b/user/Desktop/ajaxdemo/Page1.html'

Answer 1

在您的情况下，它不起作用，因为您尝试从用户计算机访问文件。它会带来安全风险，因为如果javascript能够访问本地文件，javascript就能够从客户端计算机中窃取文件。

即使我在网址中引用http://www.facebook.com也没有工作

原因是：AJAX请求受同源策略的约束。 Facebook在另一个域上，这就是为什么它不起作用。

还有一点要记住，有些浏览器认为绝对网址是跨域请求，即使它位于同一个域，只有相对网址有效，所以请避免使用绝对网址。

要解决您的问题，请尝试在服务器上部署并使用相对网址而不是绝对网址。

使用jQuery的AJAX请求不起作用

1 个答案: