我有几个函数可以解析外部/内部JSON数据，并使用localStorage将其返回到本地网页。现在我已经正确显示了外部JSON数据，但是没有在本地提交JSON数据并且出现JSON.parse: unexpected end of data错误。解析此数据的函数是retrieveData()。
以下是我尝试做的事情的例子。
function saveData () { //This function take the data from the html inputs and put the values into local storage
getRadio();
getCheckbox();
localStorage.setItem("Categories", $("select").value);
localStorage.setItem("Name", $("Name").value);
localStorage.setItem("Rating", $("rating").value);
localStorage.setItem("Recommend", recommendValue);
localStorage.setItem("Favorite", Favorite);
localStorage.setItem("Date", $("date").value);
localStorage.setItem("Notes", $("notes").value);
alert("Resource Saved!");
}
function getRadio () { //This function takes the radio input; be it checked or unchecked
var radio = document.forms[0];
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
Favorite = radio[i].value;
}
}
}
function getCheckbox () { //This function takes the value from recommend; either being yes or no
if ($("Y").checked) {
recommendValue = $("Y").value;
}
else {
recommendValue = $("N").value;
}
}
function retrieveData () { //this function will retrieve the data in local storage or from json.js if their is no default data
toggle("on");
if (localStorage.length === 0) {
alert("No data in localStorage. Adding default data.");
fillData();
}
var Makediv = document.createElement('div');
Makediv.setAttribute("id", "games");
var list = document.createElement('ul');
Makediv.appendChild(list);
document.body.appendChild(Makediv);
//ImageGrab($("Select").value, Div);
for (var i = 0; i < localStorage.length; i++) {
var mli = document.createElement('li');
list.appendChild(mli);
var keyVal = localStorage.key(i);
var value = localStorage.getItem(keyVal);
//convert local storage value back into an object using JSON
var objct = JSON.parse(value);
var makesul = document.createElement('ul');
mli.appendChild(makesul);
for (var q in objct) {
var msl = document.createElement('li');
makesul.appendChild(msl);
var subText = objct[q][0] + " " + objct[q][1];
msl.innerHTML = subText;
}
}
}
function fillData () { //this function reads in json.js with Ajax
var xmlRequest;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlRequest = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlRequest.onreadystatechange = function () {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
var text = xmlRequest.responseText;
var json = JSON.parse(text);
}
xmlRequest.open("GET", "json.js?_dc" + Math.random(), false);
xmlRequest.send();
for (var i in json) {
var ID = Math.floor(Math.random() * 100000001);
localStorage.setItem(ID, JSON.stringify(json[i]));
}
}
function $(x) { //this function gives me the ability to call an element easily. $("example")
var element = document.getElementById(x);
return element;
}
var DisplayRatings = $('DisplayLink');
DisplayRatings.addEventListener("click", retrieveData); //on-click display data
var SubmitRating = $('submit');
SubmitRating.addEventListener("click", saveData, true); //on-click save the data
有人能指出我正确的方向吗？我之前尝试JSON.readyStatus === 4和JSON.status === 200并且无效（在if语句中）。
我的预期输出是在已经制作的addGame.html页面下进行的。如您所见，假设生成无序列表，然后使用保存的JSON数据添加有序列表项。这是我的html接受输入。
json.js文件
{
"Game1": {
"Categories": ["Categories:", "Xbox360"],
"Name": ["Name:", "Call of Duty: Modern Warfare"],
"Rating": ["Rating:", "7"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "04-01-2010"],
"Notes": ["Notes:", "This is an FPS."]
},
"Game2": {
"Categories": ["Categories:", "Playstation 4"],
"Name": ["Name:", "Defiance"],
"Rating": ["Rating:", "3"],
"Recommend": ["Recommend:", "no"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "04-07-2011"],
"Notes": ["Notes:", "Massive Multiplayer game."]
},
"Game3": {
"Categories": ["Categories:", "Xbox360"],
"Name": ["Name:", "Call of Duty: Black Ops II"],
"Rating": ["Rating:", "8"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "06-03-2011"],
"Notes": ["Notes:", "Great game."]
},
"Game4": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Dark Souls"],
"Rating": ["Rating:", "9"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-06-2011"],
"Notes": ["Notes:", "This game is extremely hard."]
},
"Game5": {
"Categories": ["Categories:", "Playstation 4"],
"Name": ["Name:", "Resident Evil 6"],
"Rating": ["Rating:", "2"],
"Recommend": ["Recommend:", "no"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-01-2012"],
"Notes": ["Notes:", "This is not very great."]
},
"Game6": {
"Categories": ["Categories:", "Wii"],
"Name": ["Name:", "Wii Sports"],
"Rating": ["Rating:", "5"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-02-2012"],
"Notes": ["Notes:", "Virtual Sports."]
},
"Game7": {
"Categories": ["Categories:", "Mac"],
"Name": ["Name:", "Space Defenders"],
"Rating": ["Rating:", "6"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-03-2012"],
"Notes": ["Notes:", "This is a good casual game."]
},
"Game8": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Spelunky"],
"Rating": ["Rating:", "10"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-03-2013"],
"Notes": ["Notes:", "This is a randomly generated cave game."]
},
"Game9": {
"Categories": ["Categories:", "Xbox360"],
"Name": ["Name:", "Spelunky"],
"Rating": ["Rating:", "10"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-03-2012"],
"Notes": ["Notes:", "This is the xbox live arcade version that came out first, but had many xbox exclusives."]
},
"Game10": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Prison Architect"],
"Rating": ["Rating:", "8"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-03-2012"],
"Notes": ["Notes:", "This is a prison simulation game."]
},
"Game11": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Don't Starve"],
"Rating": ["Rating:", "9"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-04-2012"],
"Notes": ["Notes:", "This is horror survival game."]
},
"Game12": {
"Categories": ["Categories:", "Wii"],
"Name": ["Name:", "Super Mario"],
"Rating": ["Rating:", "6"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-04-2012"],
"Notes": ["Notes:", "Not as good as the original."]
},
"Game13": {
"Categories": ["Categories:", "Playstation 4"],
"Name": ["Name:", "uncharted 3"],
"Rating": ["Rating:", "6"],
"Recommend": ["Recommend:", "no"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-04-2012"],
"Notes": ["Notes:", "Hype didn't live up to expectations."]
},
"Game14": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Dota 2"],
"Rating": ["Rating:", "9"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-05-2012"],
"Notes": ["Notes:", "Great for pro players."]
},
"Game15": {
"Categories": ["Categories:", "Xbox360"],
"Name": ["Name:", "EA MMA"],
"Rating": ["Rating:", "10"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-06-2011"],
"Notes": ["Notes:", "Best fighting game ever!"]
},
"Game16": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Papers, please"],
"Rating": ["Rating:", "6"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-07-2012"],
"Notes": ["Notes:", "This is a dystopian thiller."]
},
"Game17": {
"Categories": ["Categories:", "Mac"],
"Name": ["Name:", "Star Wars: Knights of the Old Republic"],
"Rating": ["Rating:", "8"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-07-2009"],
"Notes": ["Notes:", "This is a classic."]
},
"Game18": {
"Categories": ["Categories:", "PC"],
"Name": ["NRatingame:", "Counter Strike: Global Offensive"],
"Rating": ["Rating:", "7"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-16-2012"],
"Notes": ["Notes:", "One of the best FPS on the market."]
},
"Game19": {
"Categories": ["Categories:", "Wii"],
"Name": ["Name:", "007: Goldeneye"],
"Rating": ["Rating:", "4"],
"Recommend": ["Recommend:", "no"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-022-2012"],
"Notes": ["Notes:", "Controls are not very accesible."]
},
"Game20": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Super Meat Boy"],
"Rating": ["Rating:", "10"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-01-2012"],
"Notes": ["Notes:", "One of my favorite platformers."]
}
}
addGame.html
<!DOCTYPE HTML>
<html>
<div id="headAddGame">
<head>
<meta charset="UTF-8">
<meta keyword="Ratings, list, Gaming">
<meta description="A form that will create a specific review for each game.">
<meta name="ROBOTS" content="INDEX, FOLLOW">
<meta name="viewport" content="user-scalable=no, width=device-width">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="json.js"/></script>
<div id="titleAddGame">
<title>
Add A Game
</title>
</div>
</head>
</div>
<div="bodyAddGame">
<body class="bodystyle">
<fieldset ID="field">
<legend class="bodyLegend">
Add Game
</legend>
<form action="#" method="post" id="form">
<h1 class="gameh1">
Select A Category:
</h1>
<select name="Category dropdown list" id="select">
<option value="Select One">Select One!</option>
<option value="Xbox360">Xbox360</option>
<option value="Playstation 4">Playstation 4</option>
<option value="PC">PC</option>
<option value="Mac">Mac</option>
<option value="Wii">Wii</option>
</select>
<h1 class="hone">
Game Information:
</h1>
<h2 class="htwo">
Name:
</h2>
<input type="text" name="Name" id="Name">
<h2 class="htwo">
Rating (from one to ten, ten being the highest, one being the lowest):
</h2>
<input type="range" name="rating" min="1" max="10" id="rating">
<h2 class="htwo">
Would you recommend?:
</h2>
<label for="Y">Yes</label>
<input type="checkbox" name="recommend" id="Y" value="Yes"><br>
<label for="N">No</label>
<input type="checkbox" name="recommend" id="N" value="No"><br>
<br>
<label for="Fav">
Save as a Favorite?
</label>
<br>
<input type="radio" name="Favorite" id="Fav" value="Yes">
<br>
<h2 class="htwo">
Date of review:
</h2>
<input type="date" name="date" id="date">
<h2 class="htwo">
Notes:
</h2>
<textarea rows="4" cols="50" id="notes">
</textarea>
<input type="hidden" id="Dev" value="mobileDev">
<br>
<br>
<input type="submit" value="submit" id="submit">
<br>
</form>
</fieldset>
</body>
</div>
<div id="footAddGame">
<footer>
<a href="#" ID="Clear">
clear stored data
</a>
<a href="#" ID="DisplayLink">
display data
</a>
<a href="addgame.html" id="Addgame" style="display:none;">
Add New Item
</a>
<script type="text/javascript" src="main.js"/></script>
</footer>
</div>
调用retrieveData()函数时得到的输出应将下面的示例添加到页面中。
与此类似：
然而，我得出的结果是这样的：
我只是使用JavaScript，Ajax，HTML和CSS。关于这个问题，它只涉及JavaScript和HTML（从HTML中保存JSON数据，然后在addGame.html上显示）。
编辑：在读取提交的html表单中的值时，还尝试了JSON.stringify（）。发生了同样的错误。
答案 0 :(得分：0)
json.js中的内容是javascript，不是 JSON。而不是＆＃39; var json = {＆＃39;你应该只是＆＃39; {＆＃39;。