就像下面圖片那個樣子，我想要通過點擊右邊的查看，然后左邊就能夠查看出這個人的一些資訊，并且每次點擊下一個人資料都會更著改變或者更新，這應該怎能實作?
求各位大佬賜教，幫忙一下~
uj5u.com熱心網友回復：
點擊查詢的時候把唯一值當做引數查詢到左邊要展示的內容資料。1.整個頁面重新加載。方法里正常查詢右邊串列資料，判斷是否有那個唯一值，有的話通過唯一值查詢左邊內容。
2.做區域重繪
uj5u.com熱心網友回復：
用ajax與后臺介面對接獲取，用jquery或js就能實作。ajax獲取用戶資料列，顯示在頁面右邊串列。查看按紐系結用戶ID事件，點擊后ajax根據用戶ID獲取詳細資訊資料，每次點擊不同的用戶就會獲取到該用戶的資訊并顯示到頁面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body,html{font-size:14px}
#left{float:left;width:200px;height:280px;border:1px solid #000}
#left #headImg{width:100px;height:120px;border:1px solid #000;margin:20px auto}
#left .info{margin-left:30px}
#right{float:left}
#mytable{border-spacing:0;width:100%;border-top:1px solid #000;border-left:0}
#mytable td{padding:2px 15px;border-right:1px solid #000;border-bottom:1px solid #000}
</style>
</head>
<body>
<div id="left">
<div id="headImg"><!-- 頭像 --></div>
<div class="info">
<div>姓名：<span id="uname"></span></div>
<div>證件號：<span id="cardNo"></span></div>
<div>上機時間：<span id=""></span></div>
<div>余額：<span id=""></span></div>
</div>
</div>
<div id="right">
<div>卡型別() 充值 添加會員</div>
<table id="mytable">
<thead>
<tr>
<td>姓名</td>
<td>性別</td>
<td>證件號</td>
<td>卡型別</td>
<td>余額</td>
<td>開卡時間</td>
<td>機位</td>
<td>操作</td>
</tr>
</thead>
<tbody id="dataList">
<!-- <td>1111111111111111</td>
<td>2222222</td>
<td>asasasa</td>
<td>3242342342</td>
<td>34534534</td>
<td>5645645645</td>
<td>76896786fghfgh</td>
<td><input type="button" id="btn-view" value="https://bbs.csdn.net/topics/查看" onclick="onViewInfo();"></td> -->
</tbody>
</table>
</div>
<script type="text/javascript" src="https://bbs.csdn.net/framework/js/plugins/jQuery/jquery-1.10.2.min.js"></script>
<script>
function getDataList(){
$.ajax({
type: "GET",
url: "/getUserList", //獲取用戶串列介面
dataType: "json",
success: function(res){
var htmlStr = "";
var list = res.context;//回傳資料
if (list != null && list!="" && list != undefined) {
for (var i = 0; i < list.length; i++) {
var mydata = list[i];
var id = mydata["id"];
var uname = mydata["uname"];
var sex = mydata["sex"];
var cardNo = mydata["cardNo"];
var ......
htmlStr += "<tr>"
+ " <td>"+uname+"</td>"
+ " <td>"+sex+"</td>"
+ " <td>"+cardNo+"</td>"
+ " <td><!--卡型別--></td>"
+ " <td><!--余額--></td>"
+ " <td><!--開卡時間--></td>"
+ " <td><!--機位--></td>"
+ " <td><input type=\"button\" id=\"btn-view\" value=https://bbs.csdn.net/"查看\" onclick=\"onViewInfo("+id+");\"></td>"
+ "</tr>";
}
}
$("#dataList").html(htmlStr);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
console.log('Error');
}
});
}
/**
* 根據用戶ID點擊查看，顯示用戶資訊
* @param id
* @returns
*/
function onViewInfo(id){
var data_param = [];
data_param["id"] = id;
$.ajax({
type: "GET",
url: "/getUserInfo", //獲取用戶資訊介面
data: data_param, //傳遞引數
dataType: "json",
success: function(res){
var mydata = res.context;//回傳資料
if (mydata != null && mydata != undefined) {
var uname = mydata["uname"];
var headImg = mydata["headImg"];
var cardNo = mydata["cardNo"];
var ......
$("#headImg").html("<img class=\"img\" src=https://bbs.csdn.net/""+headImg+"\">");
$("#uname").(uname);
$("#cardNo").(cardNo);
......
}
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
console.log('Error');
}
});
}
getDataList();
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/36092.html
標籤：Web 開發