做一个 jQuery Ajax 提交，但它不起作用

Question

I am trying to do a ajax post request, to also read a JSON response from the URL, but if I click the button nothing happens. What could be wrong with my HTML code or is it the Javascript? The function submitRegister is empty at the moment.

Javascript:

$('#registerForm').submit(function(event){
    event.preventDefault();
    submitRegister();
});

function submitRegister(){
    console.log("Test");
}

HTML

<div id="RegisterM" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Register</h4>
            </div>
            <div id='notification'>
            </div>
            <div class="modal-body">
                <form role="form" id="registerForm">
                    <div class="form-group">
                        <label for="Username">Username:</label>
                        <input type="Username" class="form-control" id="username">
                    </div>
                    <div class="form-group">
                        <label for="email">Email address:</label>
                        <input type="email" class="form-control" id="email">
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd">
                    </div>
                    <div class="form-group">
                        <label for="confirmpwd">Confirm Password:</label>
                        <input type="confirmpwd" class="form-control" id="confirmpwd">
                    </div>
                    <button type="button" class="btn btn-default" id='register-submit'>Register</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Answer 1

Your button needs to be of type "submit" :

<button type="submit" class="btn btn-default" id='register-submit'>Register</button>

Per the jQuery docs:

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements. Forms can be submitted either by clicking an explicit <input type="submit"> , <input type="image"> , or <button type="submit"> , or by pressing Enter when certain form elements have focus.

Answer 2

Why you did such a strange way to send ajax(submit -> prevent submitting -> send ajax)? Instead of doing this:

$('#registerForm').submit(function(event){
event.preventDefault();
submitRegister();
});

function submitRegister(){
console.log("Test");
}

Easily create an input

<input type="button" onclick="submitRegister()" vlaue="ajax" >

And there is many things to cause problem to an ajax request. You muse write its code very carefully and go step by step to find the reason of your problem.