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

最新推荐文章于 2020-12-15 09:43:11 发布

原创最新推荐文章于 2020-12-15 09:43:11 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

PHP 同时被 2 个专栏收录

120 篇文章

订阅专栏

Html

77 篇文章

订阅专栏

本文介绍了一个使用PHP和AJAX实现的功能，当鼠标移到表格中的特定单元格上时，会通过AJAX请求从数据库获取详细信息并在页面上显示。示例代码包括了userModel和userController的PHP类，以及JavaScript的AJAX处理函数showDetail和hideDetail。在showDetail函数中，利用XMLHttpRequest进行POST请求，接收到响应后解析JSON数据，并创建新的div元素展示详细信息。

userModel.class.php

<?php
class userModel extends baseModel{
public function searchAll(){//地图
$sql = "select * from stu";
$result = mysql_query($sql);
$rows = array();
while($row = mysql_fetch_assoc($result)){
$rows[] = $row;
}
//var_dump($rows);
return $rows;
}
public function getOne($user_id){
  $sql = "select * from stu where id='".$user_id."'";
  $result = mysql_query($sql);
  $row = mysql_fetch_assoc($result);
  return $row;
} }

userController.class.php

<?php
class userController extends baseController{
public function showDetailAction(){
//处理的是详细信息
$userModel = new userModel("localhost","root","123","xsxx");
$rows = $userModel ->searchAll();
$this ->smarty->assign('list',$rows);
//var_dump($rows);
//echo $rows;
$this ->smarty ->display("showDetail.tpl");
}

public function processAction(){
$user_id=$_REQUEST['user_id'];
$userModel=new userModel("localhost","root","123","xsxx");
$row=$userModel->getOne($user_id);
//echo $row['id'];
echo json_encode($row);//因为现在数据库返回的
}
}

showDetail.php

<table align="center" bgcolor="pink" border="1">
<tr><th align="center">显示详细信息</th></tr>
<{foreach from=$list item="value"}>
<tr style="background-color:#ccc">
<td id="name_<{$value.id}>"><{$value.id}></td>
<td onmouseover="showDetail(<{$value.id}>)" onmouseout="hideDetail(<{$value.id}>)"><{$value.sname}></td>
</tr>
<{/foreach}>
</table>
<script>
function showDetail(user_id){
var xhr;
if(window.ActiveXObject){//IE浏览器new ActiveXObject("Msxml2.XMLHTTP");
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//火狐浏览器
xhr=new XMLHttpRequest();
}
//换一种形式发送ajax请求--post
//open()方法三个参数
xhr.open("POST","index.php?c=user&a=process",true);

xhr.onreadystatechange=callback;//监视请求状态
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('user_id='+user_id);
function callback(){
if(xhr.readyState==4){//表示请求完成
  if(xhr.status==200){//表示请求成功
   //alert(xhr.responseText);
    //但是需要注意，eval()如果想要字符串转化成对象，需要先将字符串运行一下，通过（）
     var json = eval('('+xhr.responseText+')');
     var new_div = document.createElement('div');
     new_div.style.backgroundColor = "#ccc";
     new_div.style.position = "absolute";
     new_div.id = "new_div"+user_id;
     new_div.style.marginLeft = '170px';
     new_div.innerHTML = "id:"+json.id+"<br/>sname:"+json.sname+"<br/>birthday:"+json.birthday+"<br/>score:"+json.score;
     document.getElementById('name_'+user_id).appendChild(new_div);
    }
   }
  }
}
function hideDetail(user_id){
  var new_div = document.getElementById("new_div"+user_id);
  document.getElementById("name_"+user_id).removeChild(new_div);
}
</script>

具体样子如图：