<!DOCTYPE html> <html> <head> <title>登录</title> <meta charset="utf-8"> </head> <body> <input type="text" name="username" class='username' placeholder="请输入账号"> <span class="s1"></span> <br> <input type="password" name="password" class='password' placeholder="请输入密码"> <span class="s2"></span> <br> <input type="submit" class="submit" value="登录"> </body> </html> <script src='jquery-3.3.1.min.js'></script> <script> $('.submit').click(function(){ var username = $('.username').val(); var password = $('.password').val(); if(username.length==0){ $('.s1').html("<font color='red'>账号不能为空</font>"); return false; } var reg = /^[a-zA-Z]{6}$/; if(reg.test(username)==false){ $('.s1').html("<font color='red'>账号必须是6位数字母</font>"); return false; } $('.s1').html("<font color='green'>检测合格</font>"); if(password.length==0){ $('.s2').html("<font color='red'>密码不能为空</font>"); return false; } var pass_reg = /^w{3,}$/; if(pass_reg.test(password)==false){ $('.s2').html("<font color='red'>密码最少3位数</font>"); return false; } $('.s2').html("<font color='green'>检测合格</font>"); $.ajax({ url:'login.php', type:'post', dataType:'jsonp', jsonpCallback:'Liyue',//处理后台返回的数据 data:{ username:username, password:password }, success:function(){ console.log('请求完成'); } }) }) function Liyue(data){ alert(data.msg); } </script>
php代码：
<?php header("Content-type:text/html;charset=utf-8"); //接收传值 $username = $_POST['username']; $password = $_POST['password']; //接收回调函数 $callback = $_GET['callback']; $pdo = new PDO('mysql:host=127.0.0.1;dbname=1703a','root','root'); $sql = 'select * from user1 where username=? and password=?'; $query = $pdo->prepare($sql); $query->execute([$username,$password]); $data = $query->fetch(2); if(empty($data)){ $res = json_encode(['code'=>400,'msg'=>'账号密码有误','data'=>null]); }else{ $res = json_encode(['code'=>200,'msg'=>'登录成功','data'=>null]); } echo $callback.'('.$res.')';