【发布时间】：2019-06-20 14:16:50
【问题描述】：
我有几个导航按钮和一个内容区域。 如果不刷新整个页面，我无法将数据从 .JSON 文件拉到我的 HTML 内容区域。 当我点击某些导航按钮时，我只想更新我的内容区域
我尝试使用 AJAX，但它不起作用。由于我对 JSON 和 AJAX 的了解并不多，所以我搜索了一些关于如何做到这一点的信息，但它就是无法更新内容区域。
HTML 文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>A simple AJAX website with jQuery</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="rounded">
<img src="img/top_bg.gif" alt="top" />
<div id="main" class="container">
<h1>A simple AJAX driven jQuery website</h1>
<h2>Because simpler is better</h2>
<ul id="navigation">
<li><a href="#page_1">Page 1</a></li>
<li><a href="#page_2">Page 2</a></li>
<li><a href="#page_3">Page 3</a></li>
<li><a href="#page_4">Page 4</a></li>
<li><a href="#products">Products</a></li>
<li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li>
<br><br><br>
<li id="des1"><a href="#mushroom">Mushroom</a></li>
<li id="des2"><a href="#potato">Potato</a></li>
<li id="des3"><a href="#carrot">Carrot</a></li>
<li id="des4"><a href="#tomato">Tomato</a></li>
</ul>
<div class="clear"></div>
<div id="dvProdList"> </div>
<div class="clear"></div>
<div id="pageContent"> Hello, this is a demo for The Rich
Internet Application Case Study<a href="http://www.lithan.com" target="_blank">Lithan</a>. To test it,
click some of the buttons above. Have a nice stay!</div>
</div>
<div class="clear"></div>
<img src="img/bottom_bg.gif" alt="bottom" /></div>
<div class="demo" align="center">
this is a <a href="http://lithan.com/" target="_blank">Lithan</a>
demo</div>
</body>
</html>
script.js 文件
var default_content="";
$(document).ready(function(){
checkURL();
$('ul li a').click(function (e){
checkURL(this.hash);
});
//filling in the default content
default_content = $('#pageContent').html();
setInterval("checkURL()",250);
});
var lasturl="";
function checkURL(hash)
{
if(!hash) hash=window.location.hash;
if(hash != lasturl)
{
lasturl=hash;
// FIX - if we've used the history buttons to return to the homepage,
// fill the pageContent with the default_content
if(hash=="")
$('#pageContent').html(default_content);
else{
if(hash=="#products")
loadProducts();
else
loadPage(hash);
}
}
}
function loadPage(url)
{
url=url.replace('#','');
$('#loading').css('visibility','visible');
$.ajax({
type: "POST",
url: "load_page.jsp",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#loading').css('visibility','hidden');
}
}
});
}
function loadProducts() {
$('#loading').css('visibility','visible');
var jsonURL = "products.json";
$.getJSON(jsonURL, function (json)
{
var imgList= "<ul class=\"products\">";
$.each(json.products, function () {
imgList += '<li><img src= "' + this.imgPath + '"><h3>' + this.name + '</h3></li>';
});
imgList+='</ul>'
$('#pageContent').html(imgList);
$('#loading').css('visibility','hidden');
});
}
.JSON 文件
{
"productDes": [{
"title": "Mushrooms",
"details": "A mushroom, or toadstool, is the fleshy, spore-bearing fruiting body of a fungus, typically produced above ground on soil or on its food source.",
"price": "1kg = SGD20"
},
{
"title": "Potato",
"details": "The potato is a starchy, tuberous crop from the perennial nightshade Solanum tuberosum, native to the Americas. In many contexts, potato refers to the edible tuber, but it can also refer to the plant itself. Common or slang terms include tater, tattie and spud.",
"price": "1kg = SGD7"
},
{
"title": "Carrot",
"details": "The carrot is a root vegetable, usually orange in colour, though purple, black, red, white, and yellow cultivars exist. Carrots are a domesticated form of the wild carrot, Daucus carota, native to Europe and southwestern Asia.",
"price": "1kg = SGD4"
},
{
"title": "Tomato",
"details": "The tomato is the edible, often red, berry of the plant Solanum lycopersicum, commonly known as a tomato plant. The species originated in western South America. The Nahuatl word tomatl gave rise to the Spanish word tomate, from which the English word tomato derived.",
"price": "1kg = SGD5"
}
]
}
我只想在导航按钮和整个页面未刷新时更改内容区域上的现有内容，而只有内容区域更新为标题、描述、价格和内容旁边的图像的内容。
【问题讨论】：
-
我将在几分钟后发布一个示例，它会有所帮助 =)
-
您在使用 ajax 时走在了正确的轨道上。您需要具体告诉我们您在使用 ajax 时遇到了什么问题才能获得帮助。你已经尝试过什么，失败了怎么办？
-
有没有办法在这里张贴图片？因为我有一些图像可以告诉我我想做什么。