form表单如何实现ajax提交

最近在开发一个游戏网关的后台管理系统，总结了下中间碰到的一些问题。

之一就是：form表单如何实现ajax提交？

问题：在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或者数据变化。

一般这种异步的操作，我们都会想到ajax方式，因此在实现了功能后就整理了这篇文章，通过ajax方法实现form表单的提交并进行后续的异步操作。

介绍下我用的环境：

后端：Spring Boot+Spring Security+Mybatis+Mysql

前端：BootStrap+Thymeleaf+Ace Admin

Controller负责提供Rest风格的增删改查相关接口，前端必须使用AJAX进行调用。下面给出解决方案：

原始链接：

https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form

// this is the id of the form
$("#idForm").submit(function(e) {


    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

以下是我项目中的实际案例：

//新增
    $("#add-form").submit(function (e) {
        var form = $(this);
        var url = form.attr('action');

        //console.log(JSON.stringify(form.serializeJSON()));

        $.ajax({
            url: "/productType/save",
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(form.serializeJSON()),
            success: function (data) {
                if (data.success) {
                    $("#name").val("");
                    $("#code").val("");
                    //重新加载列表
                    getData();
                } else {
                    alert(data.message);
                }

            }
        });