Jquery 如何以列格式显示AJAX响应值？

我从使用AJAX的PHP中只获得了3个用户值，并且该值必须以列格式显示。我尝试了下面的代码，但它没有显示。 我得到的输出就像所有的名字都垂直显示，然后垂直显示姓氏

AJAX

$(document).ready(function(){
        $('#search-button').click(function(){
            $.ajax( {
                type: 'POST',
                url: 'includes/process.php',
                data: $('#search-form').serialize(),
                dataType: 'json',
                success: function(response) {                     
                    for(data in response)
                    {
                    $('#response_profile_pic').append("<img src='images/profile/" + response[data].profile_pic + "' alt='' />");
                    $('#response_fName').append("<li>" + response[data].fName +"</li>");
                    $('#response_lName').append("<li>" + response[data].lName + "</li>"); 
                    }
                    $('#open_compare_popup').show();
                }
            });
        });
    });

---

编辑：根据你的HTML，我将这样做

success: function(response) {
    let repeatableDiv = "";

    response.data.forEach(val => {
    repeatableDiv += "<div class='box-set'> <span class='compare_userpic' id='response_profile_pic'><img src='images/profile/" + val.profile_pic + "' alt='' /></span>
    <ul class='point_compare'>
      <li>
        <h2>" + val.fName + "</h2>
      </li>
      <li>
        <h3>" + val.lName + "</h3>
      </li>
    </ul>
  </div>"      
  })

  $(".compare_result").innerHTML = repeatableDiv 

成功：功能（响应）{
设repeatableDiv=“”；
response.data.forEach（val=>{
repeatableDiv+=”


“+val.fName+”


“+val.lName+”


"      
})
$（“.compare_result”）.innerHTML=repeatableDiv

然后清除所有你注释掉的HTML，它应该会工作。

试试这个

success: function(response) {
  $.each(response, function (i, item) {
    var fname= response[i]['fname'];
    var fname1= response['data'][0]['fname'];
    var fname2= response['data']['fname'];
    alert (fname);
    alert (fname1);
    alert (fname2);
  });
}

---

一定是工作。做吧：

<div id="container"></div>

$(document).ready(function(){
        $('#search-button').click(function(){
            $.ajax( {
                type: 'POST',
                url: 'includes/process.php',
                data: $('#search-form').serialize(),
                dataType: 'json',
                success: function(response) {                     

                    var container = document.getElementById('container');

                    for (key in response){
                        var div=document.createElement('div');
                        var img=document.createElement('img');
                        var flab=document.createElement('label');
                        var llab=document.createElement('label');
                        var fcaption=document.createElement('h2');
                        var lcaption=document.createElement('h2');

                        img.setAttribute('src','images/profile/' + response[data].profile_pic);    
                        img.setAttribute('alt','');    
                        flab.innerText='First Name';    
                        llab.innerText='Last Name';    
                        fcaption.innerText=response[key].fName
                        lcaption.innerText=response[key].lName

                        div.appendChild(img);
                        div.appendChild(flab);
                        div.appendChild(fcaption);
                        div.appendChild(llab);
                        div.appendChild(lcaption);

                        container.appendChild(div);
                    }    
                }
            });
        });
    });

$（文档）.ready（函数（）{
$（“#搜索按钮”）。单击（函数（）{
$.ajax（{
键入：“POST”，
url:'includes/process.php'，
数据：$（“#搜索表单”）.serialize（），
数据类型：“json”，
成功：功能（响应）{
var container=document.getElementById（'container'）；
用于（输入应答）{
var div=document.createElement（'div'）；
var img=document.createElement（'img'）；
var flab=document.createElement（'label'）；
var llab=document.createElement（'label'）；
var fcaption=document.createElement（'h2'）；
var lcoption=document.createElement（'h2'）；
setAttribute（'src'，'images/profile/'+响应[data].profile_pic）；
img.setAttribute（'alt'，''）；
flab.innerText='First Name'；
llab.innerText='Last Name'；
fcaption.innerText=响应[key].fName
lcoption.innerText=响应[key].lName
儿童分部（img）；
附肢儿童（松弛）；
儿童分部（fcaption）；
儿童分部（llab）；
附属儿童分部（LCOPTION）；
子容器（div）；
}    
}
});
});
});

只需在响应中使用

JSON.parse（）；

即可解决此问题

$(document).ready(function(){
    $('#search-button').click(function(){
        $.ajax( {
            type: 'POST',
            url: 'includes/process.php',
            data: $('#search-form').serialize(),
            dataType: 'json',
            success: function(response) {                     
                response = JSON.parse(response);
                for(data in response) {
                    $('#response_profile_pic').append("<img src='images/profile/" + response[data].profile_pic + "' alt='' />");
                    $('#response_fName').append("<li>" + response[data].fName +"</li>");
                    $('#response_lName').append("<li>" + response[data].lName + "</li>"); 
                }
                $('#open_compare_popup').show();
            }
        });
    });
});

