AJAX 可为用户提供更友好、交互性更强的搜索体验。


AJAX Live Search

在下面的实例中,我们将演示一个实时的搜索,在您键入数据的同时即可得到搜索结果。

实时的搜索与传统的搜索相比,具有很多优势:

  • 当键入数据时,就会显示出匹配的结果

  • 当继续键入数据时,对结果进行过滤

  • 如果结果太少,删除字符就可以获得更宽的范围

在下面的文本框中输入 "HTML",搜索包含 HTML 的页面:

上面实例中的结果在一个 XML 文件(links.xml)中进行查找。为了让这个例子小而简单,我们只提供 6 个结果。


实例解释 - HTML 页面

当用户在上面的输入框中键入字符时,会执行 "showResult()" 函数。该函数由 "onkeyup" 事件触发:






源代码解释:

如果输入框是空的(str.length==0),该函数会清空 livesearch 占位符的内容,并退出该函数。

如果输入框不是空的,那么 showResult() 会执行以下步骤:

  • 创建 XMLHttpRequest 对象

  • 创建在服务器响应就绪时执行的函数

  • 向服务器上的文件发送请求

  • 请注意添加到 URL 末端的参数(q)(包含输入框的内容)


PHP 文件

上面这段通过 JavaScript 调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。

"livesearch.php" 中的源代码会搜索 XML 文件中匹配搜索字符串的标题,并返回结果:

load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
// 从 URL 中获取参数 q 的值
$q=$_GET["q"];
// 如果 q 参数存在则从 xml 文件中查找数据
if (strlen($q)>0)
{
         $hint="";
          for($i=0; $i<($x->length); $i++)
          {
                 $y=$x->item($i)->getElementsByTagName('title');
                 $z=$x->item($i)->getElementsByTagName('url');
                 if ($y->item(0)->nodeType==1)
                  {
                       // 找到匹配搜索的链接
                       if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
                        {
                               if ($hint=="")
                                {
                                         $hint="item(0)->childNodes->item(0)->nodeValue . 
                                         "' target='_blank'>" . 
                                         $y->item(0)->childNodes->item(0)->nodeValue . "";
                                }
                                else
                                {
                                         $hint=$hint . "item(0)->childNodes->item(0)->nodeValue . 
                                          "' target='_blank'>" . 
                                         $y->item(0)->childNodes->item(0)->nodeValue . "";
                                }
                          }
                   }
           }
}
// 如果没找到则返回 "no suggestion"
if ($hint=="")
{
      $response="no suggestion";
}
else
{
      $response=$hint;
}
// 输出结果
echo $response;
?>

