Question

我有一个-link元素，它具有href链接到页面，但我必须使用Ajax从href -url加载该内容，而不是将用户重定向到该页面。如何修改链接以仅加载该链接中的内容，以便将该内容注入当前页面？

<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);
});

Answer 1

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请求。

Answer 2

您的代码存在一些问题：

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）load用于进行AJAX调用，将结果插入DOM。你不能用它作为警报。如果您需要提醒，请使用$ .ajax。

5）你无法通过AJAX加载abitrary，你的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);
      }
    });
    });

});

Answer 3

如果你有一个带有这种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>
}

如果您想要开发一个支持服务器端的屏幕并且您希望动态加载屏幕内容，同时使用片段URL管理浏览器历史记录，这会派上用场。有许多库可用于跨浏览器使用片段URL管理屏幕内容。无论是在jQuery还是其他方面。

希望这会有所帮助干杯：）

Answer 4

@bjelli很好。但是你可能想拥有你的 e.preventDefault(); 首先，在您进行AJAX调用或您想做的所有其他事情之前，因为您确实不希望老旧且运行缓慢的客户端甚至尝试加载初始请求的资源。

即使某些编程语言可以起到一定的作用，但大多数脚本都是在脚本的顶部到底部工作。

jQuery从Ajax链接加载内容

4 个答案: