在做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法。

form元素的属性actionenctypemethod去掉,添加id="form"form元素就变为<form id="form">

 

引入jquery库,点击【这里】下载

jquery-1.8.2.min.zip

提交按钮增加 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属性)