使用 AJAX 在 HTML 中显示 php 结果答案

【问题标题】：Displaying php result in HTML using AJAX使用 AJAX 在 HTML 中显示 php 结果
【发布时间】：2017-06-13 13:10:53
【问题描述】：

我试图在不同的<div>-s 中显示我的 php 的结果。我的计划是在我的 php 中进行查询并以 JSON 格式显示结果。由于 JSON 格式，我的结果可以以不同的<div> 显示。 我怎样才能做到这一点，例如"name" 可以显示在<div> 标签之间？

php的示例结果：

[
    {
        "id": 0,
        "name": "example1",
        "title": "example2"
    },
    {
        "id": 0,
        "name": "example1",
        "title": "example2"
    }
]

尝试：

 <div class="result"></div>

 <script>
 $.ajax({
    type:'GET',
    url:'foo.php',
    data:'json',
    success: function(data){
            $('.result').html(data);
    }
});
</script>

【问题讨论】：

.html(data[0].name)...你知道如何访问JSON数据吗？
$('.result').append('<div>' + data[0].name + '</div>') - 它将带有第一个结果名称的 div 添加到带有结果类的 div 中。
success: function(data){ var newhtml = ''; $.each(data, function(i, item) { newhtml +='<div>'+ item.name +'</div>'; }); $('.result').html(newhtml); }

标签： javascript php jquery html ajax

【解决方案1】：

您好，尝试将返回的数据解析为 JSON 对象：

<div class="result"></div>

 <script>
 $.ajax({
    type:'GET',
    url:'foo.php',
    data:'json',
    success: function(data){

            // added JSON parse
            var jsonData = JSON.parse(data);

            // iterate through every object
            $.each(jsonData, function(index, element) {

                 // do what you want with each JSON object
                 $('.result').append('<div>' + element.name + '</div>');

            });                
    }
});
</script>

// PS 代码未经测试。 // 问候

【讨论】：

【解决方案2】：

如下所示：-

success: function(data){
    var newhtml = ''; //newly created string variable
    $.each(data, function(i, item) {//iterate over json data
        newhtml +='<div>'+ item.name +'</div>'; // get name and wrapped inside div and append it to newly created string variable
    });
    $('.result').html(newhtml); // put value of newly created div into result element
}

【讨论】：

【解决方案3】：

你可以这样创建它：

for (var i = 0; i < res.length; i++) {
  var id = $("<div></div>").html(data[i].id);
  var name = $("<div></div>").html(data[i].name);
   var title = $("<div></div>").html(data[i].title);

  $('.result').append(id).append(name).append(title);
}

【讨论】：