织梦不跳转ajax提交自定义表单的方法_织梦CMS教程_网络技术

织梦不跳转ajax提交自定义表单的方法_织梦CMS教程

栏目：网络技术发布时间：2018-04-03

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

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

将form元素的属性action、enctype、method去掉，添加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库之前）

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属性）