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

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

WBOY

リリース： 2016-05-16 15:26:55

オリジナル

1354 人が閲覧しました

この記事の例では、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程式設計有所幫助。