如何使用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