У меня есть несколько кнопок навигации и область содержимого для содержимого.Я не мог вытащить данные из файла .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>
*Файл 1007 * script.js * Файл 1008 *
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"
}
]
}
Я хочу изменить существующее содержимое в области содержимого только тогда, когда кнопки навигации и вся страница не обновляются.тогда как только содержимое области обновляется до содержимого заголовка, описания, цены и изображения рядом с содержимым.