ホームページ > 記事 > ウェブフロントエンド > AJAX を一から学び、自動検証フォームを作成する
この記事では、自動検証フォームを作成するための AJAX のゼロベース学習を主に紹介します。必要な友人はそれを参照してください。
従来の Web ページは、登録中にユーザー名が占有されているかどうかを検出します。
ajax の登場により、ユーザーがフォームに入力すると、署名されたフォーム項目がサーバーに送信され、ユーザーが入力した内容に基づいてデータクエリが実行されるため、このエクスペリエンスは大幅に改善されました。ページを更新しなくても、クエリ番号が自動的に入力されます。このようなアプリケーションにより、ユーザー エクスペリエンスが大幅に向上します。このセクションでは、自動確認フォームの作成方法を簡単に紹介します。 ajax の役割を原理的に分析します。
1. フレームワークを構築します
まず、HTML フレームワークを構築します
<form name="register"> <p><label for = "User">输用户名<input type="text" name="User" id="User"></label><span id="UserResult"></span></p> <p><label for = "passwd1">输入密码<input type="password" name="passwd1" id="passwd1"></label></p> <p><label for = "passwd2">重复输入<input type="password" name="passwd2" id="passwd2"></label></p> <p><input type="submit" value="注册"></p> <p><input type="reset" value="重置"></p> </form>
2. 非同期リクエストを確立します
ユーザーが「ユーザー名」の入力を完了し、他のフォームの入力を開始したら、バックグラウンド検証を実行します。コードは次のとおりです:
ユーザー名を入力dfe166b1d5b692b343e5eac7f90c243d
関数startCheck()で、thisを直接送信します。テキスト ボックスをそれ自体にオブジェクト化するキーワード パラメータとして渡されると、関数自体が最初にユーザーの入力が空かどうかを判断し、空の場合は直接戻り、ユーザー名のテキスト ボックスに焦点を当て、対応するプロンプトを表示します。
function startCheck(oInput){ //判断是否有输入,没有输入则直接返回。 if(!oInput.value){ oInput.focus();//聚焦到用户名文本框 document.getElementById("User").innerHTML="用户名不能为空"; return; } //创建异步请求 //.... }
ユーザーがユーザー名を入力すると、toLowerCase() を使用してそれを小文字に変換し、非同期リクエストを確立します。
showResult() 関数は、サーバー処理によって返された responseText テキストを表示するために使用されます。
<script type="text/javascript"> var xmlHttp; function createXMLHttprequest() { if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); } function startCheck(oInput) { //判断是否有输入,没有输入则直接返回。 if (!oInput.value) { oInput.focus(); //聚焦到用户名文本框 document.getElementById("User").innerHTML = "用户名不能为空"; return; } //创建异步请求 createXMLHttpRequest(); var sUrl = "1-9.aspx?user=" + oInput.value.toLowerCase() + "×tamp=" + new Date().getTime(); xmlHttp.open("GET", sUrl, true); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) showResult(xmlHttp.responseText); //显示服务结果 } xmlHttp.send(null); } </script>
3. サーバー処理
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> <%@ Import Namespace="System.Data" %> <% Response.CacheControl = "no-cache"; Response.AddHeader("Pragma","no-cache"); if(Request["user"]=="isaac") Response.Write("Sorry, " + Request["user"] + " already exists."); else Response.Write(Request["user"]+" is ok."); %>
4. 非同期クエリの結果を表示する
ユーザーがフォームに他の項目を入力すると、非同期の戻り結果がバックグラウンドで静かに完了します。
function showResult(sText) { var oSpan = document.getElementById("UserResult"); oSpan.innerHTML = sText; if (sText.indexOf("already exists") >= 0) //如果用户名已被占用 oSpan.style.color = "red"; else oSpan.style.color = "black"; }
上記のコードは、サーバーから返された結果を表示します。
このケースの完全なコード
上記は、私が皆さんのためにまとめたものであり、将来皆さんのお役に立てれば幸いです。
関連記事:
Ajaxをベースにしたドロップダウンボックス連携表示データを実装
以上がAJAX を一から学び、自動検証フォームを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。