jQuery 从 Ajax 链接加载内容答案

【问题标题】：jQuery load content from link with AjaxjQuery 从 Ajax 链接加载内容
【发布时间】：2020-06-13 01:52:09
【问题描述】：

我有一个 -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);
});

【问题讨论】：

你错过了一个'。'在 attr 的左侧。

标签： javascript jquery ajax

【解决方案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 请求只能在同一个域中完成。

【讨论】：

【解决方案2】：

你的代码有几个问题：

1) 您没有指定匿名函数的参数。论点是事件（这里：点击）。您稍后将需要它来禁用“正常” 点击行为：

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

2) 阅读不需要val() 的href。（val() 用于从输入字段中读取内容。）

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

3) AJAX 中的 A 代表异步。对于您的代码，这意味着：仅加载开始从服务器加载数据，但不会等待直到完成。您必须定义一个回调函数，以便在数据最终到达时对其进行处理。

4) load 用于执行 AJAX 调用并将结果插入到 DOM 中。您不能将其用于警报。如果您确实需要警报，请改用 $.ajax。

5) 您不能通过 AJAX 加载任意 URL，您的 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);
      }
    });
    });

});

【讨论】：

【解决方案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 和其他方面。

希望这会有所帮助
干杯:)

【讨论】：

【解决方案4】：

@bjelli 有点正确。但你可能想拥有你的 e.preventDefault(); 在您的 AJAX 调用或您想要做的所有其他事情之前，因为您真的不希望客户端旧且慢的浏览器甚至尝试加载初始请求的资源。

尽管某些编程语言可以发挥一些神奇的作用，但大多数脚本都是从您的脚本的顶部到底部工作的。

【讨论】：