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

Question

我使用 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();
                }
            });
        });
    });

PHP

    <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>

Process.php

$_SESSION['compare_user']=$_POST['compare_id'];//coming from html
$sql_compare='SELECT * FROM request WHERE Id IN (' .( is_array( $_SESSION['compare_user'] ) ? implode( ',', $_SESSION['compare_user'] ) : $_SESSION['compare_user'] ).')';
//echo $sql_compare;
//die();
$compare_records = array();
    $compare_query=$conn->query($sql_compare);
    if ($compare_query->num_rows > 0) {
    while($userdata12=$compare_query->fetch_assoc()){ 
        $compare_records[]=$userdata12;
        //echo $compare_pic;
    }
}
echo json_encode($compare_records);exit();

Answer 1

试试这个！

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

Answer 2

编辑：根据您的 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 

然后清除您注释掉的所有 HTML，它应该可以工作。

Answer 3

它必须工作。这样做：

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

Answer 4

只需在回复中使用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();