使用ajax提交表单而无需重新加载页面？

Question

I have a problem whatever i do to submit a form using Jquery and Ajax, but it still redirected me to the action page of the form, i don't understand if somethings outside Affected the function or what happen. this is my code:

<form action="add-niveau" method="POST" class="ajax">
  <div>
    <input type="text" name="name" placeholder="Your name">
  </div>
  <div>
    <input type="text" name="email" placeholder="Your email">
  </div>
  <div>
    <textarea rows="4" cols="20" name="comment"></textarea>
  </div>
   <input type="submit" value="send">
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">      </script>
<script>
  $('form.ajax').on('submit', function() {
     return false;
  });
</script>

Other ajax script:

var ajaxRequest;

function ajaxFunction() {
try {

    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e) {

    // Internet Explorer Browsers
    try {
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {

        try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {

            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}
}

function getForm(objButton) {
ajaxFunction();
ajaxRequest.onreadystatechange = function() {
    if (ajaxRequest.readyState == 4) {
        document.getElementById("formTag").innerHTML =    ajaxRequest.responseText;
    }
}
var buttonValue = objButton.value;
ajaxRequest.open("get", "get-form/" + buttonValue, true);
ajaxRequest.send(null);
}

// Send form using ajax:
$('form.ajax').on('submit', function(e) {
  e.preventDefault();
});

Answer 1

You need to add event.preventDefault(); right after click event since you want to prevent the default form submission.

$('form.ajax').on('submit', function(event) { // pass the event to function

     event.preventDefault(); // add this line

     $.ajax({
         url: "test.php",
         context: document.body
     }).done(function() {
         alert('Done!');
     });

});