如何設置json響應中的值 <p> PHP和JavaScript中的字段？

Question

我正在開發一個Web應用程序，其中有一個頁面，帶有搜索欄，可以在其中按名稱搜索項目。 我們將在該搜索欄的下方獲得項目列表或所需項目。 現在，當我單擊項目名稱時，我想獲取該項目的團隊成員列表，使其在該項目詳細信息的下方可見。 我有以下代碼，我使用“ post”調用來調用后端，並獲取該項目的成員列表，並將結果輸入JSON。 現在，我想將這些值放入該團隊成員信息的<p>標記中。 以下是代碼：

在Index.php中

<div id="members" class="list" style="display: none;">
    <div class="result">
        <div class="photo">
            <img>
        </div>
        <div class="team_info">
            <div class="tm">
                <div class="member_name">
                    <h5>Member Name</h5>
                    <p id="member_name"></p>
                </div> 
                <div class="prof">
                    <h5>profession</h5>
                    <p id="mem_profession"></p>
                </div>            
            </div>                 
        </div>
        <div class="contact_button">
            <h4 id="contact">See Contact</h4>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('#project_name').on("click",function(){
        $.post('/teamMembers.php', {}, function(res){
            for(var i=0; i < res.length; i++ ){
                $('#member_name').val(res[i]['name']);
                $('#mem_profession').val(res[i]['profession']);
            }
            $('#members').show();
        });
    });
</script>

在teamMembers.php控制器文件中

<?php
if(isset($_SESSION['project_name'])){
            $project_name = $_SESSION['project_name'];

            $members = \Model\Team_Member::getList(['where'=>"project_name = '$project_name'"]);
            $this->toJson($members);
        }
?>

我將項目名稱存儲在$_SESSION並以以下方式獲取這些json請求的響應：

[{
    "name":"ABC",
    "email":"test@test.com",
    "phone":"9874563210",
    "project_name":"Test Project",
    "profession":"student",
    "id":1312
}]

完成所有這些代碼后，我仍然面臨着一些問題，例如：即使使用.show()函數，我也看不到任何團隊成員的詳細信息，甚至看不到標簽。 另一個我不確定這是否是從json響應中將值設置為<p>元素的正確方法。 感謝幫助

Answer 1

段落不能有值，您需要在其中設置文本：

for(var i=0; i < res.length; i++ ){
    $('#member_name').html(res[i]['name']);
    $('#mem_profession').html(res[i]['profession']);
}

要么

for(var i=0; i < res.length; i++ ){
    $('#member_name').text(res[i]['name']);
    $('#mem_profession').text(res[i]['profession']);
}

如果重復重復標記，則需要確保每個元素都有唯一的ID。 ID的“必須唯一” ，特別是因為當您嘗試與這些元素進行交互時，它將在JavaScript和CSS中引起問題。

編輯：我測試以下代碼。 您不需要for()循環（除非您打算擴展此循環，此時唯一的ID會起作用）：

// you do not need the first couple of lines of code, was just used for testing
var json = '[{"name":"ABC","email":"test@test.com","phone":"9874563210","project_name":"Test Project","profession":"student","id":1312}]';
var res = JSON.parse(json);


$('#member_name').html(res[0]['name']);
$('#mem_profession').html(res[0]['profession']);
$('#members').show();

編輯2：如果您有一個以上的項目成員，您可以將其數據附加到每個段落，如下所示：

var json = '[{"name":"ABC","email":"test@test.com","phone":"9874563210","project_name":"Test Project","profession":"student","id":1312},{"name":"XYZ","email":"test@test.com","phone":"9874563210","project_name":"Test Project","profession":"teacher","id":1312}]';
var res = JSON.parse(json);
for(var i = 0; i < res.length; i++) {
    $('#member_name').append(res[i]['name'] + ', ');
    $('#mem_profession').append(res[i]['profession'] + ', ');
}

結果是這樣的：

成員名字
ABC，XYZ，

職業
學生，老師，