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链接加载内容

回答

相关问题