無法在輸入複選框標記中顯示Json響應

我試圖在按鈕單擊上在輸入複選框標記中顯示Json響應。但我無法做到這一點。無法在輸入複選框標記中顯示Json響應

任何人都可以指導我如何做到這一點。

下面是代碼 -

<!DOCTYPE html> 
<html> 
<body> 
<script 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
    crossorigin="anonymous"></script> 

<label><input type="checkbox" name="test_name" value=""></label> 

<button type="button" onclick="loadDoc()">Change Content</button> 

<script> 
function loadDoc() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     document.getElementsByName('test_name').innerHTML = JSON.stringify(this.responseText,undefined, 2).replace(/\\n/g, "").replace(/\\r/g, "") 
                         .replace(/\\/g, "") 
                         .replace(/^"/, "") 
                         .replace(/"$/, ""); 
    var jsonobj = JSON.parse(document.getElementsByName('test_name').innerHTML); 

    for (var i=0;i<jsonobj.length; i++) 
    { 
     console.log(jsonobj[i].Newsletter_Name); 

      var label = document.getElementsByName('test_name'); 
      console.log(label); 
      label.value= jsonobj[i].Newsletter_Name;    
    }; 

    } 
    }; 
    xhttp.open("GET", "https://members.s7.exacttarget.com/Pages/Page.aspx?QS=38dfbe491fab00ea764e20685ddf905a854eb2c63c649afb00651f16b30a4189&brand_code=PE", true); 
    xhttp.send(); 

} 

</script> 

</body> 
</html>

Json的回報 - 將會有大量的數據。但我顯示很少。

[{ 
"Test_Name": "FOOD", 
"Brand": "Test" 
}, 
{ 
"Test_Name": "HOME", 
"Brand": "Test" 
}]

來源

2016-12-24 learningmode

使用jQuery堅持只（閱讀更多here） - 打勾從值的複選框中的JSON，你可以做這樣的事情：

$.ajax({ 
    url: "https://testendpoint/", 
    dataType: "json", 
    success: function (response) { 
     if (response) { 
      // Tick checkboxes from JSON 
      for (var i=0; i<json.length; i++) { 
       $('#' + json[i].Newsletter_Name).prop('checked', true); 
      } 
     } 
    } 
});

這是假設您的複選框看起來像這樣的：

<div> 
    <input id="FOOD" type="checkbox" value="FOOD"> 
    <label for="Food">Food</label>   

    <input id="HOME" type="checkbox" value="HOME"> 
    <label for="Home">Home</label> 
</div>

來源

2016-12-24 10:42:54 Teknotica

嗨我已更新我的代碼。你能否檢查一下它有什麼問題。我無法顯示該複選框。 – learningmode

我無法訪問您所使用的網址，所以我會用Librivox.org API舉個例子：

幾點：

1：您不需要先填充DOM innerText - 返回的值已經可用。 2：除非你有一個很好的理由（性能通常），否則你應該像其他人所說的那樣使用JQuery，因爲它在使用本機XMLHTTPRequest時隱藏了X瀏覽器的問題。

3：我認爲您試圖呈現每個返回項的複選框。這就是我將要展示的。

使用的代理只是一個C＃處理程序，用於將請求傳遞到遠程服務器，所以我不會遇到跨域請求問題。響應是完全一樣直接從以下調用返回：

https://librivox.org/api/feed/authors?format=json

jQuery將自動轉換返回的JSON字符串轉換成Javascript對象 - 這你可以用的console.log（）語句看到的。

該代碼向遠程服務器（Librivox）發出請求，並以JSON字符串形式返回數據（作者）列表。因爲我將類型'json'作爲期望的返回類型傳遞，JQuery將自動將數據轉換爲可用的Javascript對象。

其餘的代碼只是建立一個複選框的集合，並附加到指定的DOM元素。

將點擊處理程序附加到每個複選框以進一步處理數據會很簡單。

<!DOCTYPE html> 
<html> 
<body> 
    <script src="js/libs/jquery/jquery.js" type="text/javascript"></script> 

<label><input type="checkbox" name="test_name" value=""></label> 

<div id="test"><!-- Appending checkboxes here --> 

</div> 

<button type="button" id="loaddoc">Change Content</button> 

<script> 
var proxyUrl = "/proxy/proxy.aspx"; 

$(function(){ 
     $.ajax(proxyUrl + "?endpoint=api/feed/authors",{ 
      dataType:"json" 
     }).complete(function(data){ 
      //log data: 
      console.log(data);//big list of authors 
      var dv = document.createElement("div"); 
      //build checkboxes... 
      for(var a=0;a<data.responseJSON.authors.length;a++){ 
       var lbl = document.createElement("label"); 
       lbl.appendChild(document.createTextNode(data.responseJSON.authors[a].last_name)); 
       var chk = document.createElement("input"); 
       chk.setAttribute("type","checkbox"); 
       chk.setAttribute("name",data.responseJSON.authors[a].last_name); 
       chk.setAttribute("value",data.responseJSON.authors[a].id); 
       lbl.appendChild(chk); 
       dv.appendChild(lbl); 
      } 
      //append to element: 
      $("#test")[0].appendChild(dv); 
     }); 
}); 
</script> 
</body> 
</html>

來源

2016-12-24 16:18:23 Silas

無法在輸入複選框標記中顯示Json響應

回答

相關問題