我正在编写一个测试页面，该页面有一个存储链接字符串的JSON对象，并允许用户向JSON对象添加新字符串。
该页面是用全局JSON对象jsonLinks创建的，
var jsonLinks = {
links: []
};
并且有一个用户可以输入URL的文本字段(txtLinkAddress)，以及一个调用performAdd()的按钮，该按钮负责将该文本字段的值添加到存储在jsonLinks变量中的JSON对象中。
JSON条目的格式为
{"href":handles[1].value}
其中handles[1]是页面加载时performSetup中加载的txtLinkAddress的HTML元素句柄)。
测试似乎按照需要进行，但当我按下"添加链接"按钮时，链接会被短暂添加，但随后会消失。
我已经做了一个测试，通过在每次performAdd调用结束时显示jsonLinks.links.length的警报来查看JSON对象的大小是否随着添加更多条目而变化，但这个测试总是显示JSON对象只有1个元素。
有人能帮我理解为什么会发生这种情况以及如何解决吗？
来源：
<html>
<head>
<style>
th.custom-th-1 {
text-align: left;
font-size: 10pt;
}
</style>
<script>
var handles = null;
var jsonLinks = {
links: []
};
function performSetup()
{
handles = [];
handles[0] = document.getElementById('LinkViewSection');
handles[1] = document.getElementById('txtLinkAddress');
updateLinks();
}
function performAdd()
{
var _reqLinkAddr = handles[1].value;
jsonLinks.links.push({"href": _reqLinkAddr});
updateLinks();
}
function updateLinks()
{
handles[0].innerHTML = '';
for (var i = 0; i < jsonLinks.links.length; ++i)
{
var _hrefValue;
var _linkItem;
_hrefValue = jsonLinks.links[i].href;
_linkItem = document.createElement('a');
_linkItem.innerHTML = _hrefValue;
_linkItem.setAttribute('href', _hrefValue);
handles[0].appendChild(_linkItem);
handles[0].appendChild(document.createElement('br'));
}
}
</script>
</head>
<body onload="performSetup()">
<div id="LinkViewSection"></div>
<hr />
<div id="AddALinkSection">
<form>
<table>
<th colspan="2" class="custom-th-1">Add a link:</th>
<tr>
<td>Link address</td>
<td><input id="txtLinkAddress"></input></td>
</tr>
<tr>
<td></td>
<td><button onclick="performAdd()">Add the link</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>
替代格式(传统格式，以防上述内容难以阅读)
<html>
<head>
<style type="text/css">
th.custom-th-1 {
text-align: left;
font-size: 10pt;
}
</style>
<script type="text/javascript">
var handles = null;
var jsonLinks = {
links: []
};
function performSetup()
{
handles = [];
handles[0] = document.getElementById('LinkViewSection');
handles[1] = document.getElementById('txtLinkAddress');
updateLinks();
}
function performAdd()
{
var _reqLinkAddr = handles[1].value;
jsonLinks.links.push({"href": _reqLinkAddr});
updateLinks();
}
function updateLinks()
{
handles[0].innerHTML = '';
for (var i = 0; i < jsonLinks.links.length; ++i)
{
var _hrefValue;
var _linkItem;
_hrefValue = jsonLinks.links[i].href;
_linkItem = document.createElement('a');
_linkItem.innerHTML = _hrefValue;
_linkItem.setAttribute('href', _hrefValue);
handles[0].appendChild(_linkItem);
handles[0].appendChild(document.createElement('br'));
}
}
</script>
</head>
<body onload="performSetup()">
<div id="LinkViewSection"></div>
<hr />
<div id="AddALinkSection">
<form>
<table>
<th colspan="2" class="custom-th-1">Add a link:</th>
<tr>
<td>Link address</td>
<td><input id="txtLinkAddress"></input></td>
</tr>
<tr>
<td></td>
<td><button onclick="performAdd()">Add the link</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>
这是因为您通过按下按钮提交表单，从而触发页面重新加载。然后一切又消失了。
所以你应该停止提交表格。这可以通过返回false来实现：
<button onclick="performAdd(); return false">
如果不需要提交表单，也可以删除form标记。