php+jquery ajax邮箱地址无刷新验证实例
要实现无刷新页面我们一般会用到ajax来实现,以前是使用最原始的js ajax验证现在常用的jquery ajax了只要简单的一句post即可解决了,下面我们看实例.
index.php页面,代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns=http://www.111cn.net>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>php jquery check username ajax检查帐号唯一性</title>
- <link href="../style.css" rel="stylesheet" type="text/css" />
-
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
- <script>
- $(document).ready(function(){
- $('#username').keyup(username_check);
- });
-
- function username_check(){
- var username = $('#username').val();
- if(username == "" || username.length < 4){
- $('#username').css('border', '3px #CCC solid');
- $('#tick').hide();
- }else{
-
- jQuery.ajax({
- type: "POST",
- url: "check.php",
- data: 'username='+ username,
- cache: false,
- success: function(response){
- if(response == 1){
- //不可以注册
- $('#username').css('border', '3px #C33 solid');
- $('#tick').hide();
- $('#cross').fadeIn();
- }else{
- $('#username').css('border', '3px #090 solid');
- $('#cross').hide();
- $('#tick').fadeIn();
- }
-
- }
- });
- }
-
-
-
- }
-
- </script>
-
- <style>
- #username{
- padding:3px;
- font-size:18px;
- border:3px #CCC solid;
- }
-
- #tick{display:none}
- #cross{display:none}
-
-
- </style>
- </head>
-
- <body>
-
- Username: <input name="username" id="username" type="text" />
- <img id="tick" src="tick.png" width="16" height="16"/>
- <img id="cross" src="cross.png" width="16" height="16"/>
-
- </body>
- </html>
php验证页面,此页面接收到jquery ajax post过来的数据进行验证并返回值,代码如下:
- <?php
-
- # FileName="Connection_php_mysql.htm"
- # Type="MYSQL"
- # HTTP="true"
- $hostname_lr = "localhost";
- $database_lr = "ordersiliconebracelets";
- $username_lr = "root";
- $password_lr = "";
- $lr = mysql_pconnect($hostname_lr, $username_lr, $password_lr) or trigger_error(mysql_error(),E_USER_ERROR);
- mysql_query("set names utf8;");
-
-
