返回顶部
首页 > 资讯 > 前端开发 > VUE >AJAX中怎么实现鼠标悬浮获取值
  • 814
分享到

AJAX中怎么实现鼠标悬浮获取值

2024-04-02 19:04:59 814人浏览 独家记忆
摘要

ajax中怎么实现鼠标悬浮获取值,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 客户端代码mouseover

ajax中怎么实现鼠标悬浮获取值,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

客户端代码mouseover.PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标悬浮测试</title>
</head>
<script type="text/javascript" language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function sendRequest(t){
var id = t.id
createXMLHttpRequest();
var url = "mouseover_check.php?page=" +t.id ;
xmlHttp.onreadystatechange = callback;
xmlHttp.open('GET',url,true);
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
document.getElementById("show").innerHTML = xmlHttp.responseText;
}
}
}

</script>
<body>
<p>
<input type="text" value="here" id="1" onmouseover="sendRequest(this)" />
</p>
<p><br/>
<input type="text" value="haha" id="2" onmouseover="sendRequest(this)" />
</div>
</p>
<p></p>
<span id="show"></span>
</body>
</html>


服务器端代码:
mouseover_check.php

复制代码 代码如下:


<?php
header("Content-type:text/html;charset=gb2312");
header("cache-control:no-cache,must-revalidate");
$name = $_GET['page'];
if($name == '1'){
echo "111";
}
else{
echo "222";
}
?>

关于AJAX中怎么实现鼠标悬浮获取值问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网VUE频道了解更多相关知识。

--结束END--

本文标题: AJAX中怎么实现鼠标悬浮获取值

本文链接: https://lsjlt.com/news/76031.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • AJAX中怎么实现鼠标悬浮获取值
    AJAX中怎么实现鼠标悬浮获取值,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 客户端代码mouseover...
    99+
    2024-04-02
  • js实现鼠标悬浮框效果
    本文实例为大家分享了js实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <h...
    99+
    2024-04-02
  • vue实现鼠标悬浮框效果
    本文实例为大家分享了vue实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 效果: html: <div   @mouseenter="enter"    @mouse...
    99+
    2024-04-02
  • CSS3按钮鼠标悬浮怎么实现光圈效果
    这篇文章主要介绍了CSS3按钮鼠标悬浮怎么实现光圈效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS3按钮鼠标悬浮怎么实现光圈效果文章都会有所收获,下面我们一起来看看吧。1 、HTML相关知识点 &nbs...
    99+
    2023-07-04
  • Vue实现鼠标悬浮切换图片src
    本文实例为大家分享了Vue实现鼠标悬浮切换图片src的具体代码,供大家参考,具体内容如下 需求: 1. 鼠标悬浮到图示按钮上面,图片切换成灰色按钮2. 鼠标离开图示按钮,图片切换成回...
    99+
    2024-04-02
  • vue如何实现鼠标悬浮框效果
    这篇文章将为大家详细讲解有关vue如何实现鼠标悬浮框效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下效果:html:<div  @mouseenter="...
    99+
    2023-06-29
  • js如何实现鼠标悬浮框效果
    这篇文章主要介绍了js如何实现鼠标悬浮框效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下<!DOCTYPE html><html&n...
    99+
    2023-06-29
  • css如何实现鼠标悬浮改变图片
    这篇文章将为大家详细讲解有关css如何实现鼠标悬浮改变图片,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 在css中,可以使用“:hover”...
    99+
    2024-04-02
  • JavaScript实现鼠标悬浮页面切换效果
    本文实例为大家分享了JavaScript实现鼠标悬浮页面切换效果的具体代码,供大家参考,具体内容如下 前几天做了个常见的页面悬浮效果,直接上图。 html代码 <!DOCTY...
    99+
    2024-04-02
  • Vue如何实现鼠标悬浮切换图片
    这篇“Vue如何实现鼠标悬浮切换图片”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue如何实现鼠标悬浮切换图片”文章吧。需...
    99+
    2023-06-29
  • CSS如何实现鼠标悬浮出现遮罩层
    这篇文章给大家分享的是有关CSS如何实现鼠标悬浮出现遮罩层的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。先来一个简单的实现方法:代码如下:<!DOCTYPE html><html&nb...
    99+
    2023-06-08
  • 怎么使用Vue实现鼠标悬浮更换图片功能
    今天小编给大家分享一下怎么使用Vue实现鼠标悬浮更换图片功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。首先将所有的选中后...
    99+
    2023-07-04
  • vue实现鼠标经过显示悬浮框效果
    本文实例为大家分享了vue实现鼠标经过显示悬浮框效果的具体代码,供大家参考,具体内容如下 项目架构采用vue-cli脚手架搭建的webpack项目 实现的效果如下: 鼠标经过but...
    99+
    2024-04-02
  • Vue.js如何实现鼠标悬浮更换图片功能
    这篇文章主要介绍Vue.js如何实现鼠标悬浮更换图片功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样...
    99+
    2024-04-02
  • css3如何实现鼠标悬浮停止动画效果
    小编给大家分享一下css3如何实现鼠标悬浮停止动画效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 在css中,可以利用“:hover”选择器和“animat...
    99+
    2024-04-02
  • JavaScript如何实现鼠标悬浮页面切换效果
    这篇文章主要为大家展示了“JavaScript如何实现鼠标悬浮页面切换效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何实现鼠标悬浮页面切换效果”这篇文章吧。具体内容如下...
    99+
    2023-06-29
  • 如何使用CSS content的attr实现鼠标悬浮提示
    这篇文章主要介绍了如何使用CSS content的attr实现鼠标悬浮提示,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。需要那么大的插件库,其实就一两个地方需要做一些提示(t...
    99+
    2023-06-08
  • vue如何实现鼠标经过显示悬浮框效果
    这篇文章给大家分享的是有关vue如何实现鼠标经过显示悬浮框效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下项目架构采用vue-cli脚手架搭建的webpack项目实现的效果如下:鼠标经过button...
    99+
    2023-06-29
  • CSS如何实现鼠标悬浮无限向下级展示
    这篇文章主要介绍CSS如何实现鼠标悬浮无限向下级展示,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体代码如下所示;*{        ...
    99+
    2023-06-08
  • CSS怎么实现鼠标悬停tip效果
    这篇文章主要介绍“CSS怎么实现鼠标悬停tip效果”,在日常操作中,相信很多人在CSS怎么实现鼠标悬停tip效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS怎么实现鼠...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作