为什么JQuery不在PHP Action Method中发布值？

Question

Why JQuery is not posting the values in PHP Action Method?

HTML

<form id="login" name= "login">
    <h1>Login Form</h1>
    <div>
        <input type="text" id= "userName" name = "userName" class="form-control"/>
    </div>
    <div>
        <input type="password" id= "password" name = "password" class="form-control" />
    </div>
    <div>
        <input type="button" onclick="Authenticate();" value="Log In" />          
    </div>
    <div class="clearfix"></div>
    <div class="separator">
        <div class="clearfix"></div>
        <br />
    </div>
</form>

JavaScript

function Authenticate() {
    $.ajax({
        url: 'My Url',
        type: "POST",
        async: true,
        data: $('#login').serialize(),
        contentType: "application/json; charset=utf-8",
        success: function (data) {
        },
        error: function (data) {
        }
    });
}

PHP

public function AuthenticateUser() {
    if( isset( $_POST['userName'] ) && isset( $_POST['password'] ) ) {
        header('Content-Type: application/json');
        echo json_encode( 'ok' );           
    }
    else {
        header('Content-Type: application/json');
        echo json_encode( 'Not Ok' );
    }
}

Answer 1

By looking at your code, what I feel is, remove this line:

contentType: "application/json; charset=utf-8",

It will work. Everything else looks fine.

Answer 2

I am confident that .serialize() works, however my recommendation is to try replacing $('#login').serialize() with:

data: {userName: $('#userName').val(), password:$('#password').val() }

Reason is to have precise control over what data gets submitted over the AJAX call. And your AuthenticateUser should start working as expected through the POST. You don't need to pass contentType: "application/json; charset=utf-8" therefore remove this line.

While figuring out what parameters get passed to your app, you could

echo json_encode($_POST);

and see what gets passed to your script. Naturally, you could also use error_log(json_encode($_POST)) and tail the server error log for the POST data.