javascript - 如何设置 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 Controller 文件中

<?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'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":"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'] + ', ');
}

这导致输出如下:

Member Name
ABC, XYZ,

profession
student, teacher,