鼠标移动到热点上,显示详细信息

本文介绍了一种利用模板文件和JavaScript实现用户详细信息动态加载的技术,通过POST请求获取用户信息,并在页面上实时展示,提高了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

tpl文件:
<form action="index.php" method="post">

<center><table>
        <tr><th>显示详细信息</th></tr>
 <{foreach from=$list item="value"}>
 <tr>
  <td id="name_<{$value.id}>" bgcolor="00FF00"><{$value.id}></td>
 <td bgcolor="FF00FF" onmouseover="showDetail(<{$value.id}>)" onmouseout="hideDetail(<{$value.id}>)"><{$value.username}></td>
  
 </tr>
 <{/foreach}>
 
 
</table></center>
</form>

<script>
 
 function showDetail(id){
 
   var xhr;
   if(window.ActiveXObject){
     xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }else if(window.XMLHttpRequest){
     xhr=new XMLHttpRequest();
   }
   xhr.open("POST","index.php?c=user&time="+new Date().getTime()+"&a=process",true);
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   xhr.onreadystatechange=callback;
   xhr.send("id="+id);
   function callback(){
       if(xhr.readyState==4){
           if(xhr.status==200)
    {
      
     //alert(xhr.responseText);
       var json = eval('('+xhr.responseText+')');
      //alert(json.id);
       var new_div = document.createElement('div');
      
       new_div.style.backgroundColor = "#ccc";
       new_div.style.position = "absolute";
       new_div.id = "new_div"+id;
     
       new_div.style.marginLeft = '170px';
       new_div.innerHTML = "id:"+json.id+"<br/>username:"+json.username+"<br/>content:"+json.content;
       document.getElementById('name_'+id).appendChild(new_div);
    }
  
      
       }
  
   }
 }

 function hideDetail(id){
  var new_div = document.getElementById("new_div"+id);
  document.getElementById("name_"+id).removeChild(new_div);
 }

</script>
userController.class.php文件:
public function showDetaiAction(){
     $userModel=new userModel('localhost','root','','baidu');
  $rows=$userModel->searchAll();
  //file_put_contents("d://test.txt",$rows,FILE_APPEND);
  $this->smarty->assign('list',$rows);
  $this->smarty->display('showDetail.tpl');
  }
 
   public function processAction(){
  
     $id=$_REQUEST['id'];
     $userModel=new userModel('localhost','root','','baidu');
  $rows=$userModel->getOne($id);
  echo json_encode($rows);
 
  }
userModel.class.php文件:
   public function getOne($id){
      $sql="select * from c where id='".$id."'";
   $result=mysql_query($sql);
  $row=mysql_fetch_assoc($result);
   //var_dump($rows);
   return $row;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值