jQuery從Ajax鏈接加載內容

我有一個鏈接href鏈接頁面的鏈接元素，但我必須使用Ajax從href -url加載該內容，而不是將用戶重定向到該頁面。我怎樣才能修改我的鏈接，只是從該鏈接加載內容，所以我可以注入該內容到當前頁面？jQuery從Ajax鏈接加載內容

<a class="bind-jquery-event-here-class" href="http://webpage.com">Link</a>

我做了這個，但它不起作用。

$(".bind-jquery-event-here-class").bind("click", function() {  
    var url = $(this)attr("href").val(); 
    var content = $.load(url); 
    alert(content); 
});

來源

2009-08-20 newbie

你已經錯過了 ''到attr的左側。 – rahul 2009-08-20 06:39:13

的load功能並不旨在收集請求響應，該函數被用於從一個遠程文件加載HTML並將其注入到DOM元素，例如：

$('a').bind('click', function(e) {   
    var url = $(this).attr('href'); 
    $('div#container').load(url); // load the html response into a DOM element 
    e.preventDefault(); // stop the browser from following the link 
});

如果處理錨點元素的點擊事件，你應該阻止瀏覽器遵循鏈接href。

另請注意，由於Same Origin Policy只能使用相同的域進行Ajax請求。

來源

2009-08-20 06:31:51 CMS

此代碼不工作，因爲val（） – bjelli 2009-08-20 07:06:59

@bjelli：謝謝，修復了複製粘貼錯誤 – CMS 2009-08-20 07:29:47

有幾個問題與您的代碼：

1）沒有指定您的匿名函數的參數。參數是事件（這裏：點擊）。你會稍後需要到禁用點擊的「正常」行爲：

$("a.bind-jquery-event-here-class").bind("click", function(event) { 
     event.preventDefault();

2）閱讀HREF你不需要val()。（val()是用於從輸入字段讀取的東西。）

var url = $(this).attr("href");

3）在AJAX的A代表異步。對於你的代碼來說，這意味着：只加載開始從服務器加載數據，但不等待，直到完成。您必須定義一個回調函數，它在最終到達時處理數據。

4）負載是用來做AJAX調用的，而是將的結果插入到DOM中。你不能用它來提醒。如果您需要警報，請使用$ .ajax。 5）您不能通過AJAX加載任意網址，您的AJAX呼叫只能返回到您的自己的服務器。如果您需要從其他服務器加載內容，則必須使用服務器端腳本作爲代理。這裏是你如何調用代理：

$.ajax({ 
     type: "POST", 
     url: "proxy.php", 
     data: "url="+url, 
     success: function(data){ 
      alert("finally got data " + data); 
     } 
    });

，這裏是在PHP的例子代理。

<?php 
error_reporting (E_ALL^E_NOTICE); 
if (isSet($_POST['url'])) { 
    if(true == ($str=file_get_contents($_POST['url']))) { 
    echo $str; 
    exit; 
    } 
} 
echo "could not read page"; 
?>

一句關於php的警告：file_get_contents可能在您的服務器上禁用。

的這裏是完整的javascript代碼用於測試：

$(document).ready(function(){ 

    $("a.bind-jquery-event-here-class").bind("click", function(event) { 
    event.preventDefault(); 
    var url = $(this).attr("href"); 
     alert("loading via proxy: " + url); 
    $.ajax({ 
     type: "POST", 
     url: "proxy.php", 
     data: "url="+url, 
     success: function(data){ 
     alert("finally got data " + data); 
     } 
    }); 
    }); 

});

來源

2009-08-20 07:06:24 bjelli

，如果你有這樣的HREF鏈接整個菜單中，您可以通過菜單中的div容器選擇每個子元素做到這一點它附加一個onclick事件

$('#Menu >*').each(function(){<br> 
     $(this).bind('click',function(e){<br> 
      var el = e.target<br> 
      if(el.nodeName ==="A"){<br> 
       fireMenuLink(el.href);<br> 
      }<br> 
      return false;<br> 
     });<br> 
    });

你應始終在jQuery的返回false打壓標籤

function fireMenuLink(){<br> 
$("#container_element_ID").load(url,function(){<br> 
//Do something like hide the loader<br> 
     $('loaderStatus').hide();<br> 
    });<br> 
}

如果你想開發一種具有從服務器端支持的屏幕這是在方便的默認行爲和u想要動態加載屏幕內容，同時使用片段URL管理瀏覽器歷史記錄。有許多庫可用於跨瀏覽器使用片段URL來管理屏幕內容。無論是在jQuery和其他方面。

希望這有助於
乾杯:)

來源

2009-08-20 08:05:43 moha297

jQuery從Ajax鏈接加載內容

回答

相關問題