jqueryの詳細説明登録リアルタイム検証のajax実装 example

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryの詳細説明登録リアルタイム検証のajax実装 example_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:26 PM

ajax jquery リアルタイム検証登録する

この記事の例では、jquery ajax を使用したリアルタイム登録検証の実装について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

ユーザーを登録すると、ユーザーの情報が利用可能かどうかをリアルタイムで確認されます。これは、この実装を昔見たことがあります。O(∩) _∩) ああ！

まず、ajax で $.get を紹介します。$.post の使い方は $.get と似ているので、これ以上は紹介しません。

これは、複雑な $.ajax を置き換える単純な GET リクエスト関数です。コールバック関数は、リクエストが成功したときに呼び出すことができます。エラー時に関数を実行する必要がある場合は、$.ajax を使用します。

コードをコピーコードは次のとおりです。

$(selector).get(url,data,success(response,ステータス,xhr ),dataType)

參數	描述
url	必需。規定將請求發送的哪個 URL。
data	可選。規定連同請求發送到伺服器的資料。
success(response,status,xhr)	可選。規定當請求成功時運行的函數。額外的參數： response - 包含來自請求的結果資料 status - 包含請求的狀態 xhr - 包含 XMLHttpRequest 物件
dataType	可選。規定預計的伺服器回應的資料類型。預設地，jQuery 將智慧判斷。可能的類型： "xml" "html" "text" "script" "json" "jsonp"

請求 test.php 網頁，忽略回傳值：

複製程式碼程式碼如下:

$.get("test.php");

更多範例：

例 1

請求 test.php 網頁，傳送2個參數，忽略回傳值：

複製程式碼程式碼如下:

$.get("test.php", { name: "John ", time: "2pm" } );

例 2

顯示 test.php 回傳值(HTML 或 XML，取決於傳回值)：

$.get("test.php", function(data){
 alert("Data Loaded: " + data);
});

ログイン後にコピー

例 3

顯示 test.cgi 回傳值(HTML 或 XML，取決於傳回值)，新增一組請求參數：

$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
  alert("Data Loaded: " + data);
});

ログイン後にコピー

下面貼上我的程式碼：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
<script type="text/javascript" src="jquery/jquery-1.5.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").focus();
$("#username").keyup(function()
{
  name= $("#username").val();//val()方法返回或设置被选元素的值。
  if(len(name)< 4)//调用下面的自定义len函数
  $("#username1").html("<font color=red>注册名称必须大于等于2位</font>");
  else
  $("#username1").html("<font color=red>符合要求</font>");//html() 方法返回或设置被选元素的内容 (inner HTML)。
});
$("#username").blur(function(){
name= $("#username").val();
$.get("t1.php", { username:name } ,function(data){//判断数据库中是否存在此用户名 重点$.get,$.post t1.php在下面
  if(data==1) {$("#username1").html("<font color=green>符合要求</font>");}
  else {$("#username1").html("<font color=green>已被占用</font>");}
});
});
});
function len(s) {//若为汉字之类的字符则占两个
var l = 0;
var a = s.split("");
for (var i=0;i<a.length;i++) {
 if (a[i].charCodeAt(0)<299) {
 l++;
 } else {
 l+=2;
 }
}
return l;
}
</script>
</head>
<body>
<form name="fram" action="register.php" onsubmit="return docheck();">
<table width="330" border="0" align="center" cellpadding="5" bgcolor="#eeeeee">
<tr>
  <td>用户名：</td>
  <td><input name="username" type="text" id="username" /></td><td><div id="username1"></div></td>
</tr>
</table>
</form>
</body>
</html>

ログイン後にコピー

t1.php：

<&#63;php 
$link=mysql_connect("localhost","root","");
mysql_select_db("test");
mysql_query("set names utf8");//
$sql="select * from user where user='".$_GET['username']."'";//
  $result=mysql_query($sql) or die(mysql_error());
$num=mysql_affected_rows();
if($num==0)
$msg=1;
else
  $msg=0;
echo $msg;//返回值
mysql_close($link);
&#63;>

ログイン後にコピー

希望本文所述對大家jQuery程式設計有所幫助。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7405

Java チュートリアル

1630

CakePHP チュートリアル

1358

Laravel チュートリアル

1268

PHP チュートリアル

1218

Related knowledge

小紅書に複数のアカウントを登録するにはどうすればよいですか?複数のアカウントを登録するとバレてしまうのでしょうか？ Mar 25, 2024 am 09:41 AM