如果 JavaScript 发送了任何文本(即 strlen($q) > 0),则会发生:

  • 加载 XML 文件到新的 XML DOM 对象

  • 遍历所有的 元素,以便找到匹配 JavaScript 所传文本</p></li><li><p>在 "$response" 变量中设置正确的 URL 和标题。如果找到多于一个匹配,所有的匹配都会添加到变量。</p></li><li><p>如果没有找到匹配,则把 $response 变量设置为 "no suggestion"。</p></li></ul><p><strong>相关视频教程推荐</strong>:《<a href="http://www.php.cn/course/list/25.html" target="_blank">AJAX教程</a>》<a href="http://www.php.cn/course/list/25.html" _src="http://www.php.cn/course/list/25.html">http://www.php.cn/course/list/25.html</a></p></div></div> </div> <div class="desadown flexRow"> <a href="/php/php-ajax-xml.html" title="AJAX XML" class="dsdleft flexRow dsda"> <img src="/static/lhimages/icon226.png" class="nocheck"> <img src="/static/lhimages/icon226_check.png" class="check"> <p>AJAX XML</p> </a> <a href="/php/php-ajax-rss-reader.html" title="AJAX RSS Reader" class="dsdright flexRow dsda"><p>AJAX RSS Reader</p> <img src="/static/lhimages/icon227.png" class="nocheck"> <img src="/static/lhimages/icon227_check.png" class="check"> </a> </div> </div> <div class="left-video"> <div class="ltzt-title lttitle flexRow"> <div class="title-left flexRow"> <p><span>相关</span><b></b></p> <p>视频</p> <p class="eng">RELATED VIDEOS</p> </div> <a class="title-more flexRow" href="/course/sort_new.html" title="视频教程"><b></b>更多 </a> </div> <div class="video-list flexRow codevideo"> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg2'>中级</i> <a href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="aBlack aClass">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> </dt> <dd class="flexRow studyandcoll"> <p>1484960次学习</p><em><a class="courseICollection " data-id="812" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/1188.html" title="php8,我来也"> <img src="https://img.php.cn/upload/course/000/000/068/62b2ea11e0283309.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="php8,我来也" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg1'>初级</i> <a href="/course/1188.html" title="php8,我来也" class="aBlack aClass">php8,我来也</a> </dt> <dd class="flexRow studyandcoll"> <p>315072次学习</p><em><a class="courseICollection " data-id="1188" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/1086.html" title="Thinkphp6.0正式版视频教程"> <img src="https://img.php.cn/upload/course/000/000/015/61adbdb9912b0589.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="Thinkphp6.0正式版视频教程" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg2'>中级</i> <a href="/course/1086.html" title="Thinkphp6.0正式版视频教程" class="aBlack aClass">Thinkphp6.0正式版视频教程</a> </dt> <dd class="flexRow studyandcoll"> <p>378415次学习</p><em><a class="courseICollection " data-id="1086" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/1203.html" title="细说PHP第一季"> <img src="https://img.php.cn/upload/course/000/000/068/6253d15e4bb6a476.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="细说PHP第一季" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg2'>中级</i> <a href="/course/1203.html" title="细说PHP第一季" class="aBlack aClass">细说PHP第一季</a> </dt> <dd class="flexRow studyandcoll"> <p>265134次学习</p><em><a class="courseICollection " data-id="1203" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/1134.html" title="TP6.0 搭建个人博客实战(玉女心经版)"> <img src="https://img.php.cn/upload/course/000/000/068/62555a16c9bf9556.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="TP6.0 搭建个人博客实战(玉女心经版)" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg1'>初级</i> <a href="/course/1134.html" title="TP6.0 搭建个人博客实战(玉女心经版)" class="aBlack aClass">TP6.0 搭建个人博客实战(玉女心经版)</a> </dt> <dd class="flexRow studyandcoll"> <p>208023次学习</p><em><a class="courseICollection " data-id="1134" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/1503.html" title="简单聊聊PHP创业那点事"> <img src="https://img.php.cn/upload/course/000/000/067/64be3549bab29833.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="简单聊聊PHP创业那点事" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg1'>初级</i> <a href="/course/1503.html" title="简单聊聊PHP创业那点事" class="aBlack aClass">简单聊聊PHP创业那点事</a> </dt> <dd class="flexRow studyandcoll"> <p>12919次学习</p><em><a class="courseICollection " data-id="1503" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/797.html" title="PHP实战天龙八部之微信支付视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="PHP实战天龙八部之微信支付视频教程" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg2'>中级</i> <a href="/course/797.html" title="PHP实战天龙八部之微信支付视频教程" class="aBlack aClass">PHP实战天龙八部之微信支付视频教程</a> </dt> <dd class="flexRow studyandcoll"> <p>171999次学习</p><em><a class="courseICollection " data-id="797" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站"> <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="PHP实战天龙八部之仿爱奇艺电影网站" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg2'>中级</i> <a href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站" class="aBlack aClass">PHP实战天龙八部之仿爱奇艺电影网站</a> </dt> <dd class="flexRow studyandcoll"> <p>769630次学习</p><em><a class="courseICollection " data-id="801" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/836.html" title="大型实战天龙八部之开发Mini版MVC框架仿糗事百科网站"> <img src="https://img.php.cn/upload/course/000/000/001/5d24230536122573.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="大型实战天龙八部之开发Mini版MVC框架仿糗事百科网站" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg2'>中级</i> <a href="/course/836.html" title="大型实战天龙八部之开发Mini版MVC框架仿糗事百科网站" class="aBlack aClass">大型实战天龙八部之开发Mini版MVC框架仿糗事百科网站</a> </dt> <dd class="flexRow studyandcoll"> <p>43815次学习</p><em><a class="courseICollection " data-id="836" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> </div> </div> </div> </div> <div class="conRight"> <div class="technology-news rightDiv"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>科技资讯</p> </div> <a class="rititle-more flexRow" href="/it" title="科技资讯">更多</a> </div> <ul class="tecnewul"> <li class="tecnelli flexRow"> <a href="/faq/1686390.html" title="Siri大改版!传苹果「借力」Google Gemini 明年3月重磅登场" class="tecna"> <img src="https://img.php.cn/upload/article/001/242/473/176224099096373.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="Siri大改版!传苹果「借力」Google Gemini 明年3月重磅登场" class="tecnAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="tecnRight flexColumn"> <a href="/faq/1686390.html" title="Siri大改版!传苹果「借力」Google Gemini 明年3月重磅登场" class="tecnda overflowclass">Siri大改版!传苹果「借力」Google Gemini 明年3月重磅登场</a> <a class="tecnp overflowclass" href="/faq/1686390.html" title="Siri大改版!传苹果「借力」Google Gemini 明年3月重磅登场">根据外媒援引《彭博社》记者MarkGurman在其《PowerOn》通讯中的最新爆料,苹果正全力推进下一代AppleIntelligence及Siri的重大升级,预计将于2026年正式亮相。Siri将依托Gemini模型实现AI网络搜索报道称,苹果计划在2026年3月左右推出全面革新版本的Siri。该版本将深度“依赖”谷歌的GeminiAI模型,并引入由AI驱动的全新网络搜索功能。Gurman强调,这并不意味着Siri会直接整合谷歌服务或开放Gemini功能入口。实际上,苹果将向谷歌支付费用,合</a> </div> </li> <li class="tecnelli flexRow"> <a href="/faq/1686361.html" title="刚裁几万人 现在又要招人!微软纳德拉的AI策略是什么?" class="tecna"> <img src="https://img.php.cn/upload/article/001/242/473/176224057320559.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="刚裁几万人 现在又要招人!微软纳德拉的AI策略是什么?" class="tecnAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="tecnRight flexColumn"> <a href="/faq/1686361.html" title="刚裁几万人 现在又要招人!微软纳德拉的AI策略是什么?" class="tecnda overflowclass">刚裁几万人 现在又要招人!微软纳德拉的AI策略是什么?</a> <a class="tecnp overflowclass" href="/faq/1686361.html" title="刚裁几万人 现在又要招人!微软纳德拉的AI策略是什么?">美国科技龙头微软(Microsoft)即将启动新一轮人力扩张,执行长萨提亚·纳德拉(SatyaNadella)在週五发布的BG2Podcast访谈中透露,公司正准备恢复招聘,但未来新增的员工将具备「更高的杠杆效应」,这主要得益于人工智慧(AI)技术的深度整合。在截至2025年6月的财年中,微软全球员工总数稳定维持在约22.8万人,期间已裁减超过6,000名员工。今年七月,公司又实施了规模达9,000人的裁员计划。对此,纳德拉表示,在接下来的一年左右时间里,现有团队将经历一场“去学习”与“再学习”</a> </div> </li> <li class="tecnelli flexRow"> <a href="/faq/1686358.html" title="消息称字节跳动试点“豆包股”激励员工,根据内部估值定价" class="tecna"> <img src="https://img.php.cn/upload/article/001/246/273/176224050483063.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="消息称字节跳动试点“豆包股”激励员工,根据内部估值定价" class="tecnAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="tecnRight flexColumn"> <a href="/faq/1686358.html" title="消息称字节跳动试点“豆包股”激励员工,根据内部估值定价" class="tecnda overflowclass">消息称字节跳动试点“豆包股”激励员工,根据内部估值定价</a> <a class="tecnp overflowclass" href="/faq/1686358.html" title="消息称字节跳动试点“豆包股”激励员工,根据内部估值定价">11月4日消息,据ZFinance最新披露,字节跳动正悄然推进一项名为“豆包长期激励计划”的内部试点项目。该计划聚焦于豆包及其关联的大模型业务线,设计了一套类似“虚拟股权”的激励机制,通过发放“豆包股”并配套期权回购通道,旨在提升核心团队的稳定性与创新动力。知情人士透露,当前“豆包股”的定价主要参照项目投入成本,授予价格极具吸引力。随着豆包在大模型ToB领域持续拓展,未来将依据实际业务增长情况进行动态估值调整,使员工收益与业绩表现深度绑定,让更多参与者切实分享业务成长带来的红利。若以字</a> </div> </li> </ul> </div> <div class="readCharts"> <div class="readDown flexColumn"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b><b></b></div> <a class="rititle-more flexRow" href="/article.html" target="_blank" title="更多">更多</a> </div> <ul class="rcUl"> <li class="rcLi flexRow"> <div class="rclileft"> <p>1</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1686395.html" class=" aClass readA overflowclass" title="优化MUI Select组件交互:实现单次点击切换下拉菜单">优化MUI Select组件交互:实现单次点击切换下拉菜单</a> <a href="/faq/1686395.html" class=" aClass overflowclass" title="优化MUI Select组件交互:实现单次点击切换下拉菜单">本教程旨在解决MUISelect组件在多下拉菜单场景下,从一个已打开的菜单切换到另一个菜单时需要两次点击的问题。通过深入理解MUI下拉菜单的渲染机制,本文将介绍一种策略:结合调整组件的zIndex属性和在onOpen事件中模拟点击背景蒙层,从而实现用户单次点击即可流畅切换不同Select组件的交互体验,显著提升用户界面的可用性。</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>2</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1686393.html" class=" aClass readA overflowclass" title="JavaScript/D3.js 中带数字后缀键的数组自然排序指南">JavaScript/D3.js 中带数字后缀键的数组自然排序指南</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>3</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1686386.html" class=" aClass readA overflowclass" title="js脚本如何制作元素随机位置动画_js随机移动动画脚本编写教程">js脚本如何制作元素随机位置动画_js随机移动动画脚本编写教程</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>4</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1686375.html" class=" aClass readA overflowclass" title="如何在mysql中使用SELECT查询数据">如何在mysql中使用SELECT查询数据</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>5</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1686368.html" class=" aClass readA overflowclass" title="JavaScript事件委托:实现动态内容区域的精准切换">JavaScript事件委托:实现动态内容区域的精准切换</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>6</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1686359.html" class=" aClass readA overflowclass" title="如何在mysql中分析binlog日志">如何在mysql中分析binlog日志</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>7</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1686353.html" class=" aClass readA overflowclass" title="Go语言HTTP客户端PostForm数据发送与响应体解析指南">Go语言HTTP客户端PostForm数据发送与响应体解析指南</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>8</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1686350.html" class=" aClass readA overflowclass" title="C# 怎么使用 Serilog 或 NLog 记录日志_C# 日志记录框架使用指南">C# 怎么使用 Serilog 或 NLog 记录日志_C# 日志记录框架使用指南</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>9</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1686344.html" class=" aClass readA overflowclass" title="React中渲染嵌套列表:map()内部map()的最佳实践与常见陷阱">React中渲染嵌套列表:map()内部map()的最佳实践与常见陷阱</a> </div> </li> </ul> </div> </div> <div class="adversitement"> <script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script> </div> <div class=" rightStudy rightDiv"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p> 精选课程</p> </div> <a class="rititle-more flexRow" href="/course/sort_new.html" title="精选课程">更多</a> </div> <div class="ristyList flexColumn"> <div class="ristyA flexRow "> <a href="/course/797.html" title="PHP实战天龙八部之微信支付视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="PHP实战天龙八部之微信支付视频教程" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/797.html" title="PHP实战天龙八部之微信支付视频教程" class="rirightp overflowclass">PHP实战天龙八部之微信支付视频教程</a> <div class="risrdown flexRow"> <p>共5课时</p><b></b> <p>17.2万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站"> <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="PHP实战天龙八部之仿爱奇艺电影网站" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站" class="rirightp overflowclass">PHP实战天龙八部之仿爱奇艺电影网站</a> <div class="risrdown flexRow"> <p>共49课时</p><b></b> <p>77万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/880.html" title="前端入门_HTML5"> <img src="https://img.php.cn/upload/course/000/000/068/6255589398c2c999.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="前端入门_HTML5" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/880.html" title="前端入门_HTML5" class="rirightp overflowclass">前端入门_HTML5</a> <div class="risrdown flexRow"> <p>共29课时</p><b></b> <p>61.7万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/893.html" title="CSS视频教程-玉女心经版"> <img src="https://img.php.cn/upload/course/000/000/068/625558b87e512730.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="CSS视频教程-玉女心经版" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/893.html" title="CSS视频教程-玉女心经版" class="rirightp overflowclass">CSS视频教程-玉女心经版</a> <div class="risrdown flexRow"> <p>共25课时</p><b></b> <p>39.3万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/894.html" title="JavaScript极速入门_玉女心经系列"> <img src="https://img.php.cn/upload/course/000/000/068/625558e4f11c8518.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="JavaScript极速入门_玉女心经系列" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/894.html" title="JavaScript极速入门_玉女心经系列" class="rirightp overflowclass">JavaScript极速入门_玉女心经系列</a> <div class="risrdown flexRow"> <p>共43课时</p><b></b> <p>70.9万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/372.html" title="独孤九贱(1)_HTML5视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6ddbecdb1707.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(1)_HTML5视频教程" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/372.html" title="独孤九贱(1)_HTML5视频教程" class="rirightp overflowclass">独孤九贱(1)_HTML5视频教程</a> <div class="risrdown flexRow"> <p>共25课时</p><b></b> <p>61.6万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/373.html" title="独孤九贱(2)_CSS视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6de7424b9255.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(2)_CSS视频教程" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/373.html" title="独孤九贱(2)_CSS视频教程" class="rirightp overflowclass">独孤九贱(2)_CSS视频教程</a> <div class="risrdown flexRow"> <p>共22课时</p><b></b> <p>23万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/386.html" title="独孤九贱(3)_JavaScript视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6df423564706.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(3)_JavaScript视频教程" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/386.html" title="独孤九贱(3)_JavaScript视频教程" class="rirightp overflowclass">独孤九贱(3)_JavaScript视频教程</a> <div class="risrdown flexRow"> <p>共28课时</p><b></b> <p>33.9万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/379.html" title="独孤九贱(4)_PHP视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(4)_PHP视频教程" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/379.html" title="独孤九贱(4)_PHP视频教程" class="rirightp overflowclass">独孤九贱(4)_PHP视频教程</a> <div class="risrdown flexRow"> <p>共89课时</p><b></b> <p>125万人学习</p> </div> </div> </div> </div> </div> <div class=" rightDowns rightDiv"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p> 热门下载</p> </div> <a class="rititle-more flexRow" href="/xiazai/" title="热门下载">更多</a> </div> <div class="rids"> <div href="/xiazai/gongju/845" title="phpStudy 2018最新版" class="ridsA flexRow " > <a href="/xiazai/gongju/845" title="phpStudy 2018最新版"> <img src="https://img.php.cn/upload/manual/000/000/001/5a5f0fb612676526.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="phpStudy 2018最新版" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/845" title="phpStudy 2018最新版" class="ridsrp overflowclass">phpStudy 2018最新版</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/845" title="phpStudy 2018最新版"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/1351" title="vc9-vc14(32+64位)运行库合集(链接在下方)" class="ridsA flexRow " > <a href="/xiazai/gongju/1351" title="vc9-vc14(32+64位)运行库合集(链接在下方)"> <img src="https://img.php.cn/upload/manual/000/000/001/5a6a896b53dea437.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="vc9-vc14(32+64位)运行库合集(链接在下方)" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/1351" title="vc9-vc14(32+64位)运行库合集(链接在下方)" class="ridsrp overflowclass">vc9-vc14(32+64位)运行库合集(链接在下方)</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/1351" title="vc9-vc14(32+64位)运行库合集(链接在下方)"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/1479" title="VC9 32位" class="ridsA flexRow " > <a href="/xiazai/gongju/1479" title="VC9 32位"> <img src="https://img.php.cn/upload/manual/000/000/001/5af2c4207a616756.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="VC9 32位" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/1479" title="VC9 32位" class="ridsrp overflowclass">VC9 32位</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/1479" title="VC9 32位"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/1481" title="VC11 32位" class="ridsA flexRow " > <a href="/xiazai/gongju/1481" title="VC11 32位"> <img src="https://img.php.cn/upload/manual/000/000/001/5af2c4684dbe4408.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="VC11 32位" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/1481" title="VC11 32位" class="ridsrp overflowclass">VC11 32位</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/1481" title="VC11 32位"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/714" title="php程序员工具箱完整版" class="ridsA flexRow " > <a href="/xiazai/gongju/714" title="php程序员工具箱完整版"> <img src="https://img.php.cn/upload/manual/000/000/001/5a718c0e5be0a511.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="php程序员工具箱完整版" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/714" title="php程序员工具箱完整版" class="ridsrp overflowclass">php程序员工具箱完整版</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/714" title="php程序员工具箱完整版"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/1484" title="VC14 32位" class="ridsA flexRow " > <a href="/xiazai/gongju/1484" title="VC14 32位"> <img src="https://img.php.cn/upload/manual/000/000/001/5af2c54fc1f91550.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="VC14 32位" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/1484" title="VC14 32位" class="ridsrp overflowclass">VC14 32位</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/1484" title="VC14 32位"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/93" title="SublimeText3汉化版" class="ridsA flexRow " > <a href="/xiazai/gongju/93" title="SublimeText3汉化版"> <img src="https://img.php.cn/upload/manual/000/000/001/58a1753774be3478.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="SublimeText3汉化版" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/93" title="SublimeText3汉化版" class="ridsrp overflowclass">SublimeText3汉化版</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/93" title="SublimeText3汉化版"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/92" title="Notepad++7.3.1" class="ridsA flexRow " > <a href="/xiazai/gongju/92" title="Notepad++7.3.1"> <img src="https://img.php.cn/upload/manual/000/000/001/58a1713812af3871.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="Notepad++7.3.1" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/92" title="Notepad++7.3.1" class="ridsrp overflowclass">Notepad++7.3.1</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/92" title="Notepad++7.3.1"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/1500" title="phpStudy V8.1(Win64位)(已支持php8)" class="ridsA flexRow " > <a href="/xiazai/gongju/1500" title="phpStudy V8.1(Win64位)(已支持php8)"> <img src="https://img.php.cn/upload/manual/000/000/001/5eb23582ba149960.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="phpStudy V8.1(Win64位)(已支持php8)" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/1500" title="phpStudy V8.1(Win64位)(已支持php8)" class="ridsrp overflowclass">phpStudy V8.1(Win64位)(已支持php8)</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/1500" title="phpStudy V8.1(Win64位)(已支持php8)"> <p>下载</p> </a> </div> </div> </div> </div> </div> </div> </div> <!--底部--> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="/about/us.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a> <a href="/about/disclaimer.html" rel="nofollow" target="_blank" title="免责申明" class="cBlack">免责申明</a> <a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a> <a href="https://www.php.cn/teacher.html" rel="nofollow" target="_blank" title="讲师合作" class="cBlack">讲师合作</a> <a href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" target="_blank" title="广告合作" class="cBlack">广告合作</a> <!--<a href="javascript:;" target="_blank" title="其他合作" class="cBlack">其他合作</a>--> <a href="/new/" target="_blank" title="最新文章列表" class="cBlack">最新更新</a> <a href="https://global.php.cn/" target="_blank" title="English" class="cBlack">English</a> <div class="clear"></div> </dt> <dd class="cont1">php中文网:公益在线php培训,帮助PHP学习者快速成长!</dd> <dd class="cont2"> <span class="ylwTopBox"> <a href="javascript:;" class="cBlack"><b class="icon1"></b>关注服务号</a> <em style="display:none;" class="ylwTopSub"> <p>微信扫码<br/>关注PHP中文网服务号</p> <img src="/static/images/examples/text16.png"/> </em> </span> <span class="ylwTopBox"> <a href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes" target="_blank" class="cBlack"><b class="icon2"></b>技术交流群</a> <em style="display:none;" class="ylwTopSub"> <p>QQ扫码<br/>加入技术交流群</p> <img src="/static/images/examples/text18.png"/> </em> </span> <div class="clear"></div> </dd> </dl> </div> <div class="phpFootRight"> <div class="phpFootMsg"> <span><img src="/static/images/examples/text17.png"/></span> <dl> <dt>PHP中文网订阅号</dt> <dd>每天精选资源文章推送</dd> </dl> </div> <div class="phpFootMsg"> <span><img src="/static/images/examples/text14.png"/></span> <dl> <dt>PHP中文网APP</dt> <dd>随时随地碎片化学习</dd> </dl> </div> </div> </div> </div> <div class="phpFootCode"> <div class="phpFootCodeIn"><p>Copyright 2014-2025 <a href="https://www.php.cn/" target="_blank">https://www.php.cn/</a> All Rights Reserved | php.cn | <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023035733号</a></p><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" target="_blank"><b></b></a></div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span> <!--底部 end--> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <script src="/static/js/CodeRunOnline.js?3.1"></script> <script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?aaf8dba0861f46190106021371583c62";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script> </body> <script> function copyCurrentUrl() { const url = window.location.href; const input = document.createElement('input'); input.value = url; document.body.appendChild(input); input.select(); document.execCommand('copy'); document.body.removeChild(input); alert('✅ 已复制当前链接:' + url); } </script> </html>