如何使用AJAX和jQuery检查正确包含“ / + = @＃^”的密码

Question

I currently have a php functionality for password checking that works flawlessly on php. However, When I try to return the result from AJAX, the "+" symbol is somehow not being detected.

This is the php functionality:

function pwd_contents($pwd, $notAllowedChar)
    {
        $pass_array = str_split($pwd);
        $notAllowedChar_array = str_split($notAllowedChar);

        foreach($notAllowedChar_array as $nChar)
        {
            if(in_array($nChar, $pass_array))
                return true;
        }
        return false;
    }

    if(isset($_POST['password']))//If a username has been submitted 
    {
        $pattern = '/\/\@\+\=\#\*/';
        $password = $_POST['password'];//Some clean up :)

        if(pwd_contents($password, $pattern))
            echo '1';
        else
            echo '0';
    }

And this is the ajax call that calls it:

$.ajax({ //Make the Ajax Request
    type: "POST",
    url: "ajax_check_password.php", //file name
    data: 'password=' + password, //data
    success: function(server_response) {

        $("#password_status").ajaxComplete(function(event, request) {

            if (server_response.trim() == '0') //if ajax_check_password.php return value "0"
            {
                $("#password_status").html('<img src="/img/icon-success.png" align="absmiddle" style="height: 15px; width: auto; margin-top: -2px;"> <font color="#c9dc54" style="padding-top: 5px;"> Password is valid. </font>  ');
                $("#btn-submit-2").html('<button type="submit"  class="btn btn-danger btn-lg btn-block"   id="b"  style="font-family: "klavikaRegular"; letter-spacing: 1px;" name="skip" value="0">CONTINUE</button>');
                //add this image to the span with id "availability_status"
            } else if (server_response.trim() == '1') //if it returns "1"
            {
                $("#password_status").html('<img src="/img/icon-error.png" align="absmiddle" style="height: 15px; width: auto; margin-top: -2px;"> <font color="#b11116" style="padding-top: 5px;"> Password is not valid. </font>');
                $("#btn-submit-2").html('<a class="btn btn-default btn-lg btn-block" style="font-family: "klavikaRegular"; letter-spacing: 1px;">CONTINUE</a>');
            }
        });
    }
});

How would I actually get the response to be return me the result that I want if the password contains "+" on it?

An example would be "Megason+2983". The result from the ajax call would give me "Password is not valid."

Answer 1

Because you are using the "URL encoded" method of providing your data to the AJAX POST:

data: 'password=' + password, //data

jQuery is treating the "+" in your password as a URL encoded character (it is a reserved character in URLs), and therefore it gets converted to its plaintext equivalent (a space character) before PHP gets a chance to process the POST.

To fix it, change it to:

data: {password: password}, //data

For future troubleshooting of AJAX requests: inspecting the request via developer tools in the browser would have probably pointed you to the solution pretty quickly.