我正在开发一个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>
元素的正确方法。感谢帮助
段落不能有值,你需要在其中设置文本:
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,
职业 学生,老师,