如何使用AJAX和JQuery在div中加载html页面
[英]How to load html page in div using AJAX and JQuery
问题描述
I'm trying to load an HTML page in a div with AJAX. 
我正在尝试使用AJAX在div中加载HTML页面。 I have the following code 我有以下代码
<!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>
Don't mind the Django (python framework) code. 不要介意Django（python框架）代码。 When I click on the button it should display the screenshots.html page in de the div but it doesn't... Instead it loads the current page. 当我单击该按钮时，它应该在div中显示screenshots.html页面，但不会...而是加载当前页面。 I've also tried the load function, but with no success. 我也尝试过加载功能，但没有成功。 Extra info: I'm running my django-website on localhost. 额外信息：我正在本地主机上运行django网站。
Screenshots.html code: 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>
2 个解决方案
解决方案1
1 2015-02-21 22:55:11
After comment discussion, it appears the problem is related to framework or other code, as the stripped down code posted above works satisfactorily once django, bootstrap and jquery-extra.js were removed. 经过评论讨论后，问题似乎与框架或其他代码有关，因为一旦删除django，bootstrap和jquery-extra.js，上面发布的精简代码就可以令人满意地工作。
Sources: 资料来源：
解决方案2
0 已采纳 2015-02-22 13:33:51
The problem was indeed with the Django-framework. 问题确实出在Django框架上。 My solution: 我的解决方案：
In view.py of my application I added the following code to def current_page: 在我的应用程序的view.py中，我向def current_page添加了以下代码：
if request.is_ajax():
return render_to_response("screenshots.html",
locals(),
context_instance=RequestContext(request)
)
The current_page is the page where the button is located, in my case it is def shop(request) (shopping-list.html). current_page是按钮所在的页面，在我的例子中是def shop（request）（shopping-list.html）。 So when I've an ajax request from that page he gives the screenshots.html as data. 因此，当我从该页面收到ajax请求时，他将screenshots.html作为数据提供。 This isn't the optimal way to do it, but it works! 这不是最佳的方法，但是有效！ :D ：d
My jQuery script: 我的jQuery脚本：
<script>
$(document).ready(function(){
$("button").click(function(){
$('#loadHere').load('screenshots');
});
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.