ajax的简单应用
今天用ajax写了个登陆注册，感觉很是牛逼啊，也不知道哪位牛人写出来的ajax。真的厉害！
先说一下注册，基本的思路是：获取用户名、密码，传到PHP程序页面，PHP里面将这两个数据插到自己想要插入的表里面。
这就用到了之前说的插入：insert into user (username,password) values('$username','$password');
用ajax的重点就是———数组。
你只需要在PHP页面创建一个数组，然后打印成json格式的，利用ajax就可以在HTML页面中获取到。
比如：你在PHP页面有一个$arr['sell']=1;
然后打印成json形式 echo json_encode($err);
这时你在HTML 页面中就可以取到 data.sell 。也就是1。
$.ajax({
type:"post",
url:"php页面的路径",
async:true,
dataType:'json',
success:function(data){
console.log('data.sell');
}
});
重点就是数组，然后将数组打印成json格式。。
我就直接贴代码了。这是HTML。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <title>注册</title> 7 <link rel="stylesheet" type="text/css" href="../css/style.css"/> 8 <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 9 <script src="../js/layer_mobile/layer.js" type="text/javascript" charset="utf-8"></script> 10 <link rel="stylesheet" type="text/css" href="../css/iconfont.css"/> 11 </head> 12 <body> 13 14 <div class="login"> 15 <h3 class="cor_lanse">注册</h4> 16 <input type="text" name="username" id="" value="" placeholder="用户名" class="username"/> 17 <span class="icon iconfont icon-dui cor_hongse bz_font dui"></span><span class="cuo icon iconfont icon-2 cor_hongse bz_font"></span> 18 <input type="password" name="password" id="" value="" placeholder="密码" class="userpass"/> 19 <span class="icon iconfont icon-dui cor_hongse bz_font dui1"></span><span class="cuo1 icon iconfont icon-2 cor_hongse bz_font"></span> 20 <input type="password" name="" id="" value="" placeholder="密码" class="qrpass"/> 21 <span class="icon iconfont icon-dui cor_hongse bz_font dui2"></span><span class="cuo2 icon iconfont icon-2 cor_hongse bz_font"></span> 22 <div class="martop"> 23 <a href="../login.php" class="fl lueda_font">去登录-></a> 24 </div> 25 <input type="submit" value="完成" class="bg_lanse cor_whi btn"/> 26 </div> 27 28 <script type="text/javascript"> 29 $('.userpass').blur(function(){ 30 if($(".userpass").val() == "") { 31 $('.cuo1').show(); 32 return false; 33 } 34 if($(".userpass").val().length<6) { 35 $('.cuo1').show(); 36 $('.dui1').hide(); 37 return false; 38 }else{ 39 $('.cuo1').hide(); 40 $('.dui1').show(); 41 } 42 }) 43 44 $('.qrpass').blur(function(){ 45 if($(".userpass").val() !=$(".qrpass").val()) { 46 $('.cuo2').show(); 47 $('.dui2').hide(); 48 return false; 49 }else{ 50 $('.cuo2').hide(); 51 $('.dui2').show(); 52 } 53 }) 54 55 $(".btn").click(function(){ 56 var user = $('.username').val(); 57 var pass = $('.userpass').val(); 58 59 60 if($(".username").val() == "") { 61 layer.open({ 62 content: '用户名不能为空' 63 ,skin: 'msg' 64 ,time: 2 //2秒后自动关闭 65 }); 66 return false; 67 } 68 if(!$(".username").val().match(/^[0-9a-zA-Z]*$/g)){ 69 layer.open({ 70 content: '用户名只能为字母或数字' 71 ,skin: 'msg' 72 ,time: 2 //2秒后自动关闭 73 }); 74 return false; 75 } 76 if($(".userpass").val() == "") { 77 layer.open({ 78 content: '密码不能为空' 79 ,skin: 'msg' 80 ,time: 2 //2秒后自动关闭 81 }); 82 return false; 83 } 84 if($(".userpass").val().length<6) { 85 layer.open({ 86 content: '密码不能少于6位' 87 ,skin: 'msg' 88 ,time: 2 //2秒后自动关闭 89 }); 90 return false; 91 } 92 if($(".userpass").val() !=$(".qrpass").val()) { 93 layer.open({ 94 content: '两次密码输入不一致' 95 ,skin: 'msg' 96 ,time: 2 //2秒后自动关闭 97 }); 98 return false; 99 } 100 101 102 $.ajax({ 103 type:"post", 104 url:"admin_php/userzhuce.php", 105 async:true, 106 dataType:'json', 107 data:{'usernames':user,'passwords':pass}, 108 success:function(data){ 109 if(data.dear==1){ 110 layer.open({ 111 content: '注册成功' 112 ,skin: 'msg' 113 ,time: 2 //2秒后自动关闭 114 }); 115 location.href='../login.php'; 116 }else{ 117 layer.open({ 118 content: '网络错误' 119 ,skin: 'msg' 120 ,time: 2 //2秒后自动关闭 121 }); 122 } 123 console.log(data.dear); 124 } 125 }); 126 }); 127 128 $('.username').blur(function(){ 129 if($(".username").val() == "") { 130 $('.cuo').show(); 131 return false; 132 }else{ 133 $('.cuo').hide(); 134 } 135 if(!$(".username").val().match(/^[0-9a-zA-Z]*$/g)){ 136 $('.cuo').show(); 137 $('.dui').hide(); 138 layer.open({ 139 content: '不支持汉字' 140 ,skin: 'msg' 141 ,time: 4 //2秒后自动关闭 142 143 }); 144 return false; 145 }else{ 146 $('.cuo').hide(); 147 $('.dui').show(); 148 } 149 var user = $('.username').val(); 150 $.ajax({ 151 type:"post", 152 url:"admin_php/findname.php", 153 async:true, 154 dataType:'json', 155 data:{'usernames':user}, 156 success:function(data){ 157 if(data.sell==1){ 158 $('.cuo').show(); 159 }else{ 160 $('.cuo').hide(); 161 $('.dui').show(); 162 } 163 } 164 }); 165 }) 166 </script> 167 </body> 168 </html>
userzhuce.php：提交注册信息
<?php require_once 'public.php'; //引入public.php(链接数据库，不想每个页面都写那几句话，麻烦) $username = $_POST['usernames']; $password = $_POST['passwords']; // 在你的数据库表中插入注册信息 $fruit = mysql_query("insert into user (username,password,time,ID) values ('$username','$password','$showtime','0')"); if($fruit>0){ $charu['dear']=1; }else{ $charu['dear']=2; } echo json_encode($charu); mysql_close($con);
findname.php:查找是否有人注册
<?php require_once 'public.php'; //引入public.php(链接数据库，不想每个页面都写那几句话，麻烦) $username = $_POST['usernames']; // 在注册之前先查询一下是否有人注册 $query = mysql_query("select * from user where username = '$username'"); $f_username = mysql_num_rows($query); if($f_username>0){ //如果有人注册。 $err['sell']=1; }else { $err['sell']=2; } echo json_encode($err);
