使用AJAX在HTML中显示php结果

时间:2017-06-13 13:10:54

标签: javascript php jquery html ajax

我试图在不同的console.log($(x)) - s中显示我的php的结果。我的计划是在php中查询并以JSON格式显示结果。由于JSON格式,我的结果可以显示在不同的<div>中。 如何实现这一点,例如<div>可以在"name"代码之间展示?

php的示例结果:

<div>

尝试:

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

3 个答案:

答案 0 :(得分:4)

您尝试将返回的数据解析为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代码未经测试。 //问候

答案 1 :(得分: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
}

答案 2 :(得分:1)

您可以像这样创建:

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);
}