ソーシャルネットワーキングと電子商取引を統合したプラットフォームとして、Xiaohongshu にはますます多くのユーザーが参加しています。ユーザーの中には、Xiaohongshu とのやり取りをより良くするために複数のアカウントを登録したいと考えている人もいます。では、小紅書に複数のアカウントを登録するにはどうすればよいでしょうか? 1.小紅書に複数のアカウントを登録するにはどうすればよいですか? 1. 別の携帯電話番号を使用して登録する現在、Xiaohongshu は主に携帯電話番号を使用してアカウントを登録します。ユーザーは複数の携帯電話番号カードを購入し、それを使用して複数の小紅書アカウントを登録しようとすることがあります。ただし、複数の携帯電話番号カードを購入するのは面倒でコストがかかるため、このアプローチにはいくつかの制限があります。 2. 電子メールを使用して登録する携帯電話番号に加えて、電子メールを使用して小紅書アカウントを登録することもできます。ユーザーは複数のメールアドレスを用意し、それらのメールアドレスを使用してアカウントを登録できます。しかし

小紅書アカウントを登録するにはどうすればよいですか?小紅書アカウントを登録するには何が必要ですか? Mar 22, 2024 am 10:16 AM

小紅書は、生活、エンターテイメント、ショッピング、共有を統合したソーシャルプラットフォームであり、多くの若者の日常生活に欠かせないものとなっています。では、Xiaohongshu アカウントを登録するにはどうすればよいでしょうか? 1.小紅書アカウントを登録するにはどうすればよいですか? 1. 小紅書公式ウェブサイトを開くか、小紅書アプリをダウンロードします。下の「登録」ボタンをクリックすると、さまざまな登録方法を選択できます。現在、Xiaohongshu は、携帯電話番号、電子メールアドレス、サードパーティアカウント (WeChat、QQ、Weibo など) による登録をサポートしています。 3. 関連情報を入力します。選択した登録方法に応じて、対応する携帯電話番号、電子メールアドレス、またはサードパーティのアカウント情報を入力します。 4. パスワードを設定します。アカウントを安全に保つために強力なパスワードを設定してください。 5. 検証を完了します。プロンプトに従って、携帯電話認証または電子メール認証を完了します。 6. 個人を完璧にする

小紅書アカウントを登録するにはどうすればよいですか?アカウントが異常な場合はどうやって回復しますか? Mar 21, 2024 pm 04:57 PM

Xiaohongshu は、世界で最も人気のあるライフスタイル共有プラットフォームの 1 つとして、多くのユーザーを魅了しています。では、Xiaohongshu アカウントを登録するにはどうすればよいでしょうか?この記事では、Xiaohongshuアカウントの登録プロセスを詳しく紹介し、Xiaohongshuアカウントの異常を回復する方法の質問に答えます。 1.小紅書アカウントを登録するにはどうすればよいですか? 1. 小紅書 APP をダウンロードします。モバイルアプリストアで小紅書 APP を検索してダウンロードし、インストールが完了したら開きます。 2. アカウントの登録：Xiaohongshu APPを開いた後、ホームページの右下隅にある「Me」ボタンをクリックし、「登録」を選択します。 3. 登録情報を入力します。画面の指示に従って、携帯電話番号、設定パスワード、確認コード、その他の登録情報を入力します。 4. 個人情報の入力: 登録が成功したら、プロンプトに従って名前、性別、誕生日などの個人情報を入力します。 5. 設定

qooappアカウントの登録方法 Mar 19, 2024 pm 08:58 PM

qooapp は多くのゲームをダウンロードできるソフトウェアですが、アカウントを登録するにはどうすればよいですか? ユーザーがまだパスを持っていない場合は、「登録」ボタンをクリックし、登録方法を選択する必要があります。操作方法はこのアカウント登録方法の紹介だけで十分ですが、以下で詳しく紹介しますので、ぜひご覧ください。 qooapp アカウントの登録方法? 回答: クリックして登録し、登録方法を選択してください. 具体的な方法: 1. ログインインターフェースに入った後、以下をクリックしてください. まだパスをお持ちでない場合は、今すぐお申し込みください。 2. 次に、必要なログイン方法を選択します。 3. その後すぐに使用できます。公式 Web サイトの登録: 1. Web サイト https://apps.ppaooq.com/ を開き、右上隅をクリックして登録します。 2. 登録を選択

1つの携帯電話番号に2つのBサイト番号を登録するにはどうすればよいですか?ステーション B はどのようにして携帯電話のバインドを解除するのでしょうか? Mar 21, 2024 pm 10:10 PM

