在做項目的過程中遇到要將form表單提交轉為ajax方式提交，下面是我總結的如何把form表單提交無縫轉為ajax方式提交的方法。

將form元素的屬性action、enctype、method去掉，添加id="form"，form元素就變為<form id="form">

 

提交按鈕增加 onclick="add_ajax()" 并把 type="submit" 修改為 type="button"

例如：<input type="button" value="提 交" onclick="add_ajax()" />

 

把ajax代碼放在頁面最底部（不能放在jquery庫之前）

<script type="text/javascript">

function add_ajax(){

    $.ajax({

        type: "POST",

        url: "/plus/diy.php",//提交到后臺文件

        data: $('#form').serialize(),//表單傳值

        success: function(data) {

            alert(data);//彈窗顯示PHP返回的值，如不需要顯示，注釋掉這行即可

            $('#form')[0].reset();//提交后清除表單填寫的值

        }

    });

    return false;

}

</script>

 

延伸閱讀：

當表單的屬性設置為"disabled"時，提交表單時，select的值無法傳遞，需要提交前移除disabled屬性，使用$("#role").removeAttr("disabled");即可（提交前移除id="role"的disabled屬性）