Question

我试图在按钮点击时在输入复选框标签中显示Json Response。但我无法做到。

任何人都可以指导我如何做到这一点。

以下是代码 -

   <!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 Return - 会有很多数据。但我显示的很少。

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

Answer 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>

Answer 2

我无法访问您正在使用的网址，因此我将使用Librivox.org API提供示例：

有几点：

1：您不需要首先填充DOM内部文本 - 返回的值已经可用。

2：除非你有充分的理由（通常是性能），你应该使用JQuery，因为它在使用原生XMLHTTPRequest时隐藏了x浏览器问题。

3：我想你试图为每个返回的项目呈现一个复选框。这就是我要展示的内容。

使用的代理只是一个C＃处理程序，用于将请求传递给远程服务器，因此我不会遇到跨域请求问题。响应完全与以下调用直接返回：

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

JQuery会自动将返回的JSON字符串转换为Javascript对象 - 您可以使用console.log（）语句查看。

代码向远程服务器（Librivox）发出请求，并将数据列表（作者）作为JSON字符串返回。因为我通过了类型＆＃39; json＆＃39;作为预期的返回类型，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>

无法在输入复选框标记中显示Json Response

2 个答案: