使用jQuery的AJAX请求不起作用 [英] AJAX request using jQuery does not work

问题描述

因此，我是jQuery的新手，我正在尝试建立一个带有选项卡的html页面.每个标签应显示不同的html页面，如下所示:

So I am new to jQuery and I'm trying to set up an html page that has tabs. Each tab should show a different html page as follows:

<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代码.

So what I want is that when I click on page 1, page1.html will be loaded up in div.tabscontent. This is the jQuery code that I have.

$(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，它们都有显示没有工作"的标签.即使我在URL中引用 http://www.facebook.com 也不起作用.请帮助我.

Note: 1) I have the latest jquery attached 2) I the page1.html, page2.html, etc are in the same folder as the above html file. 3) I am working locally and have tried google-chrome, firefox, and opera and they all had tabs that showed "Didn't work". Even when I reference http://www.facebook.com in the url it doesn't work. Please help me.

我在其中放置了警报，以查看href是否起作用以及它是否起作用.例如，对于page1选项卡，它返回`file:///u/b/user/Desktop/ajaxdemo/Page1.html'

I put the alert in there to see if the href works and it does work. For example for page1 tab it returns `file:///u/b/user/Desktop/ajaxdemo/Page1.html'

推荐答案

在您的情况下，此方法不起作用，因为您正尝试从用户计算机访问文件.这样做会带来安全风险，因为如果javascript能够访问本地文件，则javascript能够从客户端计算机窃取文件.

In your case, it does not work because you're trying to access a file from user computer. It poses security risks because if javascript is able to access local files, javascript is able to steal files from client machine.

即使我在URL中引用 http://www.facebook.com ，也不会 工作

Even when I reference http://www.facebook.com in the url it doesn't work

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

The reason for this is: AJAX requests are subject to the same-origin policy. Facebook is on another domain, that's why it does not work.

还有一点要记住，一些浏览器认为绝对URL是跨域请求，即使在同一个域中，只有相对的Urls有效，因此请避免使用绝对的Urls.

One more thing to keep in mind, some browsers think absolute URLs are cross-domain requests even if it's in the same domain, only relative Urls work, so avoid using absolute Urls.

要解决您的问题，请尝试在服务器上进行部署，并使用相对URL而不是绝对URL.

To fix your issues, try deploying on a server and use relative URLs instead of absolute URLs.

这篇关于使用jQuery的AJAX请求不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！