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页面，但它不会...而是加载当前页面。我也尝试过加载功能，但没有成功。额外信息：我正在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>

Answer 1

在评论讨论之后，看起来问题与框架或其他代码有关，因为一旦django，bootstrap和jquery-extra.js被删除，上面发布的精简代码就会令人满意地工作。

来源：

Selector load vs get

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 个答案: