使用jQuery的AJAX請求不起作用

所以我是jQuery的新手，我試圖設置一個帶有製表符的html頁面。每個標籤都應該表現出不同的html頁面如下：使用jQuery的AJAX請求不起作用

<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）I的page1.html，page2.html等都是在相同的文件夾在上述HTML文件。 3）我在本地工作，並嘗試過谷歌瀏覽器，firefox和opera，他們都有標籤顯示「沒有工作」。即使當我在網址中引用http://www.facebook.com時，它也不起作用。請幫幫我。

我把警報放在那裏，看看href是否工作，它是否工作。例如，對於page1選項卡，它會返回`file：///u/b/user/Desktop/ajaxdemo/Page1.html'

來源

2013-06-30 barrigaj

AJAX請求受限於同源策略，除非您發送請求的服務器明確允許請求。 – Blender

你應該真的設置一個開發服務器，這樣你可以避免這樣的東西。 – Musa

@Blender他的URL中沒有主機名，所以他們要到主頁面的服務器。 – Barmar

就你而言，它不起作用，因爲你試圖從用戶訪問文件電腦。它構成了安全風險，因爲如果javascript能夠訪問本地文件，javascript能夠從客戶端機器盜取文件。

即使我在URL引用http://www.facebook.com它不工作

這樣做的原因是：AJAX請求是受同源策略。 Facebook在另一個域上，這就是爲什麼它不起作用。

還有一兩件事要記住，一些瀏覽器認爲絕對URL是跨域請求即使是在同一個域中，只有相對URL，因此要避免使用絕對URL。

要解決您的問題，請嘗試在服務器上進行部署，並使用相對URL而不是絕對URL。

來源

2013-06-30 04:06:02

謝謝！這真的有幫助 – barrigaj

使用jQuery的AJAX請求不起作用

回答

相關問題