使用Jquery从JSON生成多个HTML元素

Generate multiple HTML elements from JSON using Jquery?

本文关键字：HTML 元素 Jquery JSON 使用      更新时间：2023-09-26

如何使用Jquery和Javascript从$ajax中提取JSON，然后执行foreach，并创建一个将附加到htmlDOM的字符串？

类似于：

$(document).ready(function (e) {
$.ajax({
    type: "POST",
    url: "Companies/GetSearchRatios",
    context: this,
    success: function (data) {
       //return JSON
    }
});

结果JSON

[{"name":"MyNAme","value":350},{"name":"Hello","value":356}]

我可以很容易地在$ajax方法成功内部访问这些值，但如何在方法外部提取这些值并使用它附加到DOM？

这是我需要的一些for/foreach方法的结果：

  var $gElemRatios =
    '<option value=""></option>' +
    '<option value="350">MyNAme</option>' +
    '<option value="356">Hello</option>';

然后我使用这个var与另一个结合：

 var $gElem =
    '<div class="cbox cboxQuarterWidth">' +
         '<select id="combobox_0">' +
               $gElemRatios + // here I add previous generated elem
         '</select>' +
    '</div>';

最后：

$("#main").append($gElem);

有什么想法吗？

您可以使用$.each循环传递给成功处理程序的数据：

$.ajax({
    type: "POST",
    url: "Companies/GetSearchRatios",
    context: this,
    success: function (data) {
       $.each(data,function(){
          console.log(this.name); //just an example how to access things
          $('#select').text(this.value); //maybe?
       });
    }
});

请参阅此fidd

相关文章：