<div class="box-set"> 
    <ul class="point_compare">
        <span id="response_profile_pic"></span>
        <label>First Name</label><h2 id="response_fName"></h2>
        <label>Last Name</label><span id="response_lName"></span>
    </ul>
</div>

$compare_records = array();
$compare_query=$conn->query($sql_compare);

if ($compare_query->num_rows > 0) {
    $outp = array();
    $outp = $compare_query->fetch_all(MYSQLI_ASSOC);
    echo json_encode($outp);
}

exit();

$（文档）.ready（函数（）{
$（“#搜索按钮”）。单击（函数（）{
$.ajax（{
键入：“POST”，
url:'includes/process.php'，
数据：$（“#搜索表单”）.serialize（），
数据类型：“json”，
成功：功能（响应）{
response=JSON.parse（response）；
用于（响应数据）{
$（“#响应_配置文件_pic”）。追加（“”）；
$（“#response_fName”）.append（“
”+response[data].fName+”
”）；
$（“#response_lName”）.append（“
”+response[data].lName+”
”）；
}
$（“#打开_比较_弹出窗口”）.show（）；
}
});
});
});

名字
姓

$compare_records=array（）；
$compare\u query=$conn->query（$sql\u compare）；
if（$compare\u query->num\u rows>0）{
$outp=array（）；
$outp=$compare\u query->fetch\u all（MYSQLI\u ASSOC）；
echo json_编码（$outp）；
}
退出（）；

响应是否返回数组或对象？它返回数组，是吗？您是否试图访问

响应中找到的数组。数据

？是的，它返回对象。我只想每次都重复div，具体取决于上载数组计数。我的解决方案应该有帮助，但我不确定

响应的确切结构如果你提供了，我可以确认/修改我的代码以使其正常工作。希望你检查了我的HTML代码。我已经对该行进行了注释。我必须在那里显示所有输出。我必须在我注释的HTML代码中单独显示每条记录以供参考。好的，我已经编辑了我的响应-尝试一下，让我知道发生了什么。它没有采取任何行动。我的意思是没有输出。我必须重复代码中注释的HTML div。请检查我的HTML代码。感谢您回复aimprogman先生，如果我必须为CSS添加相同的类或id，那么我如何添加它？@hybreeer with flab.setAttribute（'class'，'label-style'）；或flab.setAttribute（'id'，'label-selector'））；有没有其他方法可以解决这个问题？因为我有8多列。我怎么说？而且CSS也太大了。我理解正确了吗？你可以在CSS:#container>label{color:white}中完成。当我添加response=JSON.parse（response）时，让我也试试这个方法。超级用户先生；然后什么也没有发生。晚上我试图使用内部警报，但也没有显示。@Hybreeder您能分享
response
中的数据吗？我上传了我的流程代码。在使用response=JSON.parse（response）之前，我得到了正确的输出，但格式不正确；@Hybreeder我已经更新了我的答案。你可以用我的答案更新你的php代码。
<div id="container"></div>

$(document).ready(function(){
        $('#search-button').click(function(){
            $.ajax( {
                type: 'POST',
                url: 'includes/process.php',
                data: $('#search-form').serialize(),
                dataType: 'json',
                success: function(response) {                     

                    var container = document.getElementById('container');

                    for (key in response){
                        var div=document.createElement('div');
                        var img=document.createElement('img');
                        var flab=document.createElement('label');
                        var llab=document.createElement('label');
                        var fcaption=document.createElement('h2');
                        var lcaption=document.createElement('h2');

                        img.setAttribute('src','images/profile/' + response[data].profile_pic);    
                        img.setAttribute('alt','');    
                        flab.innerText='First Name';    
                        llab.innerText='Last Name';    
                        fcaption.innerText=response[key].fName
                        lcaption.innerText=response[key].lName

                        div.appendChild(img);
                        div.appendChild(flab);
                        div.appendChild(fcaption);
                        div.appendChild(llab);
                        div.appendChild(lcaption);

                        container.appendChild(div);
                    }    
                }
            });
        });
    });

$(document).ready(function(){
    $('#search-button').click(function(){
        $.ajax( {
            type: 'POST',
            url: 'includes/process.php',
            data: $('#search-form').serialize(),
            dataType: 'json',
            success: function(response) {                     
                response = JSON.parse(response);
                for(data in response) {
                    $('#response_profile_pic').append("<img src='images/profile/" + response[data].profile_pic + "' alt='' />");
                    $('#response_fName').append("<li>" + response[data].fName +"</li>");
                    $('#response_lName').append("<li>" + response[data].lName + "</li>"); 
                }
                $('#open_compare_popup').show();
            }
        });
    });
});

<div class="box-set"> 
    <ul class="point_compare">
        <span id="response_profile_pic"></span>
        <label>First Name</label><h2 id="response_fName"></h2>
        <label>Last Name</label><span id="response_lName"></span>
    </ul>
</div>

$compare_records = array();
$compare_query=$conn->query($sql_compare);

if ($compare_query->num_rows > 0) {
    $outp = array();
    $outp = $compare_query->fetch_all(MYSQLI_ASSOC);
    echo json_encode($outp);
}

exit();