将Ajax成功数据存储到javascript变量中以在其他js函数中使用

Question

我目前正在执行登录表单，并且我的数据库中包含用户名和密码。 我已经比较了用户名和密码是否与该用户名匹配，但是当我使用来自ajax响应的变量单击“提交”按钮时，我想显示用户名不存在。 我已经完成了，但是变量存储在html标签中。

这是我的旧代码

function checkUsn(){
    var usn = document.getElementById("usn").value;
    if(usn){
        $.ajax({
            type: 'post',
            url: 'checkdata.php',
            data: {
                emp_username: usn,
            },
            success: function(response){
                $('#status').html(receiveUsn);
                if (response == "OK"){
                    return true;
                }else{
                    return false;
                }
            }
        });
    }else{
        $('#status').html("");
        return false;
    }
}

我想要这样的东西，但是下面的代码不起作用

function checkUsn(receiveUsn){
    var usn = document.getElementById("usn").value;
    if(usn){
        $.ajax({
            type: 'post',
            url: 'checkdata.php',
            data: {
                emp_username: usn,
            },
            success: function(response){
                var receiveUsn = response; //I want to use this for other function
                $('#status').html(receiveUsn);
                if (response == "OK"){
                    return true;
                }else{
                    return false;
                }
            }
        });
    }else{
        $('#status').html("");
        return false;
    }
}

然后我将在此函数上使用来自ajax的变量

function checkall(receivePw, receiveUsn)
{
    if(receiveUsn == "OK" && receivePw == "MATCH"){
        return true;
    }else{
        return false;
    }
}

PHP代码

<?php
include 'db_config.php';
$conn = new mysqli($db_servername, $db_username, $db_password, $db_name);

if(isset($_POST['emp_username'])){
    $usn = $_POST['emp_username'];

    $checkdata = "SELECT emp_username FROM emp_details where emp_username='$usn'";

    $query = mysqli_query($conn, $checkdata);

    if(mysqli_num_rows($query) > 0){
        echo "OK";
    }else{
        echo "Your Username not exist";
    }
    exit();
}

if(isset($_POST['emp_pw']) && isset($_POST['emp_usn'])){
    $pw = $_POST['emp_pw'];
    $usn = $_POST['emp_usn'];

    $get_pw = "SELECT emp_password FROM emp_details where emp_username='$usn'";

    $query = mysqli_query($conn, $get_pw);

    //$get_num_rows = mysqli_num_rows($query);
    //echo $get_num_rows;

    $row = mysqli_fetch_assoc($query);
    //echo $row["emp_password"];

    // check if password is match with username
    if($pw == $row["emp_password"]){
        echo "MATCH";
    }else{
        echo "Wrong password";
    }
    exit();
}
?>

登录表单

<form class="modal-content animate" action="/login_action.php" method="post" onsubmit="return checkall();">
    <div class="container">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"></div>
      <img class="avatar img-responsive col-lg-6 col-md-6 col-sm-6 col-xs-6" src="img/employee_avatar.png" alt="Avatar">
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"></div>
    </div>
    <div class="container">
      <label for="usn"><b>Username</b></label>
      <input id="usn" type="text" placeholder="Enter Username" name="usn" onkeyup="getPw();checkUsn();" required>

      <label for="pw"><b>Password</b></label>
      <input id="pw" type="password" placeholder="Enter Password" name="pw" onkeyup="getPw();checkUsn();" required>

      <button type="submit">Login</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
      </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
    <span id="status">status</span><br>
    <span id="status2">status</span><br>
    <span id="status3">status</span>
  </form>

请帮忙谢谢！！！

Answer 1

您需要在Java脚本开始时声明变量'receiveUsn'，这样它将成为全局变量。问题是您已经在ajax成功函数中声明了var receiveUsn，因此它现在是局部变量，不能在其他变量中使用函数.global可以解决您的问题

Answer 2

在<script>标记中，您需要在根级别声明一个变量，这将创建全局变量。 最好的做法是不污染全局空间，因此在全局级别声明一个对象并将其用于存储全局变量。

<script>
  var myGlobalContainer = {};
</script>

现在，在页面上的JavaScript代码中，您可以使用myGlobalContainer对象。

 // set a value
 myGlobalContainer.hello = "world";

 // read a value
 console.log(myGlobalContainer.hello);
 // "world"

Answer 3

在Javascript之上初始化变量：

myglobalvariable = '';

现在将ajax输入存储在变量中，并且可以在任何地方访问它：

......
success: function(response){
    myglobalvariable = response;
    $('#status').html(receiveUsn);
......