php+jquery ajax邮箱地址无刷新验证实例

要实现无刷新页面我们一般会用到ajax来实现,以前是使用最原始的js ajax验证现在常用的jquery ajax了只要简单的一句post即可解决了,下面我们看实例.

index.php页面,代码如下:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns=http://www.111cn.net> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
5. <title>php jquery check username ajax检查帐号唯一性</title> 
6. <link href="../style.css" rel="stylesheet" type="text/css" /> 
7.  
8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
9. <script> 
10. $(document).ready(function(){ 
11. $('#username').keyup(username_check); 
12. }); 
13.  
14. function username_check(){  
15. var username = $('#username').val(); 
16. if(username == "" || username.length < 4){ 
17. $('#username').css('border', '3px #CCC solid'); 
18. $('#tick').hide(); 
19. }else{ 
20.  
21. jQuery.ajax({ 
22.    type: "POST", 
23.    url: "check.php", 
24.    data: 'username='+ username, 
25.    cache: false, 
26.    success: function(response){ 
27. if(response == 1){ 
28.  //不可以注册 
29.  $('#username').css('border', '3px #C33 solid');  
30.  $('#tick').hide(); 
31.  $('#cross').fadeIn(); 
32.  }else{ 
33.  $('#username').css('border', '3px #090 solid'); 
34.  $('#cross').hide(); 
35.  $('#tick').fadeIn(); 
36.       } 
37.  
38. } 
39. }); 
40. } 
41.  
42.  
43.  
44. } 
45.  
46. </script> 
47.  
48. <style> 
49. #username{ 
50.  padding:3px; 
51.  font-size:18px; 
52.  border:3px #CCC solid; 
53. } 
54.  
55. #tick{display:none} 
56. #cross{display:none} 
57.  
58.  
59. </style> 
60. </head> 
61.  
62. <body> 
63.  
64. Username: <input name="username" id="username" type="text" /> 
65. <img id="tick" src="tick.png" width="16" height="16"/> 
66. <img id="cross" src="cross.png" width="16" height="16"/> 
67.  
68. </body> 
69. </html> 

php验证页面,此页面接收到jquery ajax post过来的数据进行验证并返回值,代码如下:

1. <?php 
2.  
3. # FileName="Connection_php_mysql.htm" 
4. # Type="MYSQL" 
5. # HTTP="true" 
6. $hostname_lr = "localhost"; 
7. $database_lr = "ordersiliconebracelets"; 
8. $username_lr = "root"; 
9. $password_lr = ""; 
10. $lr = mysql_pconnect($hostname_lr, $username_lr, $password_lr) or trigger_error(mysql_error(),E_USER_ERROR);  
11. mysql_query("set names utf8;"); 
12. //if ($lr) {  
13. //echo "非常好,MYSQL连接成功了!";  
14. /