如何设置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，

职业
学生，老师，