如何设置从json响应到的值 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":"[email protected]",
    "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's Must Be Unique，特别是因为当你尝试与这些元素进行交互时，它会在JavaScript和CSS中引起问题。

编辑：我tested与以下代码。你不需要for()循环（除非你计划扩展它，此时唯一ID会发挥作用）：

// you do not need the first couple of lines of code, was just used for testing
var json = '[{"name":"ABC","email":"[email protected]","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":"[email protected]","phone":"9874563210","project_name":"Test Project","profession":"student","id":1312},{"name":"XYZ","email":"[email protected]","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，

职业 学生，老师，