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

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

javascript jquery html ajax

Javascript 如何使用AJAX和JQuery在div中加载html页面,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我正在尝试使用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> &l

我正在尝试使用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>


{%include“header.html”%}
奥特维克林田鼠
{%block content%}{%endblock%}
图恩德截图！
{%include“footer.html”%}
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.get（'screenshots.html'）.success（函数（数据）
{
$（'#loadHere'）.html（数据）；
});
});
});

不要介意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>


截图

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

资料来源：

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

在我的应用程序的view.py中，我向def current_页面添加了以下代码：

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

当前页面是按钮所在的页面，在我的例子中是def shop（request）（shopping list.html）。因此，当我收到来自该页面的ajax请求时，他会给出screenshots.html作为数据。这不是最好的方法，但它是有效的！：D

我的jQuery脚本：

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


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（'#loadHere'）。加载（'屏幕截图'）；
});
});

看起来应该能用。查看浏览器的开发工具。看看JavaScript控制台。它是否报告任何错误？看看网络标签。有人提出要求吗？它得到回应了吗？它们是否包含您期望的数据？看看DOM检查器，HTML是否被添加到DOM中？（可能图像无法加载）感谢您的快速回复！已发出请求，但我在控制台中收到一条消息：@Quentin Synchronous XMLHttpRequest（主线程上的@Quentin Synchronous XMLHttpRequest）已被弃用，因为它会对最终用户的体验产生有害影响。如需更多帮助，请查看。但是我也得到了消息：XHR完成加载：get…尝试

$.load（）

而不是

$.get（）

。您是否意识到（以及

$.post（）

？@gibberish Jup我知道。但正如我所说，我尝试了加载函数，结果是当前页面已加载到div中，而不是“screenshots.html”…我尝试了你的两个答案，但它仍然加载当前页面shopping-list.html，而不是screenshots.html。我完全在我这端复制了它，删除了bootstrap和jquery是额外的东西，而且似乎很有效。事实上，我想说的是，您的原始代码似乎有效。还有一些事情正在发生。可能是因为我使用了django框架（这很奇怪，但您永远不知道）或者可能是本地主机问题。但是非常感谢您的贡献！很高兴提供帮助。现在您已经看到了它们，我将在接下来的一段时间内删除这些测试页面。祝您项目顺利。