如何使用 AJAX 和 JQuery 在 div 中加载 html 页面答案

【问题标题】：How to load html page in div using AJAX and JQuery如何使用 AJAX 和 JQuery 在 div 中加载 html 页面
【发布时间】：2015-04-23 11:55:54
【问题描述】：

我正在尝试使用 AJAX 在 div 中加载 HTML 页面。我有以下代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
    <div id="wrapper">
        {% include "header.html" %}

        <div id="content">

            <div class="jumbotron">
                <div class="container">
                    <h2 class="text-center">MOMENTEEL IN VOLLE ONTWIKKELING</h2>
         {% block content %}{% endblock %}
                </div>
            </div>

             <button>Toon de Screenshots!</button>

            <div id="loadHere"></div>
    </div>

    <div class="push"></div>
    <a href="#" class="back-to-top hidden-sm hidden-xs"><span class="glyphicon glyphicon-chevron-up pull-right top"></span></a>


   {% include "footer.html" %}

</div>




<script src="../static/js/bootstrap.js"></script>
<script src="../static/js/jquery-extra.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get('screenshots.html').success(function(data)
 {
     $('#loadHere').html(data);
 });
    });
});
</script>


</body>

不要介意 Django（python 框架）代码。当我单击按钮时，它应该在 div 中显示 screenshots.html 页面，但它没有...而是加载当前页面。我也尝试过加载功能，但没有成功。额外信息：我在 localhost 上运行我的 django 网站。

Screenshots.html 代码：

<div class="container">
                <div class="push"></div>
                <div class="page-header">
                    <h2>Screenshots</h2>
                </div>
                <div class="row">
                <div class="col-md-3 col">
                        <img src="../media/Shopping-list/2014-09-02 10.08.11.png"/>
                    </div>
                    <div class="col-md-3 col">
                     <img src="../media/Shopping-list/2014-09-02 10.08.17.png"/>
                 </div>
                 <div class="col-md-3 col">
                    <img src="../media/Shopping-list/2014-09-02 10.08.31.png"/>
                </div>
                <div class="col-md-3 col">
                    <img src="../media/Shopping-list/2014-09-02 10.08.40.png"/>
                </div>
            </div>

        </div>

【问题讨论】：

看起来应该可以了。查看浏览器的开发者工具。查看 JavaScript 控制台。它是否报告任何错误？查看“网络”选项卡。是否正在提出请求？它得到回应了吗？它们是否包含您期望的数据？看看 DOM 检查器，是否将 HTML 添加到 DOM 中？（也许图像只是无法加载）
感谢您的快速回复！该请求已发出，但我在控制台中收到一条消息：主线程上的@Quentin Synchronous XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。如需更多帮助，请查看xhr.spec.whatwg.org。但我也收到消息：XHR 完成加载：GET ....
尝试$.load() 而不是$.get()。你知道吗（还有$.post()are just short forms of the $.ajax() method？
@gibberish Jup 我知道。但是正如我所说的我已经尝试了加载功能，我得到的结果是当前页面已经加载到了 div 中，而不是 'screenshots.html'...

标签： javascript jquery html ajax

【解决方案1】：

经过评论讨论，问题似乎与框架或其他代码有关，因为一旦删除了 django、bootstrap 和 jquery-extra.js，上面发布的精简代码就可以令人满意地工作。

来源：

Selector load vs get

【讨论】：

我已经尝试了你的两个答案，但它仍然加载当前页面 shopping-list.html 而不是 screenshots.html。
我完全复制了它，删除了引导程序和 jquery-extra 的东西，它似乎工作。 Try this.
事实上，我的意思是您的原始代码似乎可以工作。其他事情正在发生。
也许是因为我使用了 django-framework（会很奇怪，但你永远不知道）或者是本地主机问题。但是非常感谢您的贡献！
很高兴为您提供帮助。既然您已经看过它们，我将在接下来的一段时间内删除这些测试页。祝你的项目好运。

【解决方案2】：

问题确实出在 Django 框架上。我的解决方案：

在我的应用程序的 view.py 中，我将以下代码添加到 def current_page：

if request.is_ajax():
        return render_to_response("screenshots.html",
                              locals(),
                              context_instance=RequestContext(request)
                             )

current_page 是按钮所在的页面，在我的例子中是 def shop(request) (shopping-list.html)。因此，当我从该页面发出 ajax 请求时，他将 screenshots.html 作为数据提供。这不是最佳的方法，但它有效！ :D

我的 jQuery 脚本：

<script>
$(document).ready(function(){
 $("button").click(function(){
  $('#loadHere').load('screenshots');
  });
});
</script>

【讨论】：