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

Question

我正在尝试使用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页面，但不会...而是加载当前页面。 我也尝试过加载功能，但没有成功。 额外信息：我正在本地主机上运行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>

Answer 1

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

资料来源：

选择器加载与获取

Answer 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>

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

问题描述

2 个解决方案

解决方案1
1 2015-02-21 22:55:11

解决方案2
0 已采纳 2015-02-22 13:33:51

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

问题描述

2 个解决方案

解决方案1 1 2015-02-21 22:55:11

解决方案2 0 已采纳 2015-02-22 13:33:51

解决方案1
1 2015-02-21 22:55:11

解决方案2
0 已采纳 2015-02-22 13:33:51