PHP 示例 - AJAX 即時搜尋

AJAX 可用於建立更使用者友好且互動性更強的搜尋。

AJAX 即時搜尋

下面的示例將演示一個即時搜尋，您可以在鍵入時獲取搜尋結果。

與傳統搜尋相比，即時搜尋有許多優點

鍵入時顯示結果
繼續鍵入時結果會縮小
如果結果過於狹窄，請刪除字元以檢視更廣泛的結果

在下面的輸入欄位中搜索 W3Schools 頁面

上面示例中的結果來自一個 XML 檔案（links.xml）。為了使此示例簡單明瞭，只有六個結果可用。

示例說明 - HTML 頁面

當用戶在上面的輸入欄位中鍵入字元時，將執行 "showResult()" 函式。該函式由 "onkeyup" 事件觸發

<html>
<head>
<script>
function showResult(str) {
if (str.length==0) {
  document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
  document.getElementById("livesearch").innerHTML=this.responseText;
    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

原始碼解釋

如果輸入欄位為空（str.length==0），則函式清除 livesearch 佔位符的內容並退出函式。

如果輸入欄位不為空，則 showResult() 函式執行以下操作

建立一個 XMLHttpRequest 物件
建立伺服器響應準備好時要執行的函式
將請求傳送到伺服器上的檔案
請注意，引數 (q) 已新增到 URL（包含輸入欄位的內容）

PHP 檔案

由上面的 JavaScript 呼叫的伺服器上的頁面是名為 "livesearch.php" 的 PHP 檔案。

“livesearch.php”中的原始碼會在 XML 檔案中搜索與搜尋字串匹配的標題，並返回結果

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//從 URL 獲取 q 引數
$q=$_GET["q"];

//如果 q 的長度大於 0，則查詢 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="<a href='" .
          $z->item(0)->childNodes->item(0)->nodeValue .
          "' target='_blank'>" .
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        } else {
        $hint=$hint . "<br /><a href='" .
          $z->item(0)->childNodes->item(0)->nodeValue .
          "' target='_blank'>" .
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}

//如果找不到提示，則將輸出設定為“無建議”
//或正確的值
if ($hint=="") {
  $response="no suggestion";
} else {
  $response=$hint;
}

//輸出響應
echo $response;
?>

如果 JavaScript 傳送了任何文字（strlen($q) > 0），則會發生以下情況

將 XML 檔案載入到新的 XML DOM 物件中
迴圈遍歷所有元素，以查詢與從 JavaScript 傳送的文字匹配的內容</li> <li>將正確的 URL 和標題設定為 "$response" 變數。如果找到多個匹配項，所有匹配項都將新增到該變數中</li> <li>如果沒有找到匹配項，則 $response 變數設定為 "no suggestion"</li> </ul> <br /> <div class="w3-clear nextprev"> <a class="w3-left w3-btn" href="php_ajax_xml.asp">❮ 上一頁</a> <a class="w3-right w3-btn" href="php_ajax_poll.asp">下一頁 ❯</a></div> <div id="user-profile-bottom-wrapper" class="user-profile-bottom-wrapper"> <div class="user-authenticated w3-hide"> <a href="https://profile.w3schools.com/log-in?redirect_url=https%3A%2F%2Fmy-learning.w3schools.com" class="user-profile-btn ga-bottom ga-bottom-profile" title="Your W3Schools Profile" aria-label="Your W3Schools Profile" target="_top"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2048 2048" class="user-profile-icon" aria-label="Your W3Schools Profile Icon"> <path d="M 843.500 1148.155 C 837.450 1148.515, 823.050 1149.334, 811.500 1149.975 C 742.799 1153.788, 704.251 1162.996, 635.391 1192.044 C 517.544 1241.756, 398.992 1352.262, 337.200 1470 C 251.831 1632.658, 253.457 1816.879, 340.500 1843.982 C 351.574 1847.431, 1696.426 1847.431, 1707.500 1843.982 C 1794.543 1816.879, 1796.169 1632.658, 1710.800 1470 C 1649.008 1352.262, 1530.456 1241.756, 1412.609 1192.044 C 1344.588 1163.350, 1305.224 1153.854, 1238.500 1150.039 C 1190.330 1147.286, 1196.307 1147.328, 1097 1149.035 C 1039.984 1150.015, 1010.205 1150.008, 950 1149.003 C 851.731 1147.362, 856.213 1147.398, 843.500 1148.155" stroke="none" fill="#2a93fb" fill-rule="evenodd"></path> <path d="M 1008 194.584 C 1006.075 194.809, 999.325 195.476, 993 196.064 C 927.768 202.134, 845.423 233.043, 786 273.762 C 691.987 338.184, 622.881 442.165, 601.082 552 C 588.496 615.414, 592.917 705.245, 611.329 760.230 C 643.220 855.469, 694.977 930.136, 763.195 979.321 C 810.333 1013.308, 839.747 1026.645, 913.697 1047.562 C 1010.275 1074.879, 1108.934 1065.290, 1221 1017.694 C 1259.787 1001.221, 1307.818 965.858, 1339.852 930.191 C 1460.375 795.998, 1488.781 609.032, 1412.581 451.500 C 1350.098 322.327, 1240.457 235.724, 1097.500 202.624 C 1072.356 196.802, 1025.206 192.566, 1008 194.584" stroke="none" fill="#0aaa8a" fill-rule="evenodd"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="user-progress" aria-label="Your W3Schools Profile Progress"> <path class="user-progress-circle1" fill="none" d="M 25.99650934151373 15.00000030461742 A 20 20 0 1 0 26 15"></path> <path class="user-progress-circle2" fill="none" d="M 26 15 A 20 20 0 0 0 26 15"></path> </svg> <span class="user-progress-star">★</span> <span class="user-progress-point">+1</span></a> </div> <div class="w3s-pathfinder -teaser user-anonymous w3-hide"> <div class="-background-image -variant-t2"> </div> <div class="-inner-wrapper"> <div class="-main-section"> <div class="-inner-wrapper"> <div class="-title">W3schools 學習路徑</div> <div class="-headline">跟蹤您的進度 - 免費！</div> <div class="-body"> <div class="-progress-bar"> <div class="-slider" style="width: 20%;"> </div> </div> </div> </div> </div> <div class="-right-side-section"> <div class="-user-session-btns"> <a href="https://profile.w3schools.com/log-in?redirect_url=https%3A%2F%2Fpathfinder.w3schools.com" class="-login-btn w3-btn bar-item-hover w3-right ws-light-green ga-bottom ga-bottom-login" title="登入您的賬戶" aria-label="登入您的賬戶" target="_top"> 登入 </a> <a href="https://profile.w3schools.com/sign-up?redirect_url=https%3A%2F%2Fpathfinder.w3schools.com" class="-signup-btn w3-button w3-right ws-green ws-hover-green ga-bottom ga-bottom-signup" title="註冊以提升您的學習體驗" aria-label="註冊以提升您的學習體驗" target="_top"> 註冊 </a></div> </div> </div> </div> </div> </div> <div class="w3-col l2 m12" id="right"> <div class="sidesection"> <div id="skyscraper"> <div id="adngin-sidebar_top-0"></div> </div> </div> <style> .ribbon-vid { font-size:12px; font-weight:bold; padding: 6px 20px; left:-20px; top:-10px; text-align: center; color:black; border-radius:25px; } </style> <div class="sidesection" style="margin-top:20px;margin-bottom:20px;"> <a id="upperfeatureshowcaselink" class="ga-right ga-top-fullaccess-jan" href="https://campus.w3schools.com/products/w3schools-full-access-course" target="_blank"> <picture id="upperfeatureshowcase"> <source id="upperfeatureshowcase3001" srcset="/images/img_fullaccess_up_sep1_green_300.png" media="(max-width: 990px)" style="border-radius: 5px;" /> <source id="upperfeatureshowcase120" srcset="/images/img_fullaccess_up_sep1_green_120.png" media="(max-width: 1260px)" style="border-radius: 5px;" /> <source id="upperfeatureshowcase160" srcset="/images/img_fullaccess_up_sep1_green_160.png" media="(max-width: 1700px)" style="border-radius: 5px;" /> <img id="upperfeatureshowcase300" src="/images/img_fullaccess_up_sep1_green_300.png" alt="Get Certified" style="width:auto;border-radius: 5px;"> </picture> </a> </div> <div class="sidesection"> <h4><a href="/colors/colors_picker.asp">拾色器</a></h4> <a href="/colors/colors_picker.asp" class="ga-right"> <picture> <source srcset="/images/colorpicker2000.webp" type="image/webp" /> <img src="/images/colorpicker2000.png" alt="colorpicker" loading="lazy"> </picture> </a> </div> <div class="sidesection"> <div class="sharethis"> <a href="https://www.youtube.com/@w3schools" target="_blank" title="W3Schools on YouTube"><span class="fa fa-youtube fa-2x ga-right w3-hover-text-red"></span></a> <a href="https://www.linkedin.com/company/w3schools.com/" target="_blank" title="W3Schools on LinkedIn"><span class="fa fa-linkedin-square fa-2x ga-right"></span></a> <a href="https://discord.com/invite/w3schools" target="_blank" title="Join the W3schools community on Discord"><span class="fa fa-discord fa-2x ga-right"></span></a> <a href="https://#/w3schoolscom/" target="_blank" title="W3Schools on Facebook"><span class="fa fa-facebook-square fa-2x ga-right"></span></a> <a href="https://www.instagram.com/w3schools.com_official/" target="_blank" title="W3Schools on Instagram"><span class="fa fa-instagram fa-2x ga-right"></span></a> </div> </div> <div id="vidpos" class="sidesection" style="text-align:center;margin-bottom:0;height:0;"> <div id="adngin-outstream-0"></div> </div> <div id="stickypos" class="sidesection" style="text-align:center;position:sticky;top:50px;"> <div id="stickyadcontainer"> <div style="position:relative;margin:auto;"> <div id="adngin-sidebar_sticky-0"></div> <script> function secondSnigel() { if(window.adngin && window.adngin.adnginLoaderReady) { if (Number(w3_getStyleValue(document.getElementById("main"), "height").replace("px", "")) > 2200) { if (document.getElementById("adngin-mid_content-0")) { adngin.queue.push(function(){ adngin.cmd.startAuction([ {placement: "adngin-sidebar_sticky-0", adUnit: "sidebar_sticky" }, {placement: "adngin-mid_content-0", adUnit: "mid_content" }, ]); }); } else { adngin.queue.push(function(){ adngin.cmd.startAuction([ {placement: "adngin-sidebar_sticky-0", adUnit: "sidebar_sticky" }, ]); }); } } else { if (document.getElementById("adngin-mid_content-0")) { adngin.queue.push(function(){ adngin.cmd.startAuction([ {placement: "adngin-mid_content-0", adUnit: "mid_content" }, ]); }); } } } else { window.addEventListener('adnginLoaderReady', function() { if (Number(w3_getStyleValue(document.getElementById("main"), "height").replace("px", "")) > 2200) { if (document.getElementById("adngin-mid_content-0")) { adngin.queue.push(function(){ adngin.cmd.startAuction([ {placement: "adngin-sidebar_sticky-0", adUnit: "sidebar_sticky" }, {placement: "adngin-mid_content-0", adUnit: "mid_content" }, ]); }); } else { adngin.queue.push(function(){ adngin.cmd.startAuction([ {placement: "adngin-sidebar_sticky-0", adUnit: "sidebar_sticky" }, ]); }); } } else { if (document.getElementById("adngin-mid_content-0")) { adngin.queue.push(function(){ adngin.cmd.startAuction([ {placement: "adngin-mid_content-0", adUnit: "mid_content" }, ]); }); } } }); } } </script> </div> </div> </div> <script> uic_r_c() </script> </div> </div> <div id="footer" class="footer w3-container w3-white"> <hr /> <div style="overflow:auto"> <div class="bottomad">   <div id="adngin-bottom_left-0" style="padding:0 10px 10px 0;float:left;width:auto;"></div>    <div id="adngin-bottom_right-0" style="padding:0 10px 10px 0;float:left;width:auto;"></div> </div> </div>  </div> <style> #footerwrapper { background-image:url('/images/lynx_landing.webp'), url('/images/background_in_space.webp'); background-color: #282A35; background-repeat: no-repeat, repeat; background-position: right bottom, center center /*left top*/; } #spacemyfooter { padding:40px 80px 300px 80px; max-width:1400px; xmargin:auto; } .footerlinks_1 { width:auto; float:left; padding:40px 30px; color:#FFF4A3; font-family: Source Sans Pro, sans-serif; } .footerlinks_1 .fa-logo { font-size:46px!important; color:#ddd; } .footerlinks_1:nth-child(1) { padding:30px 10px 30px 40px; } .footerlinks_1 a{ text-decoration:none; } .footerlinks_1 a:hover,.footerlinks_1 a:active{ text-decoration:underline; color:#FFF4A3; } .footerlinks_1 a:hover,.footerlinks_1 a:active{ text-decoration:underline; color:#FFF4A3!; } .footerlinks_1 a:hover i{ color:#FFF4A3!important; } .footerlinks_2 { width:auto; float:left; padding-left:40px; padding-right:135px; color:#ddd; font-family: Source Sans Pro, sans-serif; font-size:12px; line-height:15px; } .footerlinks_2:nth-child(4) { padding-right:0; } .footerlinks_2 h5 { margin-bottom:20px; } .footerlinks_2 a:visited,.footerlinks_2 a:link{ text-decoration:none; } .footerlinks_2 a:hover,.footerlinks_2 a:active{ color:#FFF4A3; } .footersome { padding:60px 40px 10px 40px; color:#ddd; font-size:20px; } .footersome a { margin-right:10px; } .footersome a:hover,.footersome a:active{ color:#FFF4A3; } .footersome .textlink { font-size:15px; text-decoration:none; } .footersome .textlink:active,.footersome .textlink:hover { text-decoration:underline; } .footertext { padding-left:40px; color:#ddd; font-size:12px; line-height:15px; } .footertext a:hover,.footertext a:active{ color:#FFF4A3; } @media screen and (max-width: 1200px) { #footerwrapper { background-size: 500px, auto; } .footerlinks_1 { padding-left:2.6%; padding-right:2.6%; } .footerlinks_2 { padding-right:8%; } } @media screen and (max-width: 992px) { .footerlinks_1 { width:100%; margin:auto; float:none; text-align:center; padding:10px 20px!important; font-size:20px; } .footerlinks_1:nth-child(1) { padding:40px 20px; } .footerlinks_2 { width:100%; float:none; margin:auto; font-size:16px; line-height:20px; padding:0; text-align:center; } .footerlinks_2 h5 { font-size:26px; margin-top:40px; } .footertext { text-align:center; padding:0; } .footer-hide-special { display:none; } #spacemyfooter { padding-bottom:400px; } .footersome { text-align:center; } } @media screen and (max-width: 992px) { #footerwrapper { background-image:url('/images/lynx_landing.webp'), url('/images/background_in_space.webp'); background-color: #282A35; background-repeat: no-repeat, repeat; background-position: center bottom, left top; } } </style> <div id="footerwrapper"> <style> @media screen and (max-width: 1440px) { .footerlinks_1 { padding-left:2.5%; padding-right:1.5%; } .footerlinks_1:nth-child(1) { width:100%; padding-left:0; } .footerlinks_1:nth-child(2) { padding-left:0; } .footerlinks_2 { padding-right:2%; } .footerlinks_2:nth-child(1) { padding-left:0; } .footerlinks_2:nth-child(4) { padding-right:0; } #spacemyfooter { padding-bottom:400px; } .footertext { padding-left:0; } .footersome { padding-left:0; } .footer-hide-special { display:none; } } @media screen and (max-width: 1200px) { #footerwrapper { background-size: 500px, auto; } .footerlinks_1 { padding-left:1.8%; padding-right:1.8%; } .footerlinks_2 { padding-right:0; } } @media screen and (max-width: 992px) { .footersome { padding:45px 10px 30px 10px; } } </style> <div id="spacemyfooter"> <div style="overflow:hidden;"> <div class="footerlinks_1"> <a href="//w3schools.tw" class="ga-bottom" aria-label="W3Schools.com" alt="W3Schools.com"> <i class="fa fa-logo"></i> </a> </div> <div class="footerlinks_1"><a href="/plus/index.php" title="Become a PLUS user and unlock powerful features" class="ga-bottom ga-bottom-plus">PLUS</a></div> <div class="footerlinks_1"><a href="/spaces/index.php" title="Get your own website with W3Schools Spaces" class="ga-bottom ga-bottom-spaces">空格</a></div> <div class="footerlinks_1"><a href="https://campus.w3schools.com/collections/certifications" title="Document your knowledge by getting certified" target="_blank" class="ga-bottom ga-bottom-cert">獲取證書</a></div> <div class="footerlinks_1"><a href="/academy/teachers/index.php" title="Contact us about W3Schools Academy for educational institutions" target="_blank" class="ga-bottom ga-bottom-teachers">面向教師</a></div> <div class="footerlinks_1"><a href="/academy/index.php" target="_blank">面向企業</a></div> <div class="footerlinks_1"><a href="javascript:void(0);" title="Contact us about sales or errors" onclick="reportError();return false">聯絡我們</a></div> </div> <style> /*Remove this style after 20. April 2024*/ #err_message { padding:8px 16px 16px 40px; border-radius:5px; display:none; position:relative; background-color:#2D3748; color:#FFF4A3; font-family:'Source Sans Pro', sans-serif; } #err_message h2 { font-family:'Source Sans Pro', sans-serif; } #err_message p { color:#f1f1f1; } #err_message #close_err_message { position:absolute; right:0; top:0; font-size:20px; cursor:pointer; width:30px; height:30px; text-align:center; } #err_message #close_err_message:hover { background-color:#FFF4A3; color:#2D3748; border-radius:50% } </style> <div id="err_message"> <span id="close_err_message" onclick="this.parentElement.style.display='none'">×</span> <h2>聯絡銷售</h2> <p>如果您想將 W3Schools 服務用於教育機構、團隊或企業，請傳送電子郵件給我們<br />sales@w3schools.com</p> <h2>報告錯誤</h2> <p>如果您想報告錯誤，或想提出建議，請傳送電子郵件給我們<br />help@w3schools.com</p> </div> <div style="overflow:hidden;"> <div class="footerlinks_2"> <h5 style="font-family: 'Source Sans Pro', sans-serif;">熱門教程</h5> <a href="/html/default.asp" class="ga-bottom">HTML 教程</a><br /> <a href="/css/default.asp" class="ga-bottom">CSS 教程</a><br /> <a href="/js/default.asp" class="ga-bottom">JavaScript 教程</a><br /> <a href="/howto/default.asp" class="ga-bottom">操作方法教程</a><br /> <a href="/sql/default.asp" class="ga-bottom">SQL 教程</a><br /> <a href="/python/default.asp" class="ga-bottom">Python 教程</a><br /> <a href="/w3css/default.asp" class="ga-bottom">W3.CSS 教程</a><br /> <a href="/bootstrap/bootstrap_ver.asp" class="ga-bottom">Bootstrap 教程</a><br /> <a href="/php/default.asp" class="ga-bottom">PHP 教程</a><br /> <a href="/java/default.asp" class="ga-bottom">Java 教程</a><br /> <a href="/cpp/default.asp" class="ga-bottom">C++ 教程</a><br /> <a href="/jquery/default.asp" class="ga-bottom">jQuery 教程</a><br /> </div> <div class="footerlinks_2"> <h5 style="font-family: 'Source Sans Pro', sans-serif;">熱門參考</h5> <a href="/tags/default.asp" class="ga-bottom">HTML 參考</a><br /> <a href="/cssref/index.php" class="ga-bottom">CSS 參考</a><br /> <a href="/jsref/default.asp" class="ga-bottom">JavaScript 參考</a><br /> <a href="/sql/sql_ref_keywords.asp" class="ga-bottom">SQL 參考</a><br /> <a href="/python/python_reference.asp" class="ga-bottom">Python 參考</a><br /> <a href="/w3css/w3css_references.asp" class="ga-bottom">W3.CSS 參考</a><br /> <a href="/bootstrap/bootstrap_ref_all_classes.asp" class="ga-bottom">Bootstrap 參考</a><br /> <a href="/php/php_ref_overview.asp" class="ga-bottom">PHP 參考</a><br /> <a href="/colors/colors_names.asp" class="ga-bottom">HTML 顏色</a><br /> <a href="/java/java_ref_keywords.asp" class="ga-bottom">Java 參考</a><br /> <a href="/angular/angular_ref_directives.asp" class="ga-bottom">Angular 參考</a><br /> <a href="/jquery/jquery_ref_overview.asp" class="ga-bottom">jQuery 參考</a><br /> </div> <div class="footerlinks_2"> <h5 style="font-family: 'Source Sans Pro', sans-serif;">熱門示例</h5> <a href="/html/html_examples.asp" class="ga-bottom">HTML 示例</a><br /> <a href="/css/css_examples.asp" class="ga-bottom">CSS 示例</a><br /> <a href="/js/js_examples.asp" class="ga-bottom">JavaScript 示例</a><br /> <a href="/howto/default.asp" class="ga-bottom">操作方法示例</a><br /> <a href="/sql/sql_examples.asp" class="ga-bottom">SQL 示例</a><br /> <a href="/python/python_examples.asp" class="ga-bottom">Python 示例</a><br /> <a href="/w3css/w3css_examples.asp" class="ga-bottom">W3.CSS 示例</a><br /> <a href="/bootstrap/bootstrap_examples.asp" class="ga-bottom">Bootstrap 示例</a><br /> <a href="/php/php_examples.asp" class="ga-bottom">PHP 示例</a><br /> <a href="/java/java_examples.asp" class="ga-bottom">Java 示例</a><br /> <a href="/xml/xml_examples.asp" class="ga-bottom">XML 示例</a><br /> <a href="/jquery/jquery_examples.asp" class="ga-bottom">jQuery 示例</a><br /> </div> <div class="footerlinks_2"> <a href="https://campus.w3schools.com/collections/course-catalog" target="_blank" class="ga-bottom"><h5 style="font-family: 'Source Sans Pro', sans-serif;">獲取證書</h5></a> <a href="https://campus.w3schools.com/collections/certifications/products/html-certificate" target="_blank" class="ga-bottom">HTML 證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/css-certificate" target="_blank" class="ga-bottom">CSS 證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/javascript-certificate" target="_blank" class="ga-bottom">JavaScript 證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/front-end-certificate" target="_blank" class="ga-bottom">前端證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/sql-certificate" target="_blank" class="ga-bottom">SQL 證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/python-certificate" target="_blank" class="ga-bottom">Python 證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/php-certificate" target="_blank" class="ga-bottom">PHP 證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/jquery-certificate" target="_blank" class="ga-bottom">jQuery 證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/java-certificate" target="_blank" class="ga-bottom">Java 證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/c-certificate" target="_blank" class="ga-bottom">C++ 證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/c-certificate-1" target="_blank" class="ga-bottom">C# 證書</a><br /> <a href="https://campus.w3schools.com/collections/certifications/products/xml-certificate" target="_blank" class="ga-bottom">XML 證書</a><br /> </div> </div> <div class="footersome"> <a target="_blank" href="https://www.youtube.com/@w3schools" title="W3Schools on YouTube"><i class="fa fa-youtube"></i></a> <a target="_blank" href="https://www.linkedin.com/company/w3schools.com/" title="W3Schools on LinkedIn"><i class="fa"></i></a> <a target="_blank" href="https://discord.com/invite/w3schools" title="加入 W3schools Discord 社群"><i class="fa"></i></a> <a target="_blank" href="https://#/w3schoolscom/" title="W3Schools on Facebook"><i class="fa"></i></a> <a target="_blank" href="https://www.instagram.com/w3schools.com_official/" title="W3Schools on Instagram"><i class="fa"></i></a><div class="w3-hide-large" style="margin-top:16px"></div> <a target="_blank" href="/forum/default.asp" title="論壇" class="textlink">論壇</a> <a target="_blank" href="/about/default.asp" title="關於 W3Schools" class="textlink">關於</a> <a target="_blank" href="/academy/index.php" title="聯絡我們瞭解 W3Schools 學院，適用於教育機構和組織" class="textlink">學院</a></div> <div class="footertext">W3Schools 經過最佳化，旨在方便學習和培訓。示例可能經過簡化，以提高閱讀和學習體驗。<br class="footer-hide-special" />教程、參考資料和示例會不斷審查，以避免錯誤，但我們無法保證所有內容的完全正確性。<br class="footer-hide-special" />使用 W3Schools 即表示您已閱讀並接受我們的<a href="/about/about_copyright.asp" class="ga-bottom">使用條款</a>、<a href="/about/about_privacy.asp" class="ga-bottom">Cookie 和隱私政策</a>。<br /><br /> <a href="/about/about_copyright.asp" class="ga-bottom">版權所有 1999-2024</a> Refsnes Data。保留所有權利。<a href="//w3schools.tw/w3css/default.asp" class="ga-bottom">W3Schools 由 W3.CSS 提供支援</a>。<br /><br /> </div> </div> </div> </div> <script src="/lib/topnav/main.js?v=1.0.32"></script> <script src="/lib/w3schools_footer.js?update=20240910"></script> <script src="/lib/w3schools_features.js?update=20240927"></script> <script> MyLearning.loadUser('footer', function () { // if (!UserSession.loggedIn) { // addMyLearnButt(); // } }); function docReady(fn) { document.addEventListener("DOMContentLoaded", fn); if (document.readyState === "interactive" || document.readyState === "complete" ) { fn(); } } uic_r_z(); uic_r_d() const upperfeatureshowcaselink = document.getElementById("upperfeatureshowcaselink"); if (upperfeatureshowcaselink) { displayInternalFeatures(); } /* function addMyLearnButt() { let nav = document.getElementsByClassName("nextprev"); if (document.body.contains(nav[1])) { if ((nav[1].firstElementChild.innerHTML.indexOf("Previous") || nav[1].firstElementChild.innerHTML.indexOf("Home") !== -1) && (nav[1].firstElementChild.nextElementSibling.innerHTML.indexOf("Next") !== -1)) { let myLearnButt = document.createElement("a"); myLearnButt.innerHTML="Log in to track progress"; myLearnButt.classList.add("w3-btn", "w3-hide-small", "myl-nav-butt"); myLearnButt.href="https://w3schools.tw/signup/?utm_source=classic&utm_medium=" + subjectFolder + "_tutorial&utm_campaign=button_lower_navigation"; myLearnButt.setAttribute("title", "Sign Up and improve Your Learning Experience"); myLearnButt.setAttribute("target", "_blank"); nav[1].classList.add("w3-center"); nav[1].firstElementChild.insertAdjacentElement("afterend", myLearnButt); } } } */ </script>  </body></html>

免費教程

參考手冊

建立網站

練習

測驗

獲得認證

Pathfinder & 我的學習

升級

從何開始

程式碼編輯器（嘗試一下）

影片

模板

網站託管

建立伺服器

操作方法

CSS 框架

瀏覽器統計

打字速度

AWS 培訓

顏色選擇器

程式碼遊戲

設定目標

致教師

致企業

聯絡我們

PHP 教程

PHP 表單

PHP 高階

PHP OOP

MySQL 資料庫

PHP XML

PHP - AJAX

PHP 示例

PHP 參考手冊

PHP 示例 - AJAX 即時搜尋

AJAX 即時搜尋

示例說明 - HTML 頁面

PHP 檔案