AJAX實現無刷新檢測用戶名_AJAX相關-js教程-PHP中文網

首頁

web前端

js教程

AJAX實現無刷新檢測用戶名_AJAX相關

微波

Jun 28, 2017 pm 01:54 PM

ajax 偵測

這篇文章主要為大家詳細介紹了AJAX實現無刷新用戶名檢測功能，具有一定的參考價值，有興趣的小伙伴們可以參考一下

#先來看看原理圖

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>ajax无刷新检测</title>
  <style type="text/css">
   body{margin:0;padding:0;}.content{width:800px;margin:0 auto;}ul,li{list-style: none;margin:0;padding:0;}
   tr{width:200px;}td{width:80px;padding:5px 0;}td input,textarea{border: 1px solid #79ABFE;} 
  </style>
 </head>
 <body>
  <p class="content">
   <script>
    myXmlHttpRequest.ContentType=("text/xml;charset=UTF-8");
    //创建ajax引擎(1号线)
    function getXmlHttpObject(){   
     var xmlHttpRequest;
     //不同浏览器获取对象xmlHttpRequest方法不一样
     if(window.ActiveXObject){
      xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
     }else{
      xmlHttpRequest=new XMLHttpRequest();
     }
     return xmlHttpRequest;
    }
    //验证用户名是否存在
    var myXmlHttpRequest="";//因为chuli也用到了,所以要定义为全局变量 
    //创建方法(2号线 http请求)
    function checkName(){
     //创建对象 
     myXmlHttpRequest=getXmlHttpObject();
     //判断是否创建ok
     if(myXmlHttpRequest){
      //通过myXmlHttpRequest对象发送请求到服务器的某个页面 
      var url="./registerPro1.php";
      //要发送的数据
      var data="username="+$(&#39;username&#39;).value;
      //打开请求
      myXmlHttpRequest.open("post",url,true);//ture表示使用异步机制
      //POST方法
      myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //指定回调函数,chuli是函数名(registerPro里的数据返回给chuli函数)
      myXmlHttpRequest.onreadystatechange=chuli;
      //开始发送数据,如果是get请求则填入null即可,如果是post请求则填入实际的数据
      myXmlHttpRequest.send(data);
     }
    }
    //回调函数(4号线)
    function chuli(){
     //取出从registerPro.php页面返回的数据(4表示完成,200表示成功)
     if(myXmlHttpRequest.readyState==4){
      if(myXmlHttpRequest.status==200){
      //①、取出值,根据返回信息的格式定 text(html)
      //$(&#39;result&#39;).value=myXmlHttpRequest.responseText;
      //②、取出xml格式数据(解析)
      //获取mes节点、这里的mes返回的是节点列表(不知道有几个mes)
      //var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");
      //取出mes节点值
      //mes[0]->表示取出第一个mes节点
      //mes[0].childNodes[0]->表示取出mes节点的第一个子节点
      //var mes_val=mes[0].childNodes[0].nodeValue;
      //$("result").value=mes_val; 
      //③、json格式
      //var mes=myXmlHttpRequest.responseText;
      //使用eval函数,将mes字串转为对象
      //var mes_obj=eval("("+mes+")");
      //$(&#39;result&#39;).value=mes_obj.res;
      //③+、json格式扩展
      var mes=myXmlHttpRequest.responseText;
      var mes_obj=eval("("+mes+")");
      $(&#39;result&#39;).value=mes_obj[0].res;
      }
     }
    }  
    //封装一个函数,通过id号获取对象
    function $(id){
     return document.getElementById(id);
    } 
   </script>
   <br/>
   <strong style="color:red">发表留言</strong>
   <form action="#" method="POST" name="frm">
   <table cellpadding="0" cellspacing="0" >
    <tr>
     <td >留言标题:</td>
     <td><input type="text" name="title" autocomplete="off"/></td>
    </tr>
    <tr>
     <td>网名:</td>
     <td>
      <input id="username" onkeyup="checkName();" type="text" name="username" autocomplete="off"/>
      <td><input id="result" type="text" style="width:110px;font-size: 12px;border-width:0;" ></td> 
     </td>
    </tr>
    <tr>
     <td>留言内容:</td>
     <td><textarea name="content" cols="26" rows="5" autocomplete="off"/ onclick="showNotice(this)"></textarea></td>
    </tr>
    <tr>
     <td></td>
     <td><input class="btn" type="submit" name="submit" value="提交"/></td>
    </tr>
   </table>
   </form>
  </p> 
 </body>
</html>

登入後複製

registerPro1.php

<?php
 //将数据(text格式,xml格式,json格式)返回到ajax引擎(3号线 http响应 )
 
 //header("Content-Type: text/xml; charset=utf-8"); //告诉浏览器,返回的是xml格式
 header("Content-Type: text/html; charset=utf-8"); //告诉浏览器,返回的是text/json格式
 $username = $_POST["username"];
 //①
// if($username=="abc"){
//  echo &#39;网名不可用&#39;;
// }else{
//  echo &#39;网名可用&#39;;
// }
 //②
// $info="";
// if($username=="abc"){
//  $info.="<res><mes>网名不可用</mes></res>";
// }else{
//  $info.="<res><mes>网名可用</mes></res>";
// }
// echo $info;
 //③
// $info="";
// if($username=="abc"){
//  //这里的$info返回的是一个字串
//  $info.=&#39;{"res":"不可用","id":"123","age":"5"}&#39;;
// }else{
//  $info.=&#39;{"res":"可用","id":"3","age":"1"}&#39;;
// }
// echo $info;
 //③+
 $info="";
 if($username=="abc"){
  //这里的$info返回的是一个字串
  $info.=&#39;[{"res":"不可用","id":"123","age":"5"},{"res":"abc不可用","id":"3","age":"0"}]&#39;;
 }else{
  $info.=&#39;[{"res":"可用","id":"1","age":"15"},{"res":"可用","id":"83","age":"9"}]&#39;;
 }
 echo $info;
?>

登入後複製

效果圖：

############################################################################################################。

以上是AJAX實現無刷新檢測用戶名_AJAX相關的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM

標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資

MIT最新力作：以GPT-3.5解決時間序列異常檢測問題 Jun 08, 2024 pm 06:09 PM

今天要為大家介紹一篇MIT上週發表的文章，使用GPT-3.5-turbo解決時間序列異常檢測問題，初步驗證了LLM在時間序列異常檢測的有效性。整個過程沒有進行finetune，直接使用GPT-3.5-turbo進行異常檢測，文中的核心是如何將時間序列轉換成GPT-3.5-turbo可辨識的輸入，以及如何設計prompt或pipeline讓LLM解決異常檢測任務。下面跟大家詳細介紹一下這篇工作。圖片論文標題：Largelanguagemodelscanbezero-shotanomalydete

解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤

改進的檢測演算法：用於高解析度光學遙感影像目標檢測 Jun 06, 2024 pm 12:33 PM

01前景概要目前，難以在檢測效率和檢測結果之間取得適當的平衡。我們研究了一種用於高解析度光學遙感影像中目標偵測的增強YOLOv5演算法，利用多層特徵金字塔、多重偵測頭策略和混合注意力模組來提高光學遙感影像的目標偵測網路的效果。根據SIMD資料集，新演算法的mAP比YOLOv5好2.2%，比YOLOX好8.48%，在偵測結果和速度之間達到了更好的平衡。 02背景&動機隨著遠感技術的快速發展，高解析度光學遠感影像已被用於描述地球表面的許多物體，包括飛機、汽車、建築物等。目標檢測在遠感影像的解釋中

如何使用Ajax從PHP方法取得變數？ Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：

如何解決jQuery AJAX報錯403的問題？ Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使

PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

即時加SOTA一飛沖天！ FastOcc：推理更快、部署友善Occ演算法來啦！ Mar 14, 2024 pm 11:50 PM

寫在前面&筆者的個人理解在自動駕駛系統當中，感知任務是整個自駕系統中至關重要的組成部分。感知任務的主要目標是使自動駕駛車輛能夠理解和感知周圍的環境元素，如行駛在路上的車輛、路旁的行人、行駛過程中遇到的障礙物、路上的交通標誌等，從而幫助下游模組做出正確合理的決策和行為。在一輛具備自動駕駛功能的車輛中，通常會配備不同類型的信息採集感測器，如環視相機感測器、雷射雷達感測器以及毫米波雷達感測器等等，從而確保自動駕駛車輛能夠準確感知和理解周圍環境要素，使自動駕駛車輛在自主行駛的過程中能夠做出正確的決斷。目

See all articles

AJAX實現無刷新檢測用戶名_AJAX相關

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題