jquery ajax 登录

  1. $('img').click(function(){  
  2.         $('img').attr('src','php/getVerify.php?'+Math.random());//刷新验证码  
  3.     })  
  4.     $('#login').click(function(){  
  5.         var username=$('#user-name').val();  
  6.         var password=$("#user-password").val();  
  7.         var code=$("#code").val();  
  8.         if(username!=""&&password!=""&&code.length==4){  
  9.             $.ajax({  
  10.                 type:"POST",  
  11.                 url:"php/userLogin.php",  
  12.                 dataType:"JSON",  
  13.                 data:{  
  14.                     "user_name":username,  
  15.                     "password":password,  
  16.                     "code":code  
  17.                 },  
  18.                 success:function(data){  
  19.                     switch(data){  
  20.                         case 1://普通用户  
  21.                             $.cookie("user",username);  
  22.                             $.cookie("limit",0);  
  23.                             window.location.href="index.php";  
  24.                             break;  
  25.                         case 2://管理员用户  
  26.                             $.cookie("user",username);  
  27.                             $.cookie("limit",1);  
  28.                             window.location.href="index.php";  
  29.                             break;  
  30.                         case 3://密码错误  
  31.                             alert("密码错误!");  
  32.                             break;  
  33.                         case 4://用户不存在  
  34.                             alert("该用户不存在!");  
  35.                             break;  
  36.                         case 0://验证码错误  
  37.                             alert("验证码不正确!");  
  38.                             break;  
  39.                     }  
  40.                       
  41.                 }  
  42.             })  
  43.         }else{  
  44.             alert("请检查您的输入!");  
  45.         }  
  46.     })  
  47.     $('#sign').click(function(){  
  48.         var username=$('#user-name').val();  
  49.         var password=$("#user-password").val();  
  50.         var code=$("#code").val();  
  51.         if(username!=""&&password!=""&&code.length==4){  
  52.             $.ajax({  
  53.                 type:"POST",  
  54.                 url:"php/addUser.php",  
  55.                 dataType:"JSON",  
  56.                 data:{  
  57.                     "user_name":username,  
  58.                     "password":password,  
  59.                     "code":code  
  60.                 },  
  61.                 success:function(data){  
  62.                     switch(data){  
  63.                         case 1://用户已存在  
  64.                             alert("该用户已存在!请换一个用户名注册。")  
  65.                             break;  
  66.                         case 2://注册成功  
  67.                             alert("注册成功!");  
  68.                             $.cookie("user",username);  
  69.                             $.cookie("limit",0);  
  70.                             window.location.href="index.php";  
  71.                             break;  
  72.                         case 0://验证码错误  
  73.                             alert("验证码不正确!");  
  74.                             break;  
  75.                     }  
  76.                       
  77.                 }  
  78.             })  
  79.         }else{  
  80.             alert("请检查您的输入!");  
  81.         }  
  82.     }) 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过使用jQueryAJAX功能,我们可以实现登录功能。以下是一个简单的例子: HTML部分: ```html <form id="loginForm"> <input type="text" id="username" name="username" placeholder="用户名"> <input type="password" id="password" name="password" placeholder="密码"> <input type="submit" value="登录"> </form> ``` JavaScript部分: ```javascript $(document).ready(function(){ $('#loginForm').submit(function(event){ event.preventDefault(); // 阻止表单的默认提交行为 var username = $('#username').val(); var password = $('#password').val(); // 发送AJAX请求 $.ajax({ url: 'login.php', // 登录验证的后端文件路径 type: 'POST', data: {username: username, password: password}, success: function(response){ // 登录验证成功后的操作 if(response === 'success'){ alert('登录成功!'); }else{ alert('登录失败!'); } }, error: function(){ alert('请求失败,请稍后重试!'); } }); }); }); ``` 在上述示例中,我们以jQueryAJAX功能发送一个POST请求到后端login.php文件。我们将用户名和密码以键值对的形式传递给后端,后端进行登录验证,并将结果以字符串形式返回。在前端的success回调函数中,我们判断返回的结果是否为'success',如果是则提示登录成功,否则提示登录失败。如果请求出现错误,则在error回调函数中提示请求失败。 需要注意的是,在实际应用中,后端的登录验证逻辑需要在服务器端实现,并且需要进行安全防护措施,比如密码加密等。此处仅为简单示例,供参考。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值