使用 jQuery 的 AJAX 请求不起作用

AJAX request using jQuery does not work(使用 jQuery 的 AJAX 请求不起作用)

问题描述

所以我是 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，它们都有显示不起作用"的标签.即使我在网址中引用 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 是跨域请求即使它在同一个域中，只有相对 URL 有效，所以避免使用绝对 URL.

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 请求不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！