Ajax
使用jQuery .load（或$.Ajax）获取和设置页面标题
在Web开发中，经常会遇到需要动态获取或设置页面标题的情况。这对于单页应用程序或需要异步加载内容的网站尤为重要。jQuery 提供了
.load() 方法和 $.Ajax 函数，可以方便地实现这一目标。1. 获取页面标题使用 .load() 方法可以轻松地从另一个页面加载内容，并将其插入到指定的元素中。为了获取页面标题，我们可以选择加载整个页面并从中提取标题。html<!DOCTYPE html><html lang="en"><head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原始页面</title> <script src="https://code.jquery.com/jquery-3.6.4.min.JS"></script></head><body> <div id="result"></div> <script> $(document).ready(function() { $("#result").load("target-page.html head title", function(response, status, xhr) { if (status == "success") { var pageTitle = $("#result").find("title").text(); console.log("页面标题：" + pageTitle); } }); }); </script></body></html>在上述代码中，我们通过 .load() 方法将目标页面的 </code> 元素加载到 id 为 "result" 的 <code><div></code> 中。然后，通过选择器找到标题元素并提取其中的文本。</p>2. 设置页面标题</p>通过 <code>$.Ajax</code> 函数，我们可以实现动态修改页面标题的效果。以下是一个简单的例子：</p><pre id="code-block">html</p><!DOCTYPE html></p><html lang="en"></p><head></p> <Meta charset="UTF-8"></p> <Meta name="viewport" content="width=device-width, initial-scale=1.0"></p> <title>原始页面</title></p> <script src="https://code.jquery.com/jquery-3.6.4.min.JS"></script></p></head></p><body></p> <button id="changeTitleBtn">修改页面标题</button></p> <script></p> $(document).ready(function() {</p> $("#changeTitleBtn").click(function() {</p> var newTitle = "新页面标题";</p> $.Ajax({</p> type: "POST", // 或 "GET"</p> url: "update-title.php", // 替换为实际的处理页面</p> data: { title: newTitle },</p> success: function(response) {</p> console.log("页面标题已成功更新！");</p> $("head title").text(newTitle);</p> },</p> error: function(error) {</p> console.error("更新页面标题时出错：" + error);</p> }</p> });</p> });</p> });</p> </script></p></body></p></html></p></pre></p>在这个例子中，当用户点击按钮时，会通过 <a href="https://www.izhida.com/topic/264428825" target="_blank">Ajax</a> 请求将新的标题发送到<a href="https://www.izhida.com/topic/267898548" target="_blank">服务器</a>端（在这里用 <code>update-title.php</code> 表示）。成功后，页面的标题将被更新，并在控制台中显示相应的消息。</p><strong></strong></p>通过使用 jQuery 的 <code>.load()</code> 方法和 <code>$.Ajax</code> 函数，我们可以轻松地实现页面标题的获取和设置。这对于构建动态内容和单页应用程序是至关重要的。请确保在实际项目中替换实际的页面和处理程序地址，以便符合项目的需求。</p></div><div class="fav"><em class="fr" onClick="report(7585862,7441797)">举报</em><em onClick="love(7585862);">有用（<i id="love_7585862">4</i>）</em><em onClick="share()" class="sr">分享</em><em data-aid="7585862" class="favorite sr" onClick="favorite(7585862,7441797,this)">收藏</em></div><div class="huida"><input type="hidden" name="qid" id="qid_id" value="7441797"><a name="huida"></a><textarea id="answer"></textarea><input onClick="answer()" type="button" class="innc" id="dosubmit" value="回答"/></div></div></div><div class="right fr"><div class="blank"></div><div class="zome"><div class="tit"><h2>热门话题</h2></div><div class="tag"><a href="/topic/2634910086">贝索斯</a><a href="/topic/2392610085">火箭</a><a href="/topic/2498110084">蓝色起源</a><a href="/topic/2323810083">裁员</a><a href="/topic/2147910082">硅谷</a><a href="/topic/2055910081">警察</a><a href="/topic/2279210080">唐装</a><a href="/topic/2639510079">汉服</a><a href="/topic/2030110077">旗袍</a><a href="/topic/2077710076">养老金</a><a href="/topic/2137610075">农民</a><a href="/topic/2135010074">海底总动员</a><a href="/topic/2576710073">美缝</a><a href="/topic/2976710072">抛釉砖</a><a href="/topic/2717910071">抛光砖</a><a href="/topic/2476310070">瓷砖</a><a href="/topic/2024110069">安检</a><a href="/topic/2435410068">陶瓷</a><a href="/topic/2109610067">不粘锅</a><a href="/topic/2757510066">玻璃钢</a><a href="/topic/2231010065">大理石</a><a href="/topic/2028310064">聚氯乙烯</a><a href="/topic/2733910063">pvc</a><a href="/topic/2151310062">太空铝</a><a href="/topic/2052710061">浴室柜</a><a href="/topic/2848210060">踢脚线</a><a href="/topic/2089010059">杨慎</a><a href="/topic/2320010058">曾巩</a><a href="/topic/2841210057">吴承恩</a><a href="/topic/2154810056">罗贯中</a></div></div><div class="blank"></div><div class="zome"><div class="tit"><h2>相关问题</h2></div><div class="txt"><ul><li><a href="/p/749727488395">jQuery 修复“Uncaught TypeError $ is not a function”错误 [重复]</a></li><li><a href="/p/715327486726">jQuery 仅在提交时验证规则</a></li><li><a href="/p/796317457741">jQuery addClass() 不在 jQuery.ajax() 之前运行</a></li><li><a href="/p/777527451121">设置1分钟后自动灭屏,为何不灭,手机还发烫</a></li><li><a href="/p/755087442245">jQuery 中的节流事件调用</a></li><li><a href="/p/709197434848">jQuery 动态聚焦于第一个 INPUT 或 Textarea</a></li><li><a href="/p/751577433678">获取劳务派遣资质的法律手续</a></li><li><a href="/p/705347431706">设置苹果手机铃音手机要下什么软件</a></li><li><a href="/p/790487430209">获取对方违法偷税漏税信息的策略</a></li><li><a href="/p/756997428122">JQuery 动态加载 Javascript 文件</a></li><li><a href="/p/717057426684">jquery ajax 与 asp.net 不工作</a></li><li><a href="/p/732297423711">设置了仅一部分人可见的微信朋友圈图文转为私密之后,如果再次挑选公开还</a></li><li><a href="/p/756907412558">jQuery 中的消息框</a></li><li><a href="/p/724637409676">jQuery 中的 Join() 是什么</a></li></ul></div></div></div></div><script type="text/javascript" src="/api/count?id=7441797&module=zsask"></script><script type="text/javascript" src="//css.izhida.com/js/fun.js"></script><div class="foot"><p class="nav"><a href="/about/about.html">关于我们</a>|<a href="/about/agreement.html">免责条款</a>|<a href="/about/copyright.html">版权声明</a>|<a href="/about/report.html">侵权举报</a>|<a href="/about/privacy.html">隐私政策</a>|<a href="/about/contact.html">联系我们</a></p><p>Copyright © 2025 <a href="https://www.izhida.com">IZhiDa.com</a> All Rights Reserved.</p><p><a href="https://www.izhida.com">知答</a> 版权所有 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">粤ICP备2023042255号</a></p></div><div class="o"><script type="text/javascript" src="//css.izhida.com/js/stat.js"></script></div><script>(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></html>