我有一些导航按钮和一个内容区域。 如果不刷新整个页面，就无法将数据从.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"
}
]
}
我只想在不刷新导航按钮和整个页面的同时更改内容区域中的现有内容，而仅将内容区域更新为内容旁边的标题，说明，价格和图像。 / p>
答案 0 :(得分：0)
当您谈论“导航按钮和内容的内容区域”时，我不知道您使用的是哪种html元素，但这并不重要，因为您要做的就是将数据加载到某些html元素中。
此示例使用带有模板，ajax和您的json文件的formatUnicorn函数，此功能使用一个简单的循环为productDes数组的每个json元素创建一个html元素：
HTML内容：
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<script type="text/template" id="listTemplate">
<li ><a data-toggle="tab" href="#{title}">{title}</a></li>
</script>
<script type="text/template" id="divTemplate">
<div id="{title}" class="tab-pane fade">
<h3>{title}</h3>
<p>{details}</p>
<br>
<p>Price: {price}</p>
</div>
</script>
<div class="container">
<h2>Navigation with Tabs</h2>
<p>Example to fill json content in tabs</p>
<ul class="nav nav-tabs" id="listOfItems">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
</ul>
<div class="tab-content" id="listOfDivs">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</body>
脚本：
String.prototype.formatUnicorn = function () {
"use strict";
var str = this.toString();
if (arguments.length) {
var t = typeof arguments[0];
var key;
var args = ("string" === t || "number" === t) ?
Array.prototype.slice.call(arguments)
: arguments[0];
for (key in args) {
str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), (Array.isArray(args[key]) ? JSON.stringify(args[key]) : args[key]));
}
}
return str;
};
// this function replaces the {} elements with the value of and array element that have the same key name
function _ajax(){
return $.ajax({
url: 'products.json',
type: 'GET',
dataType: 'JSON'
})
}
//a simple ajax function to get the productDes array from the products.json file
//once you call the function and get the response with the deferred done you loop through the array
//and fill the template with the element that match the key, after that you append the element to your container
_ajax().
done((response)=>{
let lisItemTemplate = $('#listTemplate').html(),
divItemTemplate = $('#divTemplate').html();
console.log(response);
if (response.productDes.length > 0) {
$.each(response.productDes,function(index, el) {
var listItem = lisItemTemplate.formatUnicorn(el);
var divItem = divItemTemplate.formatUnicorn(el);
$('#listOfItems').append(listItem);
$('#listOfDivs').append(divItem);
});
}
})
最后，这是不使用Ajax的代码段，仅使用products数组：
String.prototype.formatUnicorn = function() {
"use strict";
var str = this.toString();
if (arguments.length) {
var t = typeof arguments[0];
var key;
var args = ("string" === t || "number" === t) ?
Array.prototype.slice.call(arguments) :
arguments[0];
for (key in args) {
str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), (Array.isArray(args[key]) ? JSON.stringify(args[key]) : args[key]));
}
}
return str;
};
let products = {
"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"
}
]
};
let lisItemTemplate = $('#listTemplate').html(),
divItemTemplate = $('#divTemplate').html();
if (products.productDes.length > 0) {
$.each(products.productDes, function(index, el) {
var listItem = lisItemTemplate.formatUnicorn(el);
var divItem = divItemTemplate.formatUnicorn(el);
$('#listOfItems').append(listItem);
$('#listOfDivs').append(divItem);
});
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>
<script type="text/template" id="listTemplate">
<li><a data-toggle="tab" href="#{title}">{title}</a></li>
</script>
<script type="text/template" id="divTemplate">
<div id="{title}" class="tab-pane fade">
<h3>{title}</h3>
<p>{details}</p>
<br>
<p>Price: {price}</p>
</div>
</script>
<div class="container">
<h2>Navigation with Tabs</h2>
<p>Example to fill json content in tabs</p>
<ul class="nav nav-tabs" id="listOfItems">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
</ul>
<div class="tab-content" id="listOfDivs">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</body>
希望有帮助