javascript - 使用 jquery 和 .submit 捕获表单提交

Question

我正在尝试使用 jQuery 来捕获提交事件，然后将格式为 JSON 的表单元素发送到 PHP 页面。 我在捕获提交时遇到了问题，我从 .click() 事件开始，但改为转移到 .submit() 事件。

我现在有以下精简代码。

HTML

<form method="POST" id="login_form">
    <label>Username:</label>
    <input type="text" name="username" id="username"/>
    <label>Password:</label>
    <input type="password" name="password" id="password"/>
    <input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>

Javascript

$('#login_form').submit(function() {
    var data = $("#login_form :input").serializeArray();
    alert('Handler for .submit() called.');
});

Answer 1

将代码包装在 document ready 中并防止默认提交操作:

$(function() { //shorthand document.ready function
    $('#login_form').on('submit', function(e) { //use on if jQuery 1.7+
        e.preventDefault();  //prevent form from submitting
        var data = $("#login_form :input").serializeArray();
        console.log(data); //use the console for debugging, F12 in Chrome, not alerts
    });
});