Bilibili（ビリビリ）は中国の若者に大人気の動画共有サイトとして多くのユーザーを集めています。ユーザーの中には、2 つの Bilibili アカウントを持ち、別々に管理および使用できるようにしたいと考えている人もいます。では、1 つの携帯電話番号に 2 つの B サイト番号を登録するにはどうすればよいでしょうか?この記事では、この問題と携帯電話のバインドを解除する方法に焦点を当てます。 1. 1 つの携帯電話番号に 2 つの B サイト番号を登録するにはどうすればよいですか? 1. 新しいアカウントを登録する: まず、携帯電話で Bilibili アプリを開くか、公式 Web サイトにログインし、「登録」ボタンをクリックして、登録方法を選択します。パーティーアカウント (WeChat、QQ など) を登録します。 2. アカウントを登録する際は、システムの指示に従って、携帯電話番号、認証コード、設定パスワードなどの必要情報を入力してください。必ず別のアカウントを使用してください

ビデオナンバーマトリックスのアカウントを登録するにはどうすればよいですか?自分のビデオアカウントを作成するにはどうすればよいですか? Mar 22, 2024 am 10:42 AM

WeChat ビデオアカウントの開始により、ますます多くの人が新たなトラフィックの機会を得るようになったため、ビデオアカウントマトリックスアカウントの登録が多くのクリエイターやマーチャントの焦点となっています。では、ビデオナンバーマトリックスのアカウントを登録するにはどうすればよいでしょうか?自分のビデオアカウントを作成するにはどうすればよいですか?この記事では、これら 2 つの質問に詳しく答えます。 1. ビデオナンバーマトリックスのアカウントを登録するにはどうすればよいですか? 1. WeChat アカウント: まず、WeChat アカウントを持っている必要があります。そうでない場合は、まず登録してください。 2. ビデオアカウントを開く: WeChat APP で、[Discover] ページを見つけて、[Video Account] をクリックしてビデオアカウントページに入ります。 3. クリエイターセンター: 動画アカウントページの下部にある [クリエイターセンター] ボタンをクリックしてクリエイターセンターに入ります。 4. ビデオアカウントを登録します。クリエイターセンターページで、[ビデオアカウントを登録] オプションを見つけます。

WeChat登録からどれくらいの時間が経過したかを確認するにはどうすればよいですか? WeChatへの登録期間を確認する方法 Mar 13, 2024 am 08:52 AM

WeChatは豊富な機能と多くのユーザーを備えた人気のソーシャルソフトウェアです。 WeChat への登録期間を確認したい場合、WeChat 自体には登録時間を確認する機能が直接提供されていませんが、いくつかの間接的な方法で推測することができます。ただし、さまざまな要因が結果の精度に影響を与える可能性があるため、これらの方法は完全に正確というわけではありません。登録時間について正確な要件がある場合は、WeChat カスタマーサービスに問い合わせて相談することをお勧めします。 WeChat登録からどれくらいの時間が経過したかを確認するにはどうすればよいですか? WeChat にどれだけ登録されているかを確認する最初の方法は、QQ メールボックスをチェックすることです。 QQ を使用して WeChat にログインする場合、登録が成功すると、QQ メールボックスに WeChat からようこそメールが届きます。 QQ メールボックスで「WeChat」を検索してそのようなメールがあるかどうかを確認し、登録時間を決定します。 2 番目の方法は、次のように見ることです。

Outlookアプリケーション登録におけるOutlook登録特有の操作の申請方法 Mar 04, 2024 pm 09:58 PM

皆さん、Outlook というソフトをよく使うと思いますが、Outlook の登録申請の方法をご存知ですか? Outlook アプリケーションの登録の具体的な操作方法は、以下のエディターで説明しますので、見てみましょう。 1. Microsoft 中国の Web サイトを開きます (cn.msn.com も使用できます。Baidu で msn を検索して、以下のように開きます。 2. Bing 検索の横にある「メールボックス」オプションをクリックします。表示される「Outlook メールボックス」をクリックします) 3. Outlook メールボックスのログインウィンドウで、Outlook メールボックスをお持ちでない場合は、[今すぐ登録] をクリックし、 4. 表示されるアカウント作成ウィザードで、適切なユーザーアカウント情報を入力します。以下に示すように

See all articles

jqueryの詳細説明登録リアルタイム検証のajax実装 example_jquery

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

jqueryの詳細説明 登録リアルタイム検証のajax実装 example_jquery

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

jqueryの詳細説明登録リアルタイム検証のajax実装 example_jquery