javascript - AJAX 不响应表单提交

Question

我写了一个学习AJAX的玩具程序，就是将用户注册表单提交到Web服务器，但是服务器端的程序无法接收到数据。我猜错误出在使用 jQuery 的以下 JS 代码上:

$(document).ready(function() {
$('#registerForm').submit(function() {
    var formData = $('#registerForm').serialize();
    $.post('/admin/user/signup', formData, registerResults);
    },

    registerResults: function() {
            console.log("register success!");
        }  // end of registerResults

});  // end of ready

对应的html表单如下:

<form class="form-horizontal" role="form" id='registerForm' method='POST' action="/admin/user/signup">
        <div class="form-group">
                    <label class="col-sm-3 control-label" for="fullname">Fullname: </label>
                    <div class="col-sm-5">
                        <input class="form-control" type='text' id="fullname" name='fullname' placeholder="Full Name" />
                    </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label" for="username">Username: </label>
            <div class="col-sm-5">
                <input class="form-control" type='text' id="username" name='username' placeholder="Username" />
            </div>
        </div>

        <div class="form-group">
            <input type='submit' value="Submit" class="register-form-button" form='user-create-form' />
        </div>
    </form>

有人可以帮助我使用 jQuery 编写 JS 代码吗？非常感谢!

Answer 1

正如 Felix 所说，你的 JavaScript 语法无效。打开JS控制台并刷新页面，您将看到语法错误。

这里有一个修复它的方法:

$(document).ready(function () {

    $('#registerForm').submit(function() {
        var formData = $('#registerForm').serialize();
        $.post('/admin/user/signup', formData)
            .done(registerResults)
            .fail(registerError);
    });

    function registerResults() {
        console.log("register success!");
    }  

    function registerError() {
        console.log("There was an error");
    }

});