我如何循环ajax响应并在html中显示它

时间:2016-09-27 15:05:16

标签: javascript jquery ajax

我是一名PHP开发人员,我正在寻找像ajax响应的foreach循环这样的东西

我在html中有卡设计,我希望ajax请求的响应为ajax响应中的每个对象创建一张新卡

这是我的远程代码

AJAX:

  $.ajax({
        type:"GET",
        url:"http//url_to_api.com/projects/v1" ,
        dataType: "json",
        success:function(mdata){
             var  result =  '';           
              $.each(mdata,  function (index, element) {               
                result +=    + element.project_name ;  
                console.log(element.project_name); // alert the values 
              });           
              $('.cho-card-title').html(result);


         }
   });

html我希望我的ajax响应为响应数据中的每个对象填充

<div class="card-row">          
    <div class="card">
        <div class="card-img"> 
            //image.of.ajax.responce
            <img src=""> 
        </div>
        <div class="card-title">
           // title.of.ajax.responce
        </div>
        <div class="card-description">
         //    title.of.ajax.description
        </div>             
        <div class="select-card">
            Select
        </div>          
    </div> 
</div>  

目前,代码循环响应,并在一张卡中显示所有内容,如何在自己的卡中获得每个响应。

1 个答案:

答案 0 :(得分:0)

您可以在.each语句中创建和追加元素。

这是未经测试的,但这样的事情可能有效:

$.each(mdata,  function (index, element) {          
  var div = $('<div />') // Create the div
             .addClass('cho-card-title') // Add the class name
             .html(element.project_name); // Insert the html
  // Append the new div to whatever your container is
  $('.container').append(div);
});