需要幫助弄清楚爲什麼我的JSON測試行爲不端

我正在編寫一個測試頁面，它具有存儲鏈接字符串的JSON對象，並允許用戶將新字符串添加到JSON對象。需要幫助弄清楚爲什麼我的JSON測試行爲不端

該頁面與全球JSON對象jsonLinks創建，

var jsonLinks = { 
    links: [] 
};

並具有文本框（txtLinkAddress），用戶可以輸入網址，以及調用performAdd（按鈕）負責用於將此文本字段的值添加到存儲在jsonLinks變量中的JSON對象中。

JSON條目的格式是

{"href":handles[1].value}

其中把手[1]是一個HTML元素句柄txtLinkAddress在performSetup裝載在頁面的onload）。

該測試似乎表現得很好，但是當我按下「添加鏈接」按鈕時，該鏈接暫時被添加，但隨後消失。

我已經做了一個測試，以查看JSON對象的大小是否隨着我在每個performAdd調用結束時顯示jsonLinks.links.length警報添加更多條目而發生變化，但此測試總是顯示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>

來源

2016-05-22 Dmitry

這是因爲你按下按鈕，觸發頁面提交您的表格重新加載。然後一切都消失了。

因此，您應該停止提交表單。這可以通過返回false做：

<button onclick="performAdd(); return false">

或者你可以刪除form標籤，如果你不需要提交表單。

來源

2016-05-22 21:01:44 trincot

我特別避免使用提交按鈕，因爲我知道它的表現方式。所有按鈕強制重新加載？ – Dmitry

「form」標籤中的'button'提交表單，是的。 – trincot

讓我刪除表單，看看會發生什麼 – Dmitry

需要幫助弄清楚爲什麼我的JSON測試行爲不端

回答

相關問題