Question

我从php文件中获取json结果，我想将它们附加到另一个php文件中的特定div部分，使用ajax和jQuery。现在我必须得到结果..请帮助我这个

json结果：

[
{
    "title": "Welcome!",
    "description": "The world has changed dramatically..",
    "image": "img/article1.jpg"
},
{
    "title": "Welcome 2!",
    "description": "It is time for a new start..",
    "image": "img/article2.jpg"
}
]

我使用的jQuery是：

<script type="text/javascript">

   $(document).ready(function(){
     $.ajax({
     url: 'ajax_json.php',
     type: 'post',
     data: {tag: 'getData'},
     dataType: 'json',
     success: function(data){
            if(data.success){
                $.each(data, function(index, record){
                    if($.is_numeric(index)){
                        var row = 
                        $("#output").append('<div class="article"><div>' + item.title + '</div><div style="width:200px;height:100px;background-image: url(' + item.image + ')"></div></div>');
        });
                    }
                })
              }
            }
        });
    });

Div部分：

<div class="row top-buffer" id="output">
       <div class="col-md-6" >
         <img class="img-rounded" src="json image" alt="MyImage" width="550px" height="240px">
          </div>
          <div class="col-md-6">

          <h3>json title</h3>
          <p class="well">json description<p>
     </div>

Answer 1

Html应

<div class="row top-buffer" id="output">


</div>

你的JS应该

var json_ = {
    "0": {
        "title": "Welcome!",
        "description": "The world has changed dramatically..",
        "image": "img\/article1.jpg"
    },
    "1": {
        "title": "Welcome 2!",
        "description": "It is time for a new start..",
        "image": "img\/article2.jpg"
    },
    "success": "true"
};

if (json_.success){  
    $.each(json_, function (index, item) {
        if ('success'!= index){
 $('#output').append("<div class='col-md-6' ><img class='img-rounded' src="+item.image+"alt='MyImage' width='550px' height='240px'></div><div class='col-md-6'><h3>"+item.title+"</h3><p class='well'>"+item.description+"<p></div>");

        }
    });
};

在此处查看结果：http://codepen.io/ihemant360/pen/BzpKew

您正在使用外部php文件，因此您的代码应为：

<script type="text/javascript">

   $(document).ready(function(){
     $.ajax({
     url: 'ajax_json.php',
     type: 'post',
     data: {tag: 'getData'},
     dataType: 'json',
     success: function(data){
            if(data.success){
                $.each(data, function (index, item) {
            if ('success'!= index){
     $('#output').append("<div class='col-md-6' ><img class='img-rounded' src="+item.image+"alt='MyImage' width='550px' height='240px'></div><div class='col-md-6'><h3>"+item.title+"</h3><p class='well'>"+item.description+"<p></div>");
                });
              }
            };
        });
    });

Answer 2

丢失了你的小错误

demo

已修复的HTML代码：

<div class="row top-buffer" id="output">
    <div class="col-md-6" >
        <img class="img-rounded" src="json image" alt="MyImage" width="550px" height="240px">
    </div>
    <div class="col-md-6">

        <h3>json title</h3>
        <p class="well">json description<p>
    </div>
</div>

修正了js代码：

if (data.success){  
    $.each(data, function (index, item) {
        if ('success'!= index){
                $("#output").append('<div class="article">1<div>' + item.title + '</div><div style="width:200px;height:100px;background-image: url(' + item.image + ')"></div></div>');
        }
    });
};

主要错误是：

 $.each(data, function(index, record){
//item is in record var but then you are trying to use item var
$("#output").append('<div class="article">1<div>' + item.title + '</div><div style="width:200px;height:100px;background-image: url(' + item.image + ')"></div></div>');

希望它会有所帮助=）

Answer 3

您可能会从服务器获取json作为字符串。

在if条件之前尝试使用并使用articleData进行处理 -

var articleData = JSON.parse(data);

此外，它应该是record.title而不是item.title。

在html div中显示json结果（来自php）（使用带有jQuery的Ajax）

3 个答案: