php+ajax验证问题(附完整代码),已上传错误截图,请指点哪里错误了?

图片描述
这是后端代码

<?php
 $password=$_POST['password'];
function getRandPass(){
$chars = ("0123456789abcdefghijklmnopqrstuvwxyz");
$min = 6;//最小字数
$max = 9;//最大字数
$len = mt_rand($min,$max);//随机长度
$password= '';
$a_len = strlen($chars);
for($i=0;$i<$len;$i++){
$password.= $chars[mt_rand(0,$a_len-1)];//随机取出一个字符
}
return $password;
}
$password=getRandPass();
 if($password==$password){
    $data['code'] = 1;
    $data['password'] = $password;
}else{
    $data['code'] = 0;    
}
$data='{password:"' . $password. '"}';//组合成json格式数据
 echo json_encode($data);//输出json数据
?>

以下是前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<input type="text" id="password">
 <button id="sub">获取密码</button>
  <button id="gopass">验证密码</button>
 <input type="text" id="text">
 <span id="texts"></span><!-- 用以显示返回来的数据,只刷新这部分地方 -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
     $('#gopass').click(function(){
  var password=$('#password').val();
  if(password==''){
      $('#texts').html('密码不能为空!');
      return false;
  }
        $.ajax({
            url: 'password.php',
            type: 'POST',
            dataType: 'json',
            data: {password: password},
            beforeSend: function(){
                $('#texts').html('验证中!');//用于调试验证过程
            },
            success: function(data){
                if(data.code==1){ //验证密码
                    $('#texts').html('验证成功' );
                }else{
                    $('#texts').html('密码错误!');
                }
            }
        });

 });
</script>
<script>
$(function(){
$('#sub').click(function(){
  var password=$('#password').val();
  $.ajax({
  type: "post",
  url: "password.php",
  data: {password: password}, //提交到password.php的数据
  dataType: "json", //回调函数接收数据的数据格式

  success: function(msg){
   $('#text').empty(); //清空Text里面的所有内容
   var data='';
   if(msg!=''){
   data = eval("("+msg+")"); //将返回的json数据进行解析,并赋给data
   }
   $('#text').val(data.password); //密码在#text中输出
   $('#texts').html('获取成功!');
   console.log(data); //控制台输出调试结果
  },
  error:function(msg){
   console.log(msg);//控制台输出错误调试结果
  }
  });
 });
 });
</script>
</body>
</html>
阅读 2.1k
2 个回答

问题1,没有保存密码,验证密码的时候又重新生成了新密码,所以永远都是密码错误

问题2,$data='{password:"' . $password. '"}';echo json_encode($data);重复,json_encode就是生成json的

问题3,ajax使用dataType: "json"时,jquery会自动解析json字符串,不需要再一次data = eval("("+msg+")");

问题4,获取密码的点击事件中,还没有输入密码呢,干嘛还要提交密码 data: {password: password}, //提交到password.php的数据

<?php
session_start();
function getRandPass()
{
    $chars    = ("0123456789abcdefghijklmnopqrstuvwxyz");
    $min      = 6;//最小字数
    $max      = 9;//最大字数
    $len      = mt_rand($min,$max);//随机长度
    $password = '';
    $a_len    = strlen($chars);
    for($i = 0;$i < $len;$i++)
    {
        $password .= $chars[mt_rand(0,$a_len - 1)];//随机取出一个字符
    }
    return $password;
}
if(isset($_POST['password']))
{
    if($_SESSION['password'] == $_POST['password'])//验证密码
    {
        $data['code'] = 1;
    }
    else
    {
        $data['code'] = 0;
    }
}
else
{
    $password = getRandPass();
    $_SESSION['password'] = $password;//保存密码,以便下次验证密码
    $data['password'] = $password;
}
echo json_encode($data);//输出json数据
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>
    <body>
        <input type="text" id="password">
        <button id="sub">
            获取密码
        </button>
        <button id="gopass">
            验证密码
        </button>
        <input type="text" id="text">
        <span id="texts">
        </span><!-- 用以显示返回来的数据,只刷新这部分地方 -->
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">
        </script>
        <script>
            $('#gopass').click(function()
                {
                    var password = $('#password').val();
                    if(password == '')
                    {
                        $('#texts').html('密码不能为空!');
                        return false;
                    }
                    $.ajax(
                        {
                            url: 'password.php',
                            type: 'POST',
                            dataType: 'json',
                            data:
                            {
                                password: password
                            },
                            beforeSend: function()
                            {
                                $('#texts').html('验证中!');//用于调试验证过程
                            },
                            success: function(data)
                            {
                                if(data.code == 1)
                                {
                                    //验证密码
                                    $('#texts').html('验证成功' );
                                }else
                                {
                                    $('#texts').html('密码错误!');
                                }
                            }
                        });
                });
            $('#sub').click(function()
                {
                    var password = $('#password').val();
                    $.ajax(
                        {
                            type: "get",
                            url: "password.php",//提交到password.php的数据
                            dataType: "json", //回调函数接收数据的数据格式
                            success: function(data)
                            {
                                $('#text').empty(); //清空Text里面的所有内容
                                $('#text').val(data.password); //密码在#text中输出
                                $('#texts').html('获取成功!');
                                console.log(data); //控制台输出调试结果
                            },
                            error:function(msg)
                            {
                                console.log(msg);//控制台输出错误调试结果
                            }
                        });
                });
        </script>
    </body>
</html>

最终目的:获取到的密码和输入的密码进行验证。

后端代码改为

<?php

if ($_POST['action'] == 'getPassword') {
    $data['password'] = getRandPass();
} else if ($_POST['action'] == 'check') {
    if($_POST['password'] == $_POST['inputPassword']){
        $data['code'] = 1;
    }else{
        $data['code'] = 0;    
    }
}

function getRandPass()
{
    $chars = ("0123456789abcdefghijklmnopqrstuvwxyz");
    $min = 6;//最小字数
    $max = 9;//最大字数
    $len = mt_rand($min,$max);//随机长度
    $password= '';
    $a_len = strlen($chars);
    
    for($i=0;$i<$len;$i++){
        $password.= $chars[mt_rand(0,$a_len-1)];//随机取出一个字符
    }
    
    return $password;
}

echo json_encode($data);//输出json数据

?>

前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<input type="text" id="password">
 <button id="sub">获取密码</button>
  <button id="gopass">验证密码</button>
 <input type="text" id="text">
 <span id="texts"></span><!-- 用以显示返回来的数据,只刷新这部分地方 -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
     $('#gopass').click(function(){
  var password=$('#password').val();
  if(password==''){
      $('#texts').html('密码不能为空!');
      return false;
  }
        $.ajax({
            url: 'password.php',
            type: 'POST',
            dataType: 'json',
            data: {action:'check',password: password,inputPassword:$('#text').val()},
            beforeSend: function(){
                $('#texts').html('验证中!');//用于调试验证过程
            },
            success: function(data){
                if(data.code==1){ //验证密码
                    $('#texts').html('验证成功' );
                }else{
                    $('#texts').html('密码错误!');
                }
            }
        });

 });
</script>
<script>
$(function(){
$('#sub').click(function(){
  var password=$('#password').val();
  $.ajax({
  type: "post",
  url: "password.php",
  data: {action:'getPassword', password: password}, //提交到password.php的数据
  dataType: "json", //回调函数接收数据的数据格式

  success: function(msg){
   $('#text').empty(); //清空Text里面的所有内容
   var data='';
   if(msg!=''){
   data = eval("("+msg+")"); //将返回的json数据进行解析,并赋给data
   }
   $('#text').val(data.password); //密码在#text中输出
   $('#texts').html('获取成功!');
   console.log(data); //控制台输出调试结果
  },
  error:function(msg){
   console.log(msg);//控制台输出错误调试结果
  }
  });
 });
 });
</script>
</body>
</html>

然后再试试,主要问题还是最后的输出部分做了手动拼接。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题