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;" ); //if ($lr) { //echo "非常好,MYSQL连接成功了!"; /查看更多关于php+jquery ajax邮箱地址无刷新验证实例 - 综合实例的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did3805