javascript - 如何使用来自 AJAX 结果 (JSON) 的数据动态填充 div？

Question

$.ajax({
    async: false,
    url: 'MyServlet',
    type: 'POST',
    data: {
        "nodeid": componentNodeId,
        "optype": OpType
    },
    success: function (data) {

        $.each(data, function (key, value) {

            childId = value.ChildNodeId;
            deviceValue = value.DeviceValue;
            count++;
        });
    }
});
$("#myModalBody").empty(); 
$("#myModalBody").text(childId);  // this displays only one childId eg. "John" 
$("#myModalRead").modal('show');

但是我 希望每个 json 对象在模态主体内的新行中

<div class="modal fade" id="myModalRead" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
              </div>
              <div class="modal-body" id="myModalBody">
               </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
          </div>
        </div>

假设我有一个像

这样的 JSON 数组

"data": [{
    "childId": "John",
    "value": "23"
}, {
    "childId": "gay",
    "value": "56"
}, {
    "childId": "harry",
    "value": "78"
}, ]

我想将它们显示为 约翰:23 同性恋:56 哈里:78 在 javascript 的模态主体中。新行中的每个对象。我该怎么做？

Answer 1

假设您的模态 div 有一个 ID 为 modal 您可以将其添加到您的 .each() block 中 -

$("#modal").append($("<p>").text(value.childId + ": " + value.value));

编辑

基于您更新的问题的更完整的答案。

您的 HTML(请注意，我实际上并未在此处进行任何更改)-

<div class="modal fade" id="myModalRead" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
              </div>
              <div class="modal-body" id="myModalBody">
               </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
          </div>
        </div>

更新后的 javascript 应如下所示 -

$.ajax({
    async: false,
    url: 'MyServlet',
    type: 'POST',
    data: {
        "nodeid": componentNodeId,
        "optype": OpType
    },
    success: function (data) {
        $("#myModalBody").empty();
        $.each(data, function (key, value) {
            $("#myModalBody").append($("<p>").text(value.childId + ": " + value.value));
            /* If you're re-using these variables you can uncomment these lines 
            childId = value.ChildNodeId;
            deviceValue = value.DeviceValue;  
            count++; 
            */                          
        });
        $("#myModalRead").modal('show');
    }
});
/* The following are no longer required as we've handled it in the success function
of the ajax call
$("#myModalBody").empty(); 
$("#myModalBody").text(childId);  // this displays only one childId eg. "John" 
$("#myModalRead").modal('show');
*/

还有一个“有效”(又名无 ajax)示例 -

var data = [{
  "childId": "John",
  "value": "23"
}, {
  "childId": "gay",
  "value": "56"
}, {
  "childId": "harry",
  "value": "78"
}];

$.each(data, function(key, value) {
  $("#myModalBody").append($("<p>").text(value.childId + ": " + value.value));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="myModalRead" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body" id="myModalBody">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>