表单提交即使是'return false' - AJAX [关闭]

Question

I've been following this tutorial from Youtube!, and it just don't want to work the way I want it to.

I got this code in my index.php:

<form action="scripts/keys.php" class="ajax" method="post">
    <p>Key:</p>
    <input type="text" name="key" class="key_input" autocomplete="off" autofocus />
    <input type="submit">
</form> 

This code in my main.js:

$('form.ajax').on('submit', function(){
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

    that.find('[key]').each(function(index, value){ 
        var that = $(this),
            name = that.attr(''),
            value  that.val('');

        data[name] = value;
    });

    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response) {
            console.log(response);
        }
    });
    return false;
});

and finally this in my keys.php:

if(isset($_POST['key'])) {
    echo 'lol';
}

For some reason when I submit the form it still sends me to keys.php, and I don't understand that, when I used return false.

Can someone explain what I'm doing wrong? Don't tell me the correct code, just what I need to change :)

Answer 1

Syntax error, missing equalsign

that.find('[key]').each(function(index, value){ 
    var that = $(this),
        name = that.attr(''),
        value  that.val('');  // HERE
//           ^^
    data[name] = value;
});

And change the PHP to

if(isset($_POST['key'])) {
    echo 'lol';
}