$.ajax() 成功不会用另一个文件中的 div 更新 div（相同的 id 名称）答案

【问题标题】：$.ajax() in success doesn't update div with div from another file (the same id name)$.ajax() 成功不会用另一个文件中的 div 更新 div（相同的 id 名称）
【发布时间】：2018-05-01 21:08:04
【问题描述】：

我有两个文件 html，都有 div 同名 id = example.我想使用 $.ajax() 从第二个文件加载内容，并将当前文本放在第一个文件的 div 中。问题是 $(data).find('#example') 不返回元素 #example。我知道这个错误是因为我使用了相同的 id 名称，但毕竟我想从另一个文件下载这个 div，所以我不明白。谁能解释一下？

index.html:

<nav>
    <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="contact.html">contact</a></li>
    </ul>
</nav>
<div id="example">one one one one </div>

contact.html：

<nav>
    <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="contact.html">products</a></li>                        
    </ul>
</nav>
<div id="example">one one one one </div>

$('nav a').on('click', function(e){
    e.preventDefault();
    var url = this.href;

    $.ajax({
        type: "POST",
        url: url,      
        success: function(date){
            $('#example').html($(date).find('#example'));
      }
   });
 });

【问题讨论】：

您不能在一个页面中运行 AJAX 调用并期望它修改另一个页面。
我在第一页运行 ajax，我只想修改第一页
假设contact.html 是一整页应该可以工作。如果只是显示的 sn-p，请使用 filter() 而不是 find()。见演示plnkr.co/edit/CoNXqxeJjAK7gS47QrfI?p=preview
您的 URL 需要像 @charlietfl 建议的那样是完整的 URL。即：http://localhost/contact.html，不仅仅是contact.html
@codeninja 不，如果它们在同一目录中，则不会。 this.href 无论如何都会返回完整的 url，但也可以是相对路径

标签： javascript jquery ajax

【解决方案1】：

$('nav a').on('click', function(e){
    e.preventDefault();
    var url = this.href;

    $.ajax({
        type: "POST",
        url: url,      
        success: function(response){
            $('#example').html($(response.data).find('#example'));
      }
   });
 });

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

https://gitlab.com/Piterden/mcmp-pyro/blob/1.0/addons/default/defr/mcmp-theme/resources/js/theme/init.js#L144

【讨论】：