无法在输入复选框标签中显示 Json 响应答案

【问题标题】：Unable to display Json Response in input checkbox tag无法在输入复选框标签中显示 Json 响应
【发布时间】：2016-12-24 09:58:49
【问题描述】：

我试图在单击按钮时在输入复选框标记中显示 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"
}]

【问题讨论】：

标签： javascript ajax exacttarget ampscript

【解决方案1】：

仅使用 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>

【讨论】：

您好，我已经更新了我的代码。你能检查一下它有什么问题吗？我无法显示复选框。

【解决方案2】：

我无法访问您使用的 URL，所以我将使用 Lirivox.org API 举例说明：

几点：

1：您不需要先填充 DOM innerText - 返回的值已经可用。

2：除非你有充分的理由（通常是性能），否则你应该像其他人所说的那样使用 JQuery，因为它在使用原生 XMLHTTPRequest 时隐藏了 x-browser 问题。

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>

【讨论】：