formSubmitToAjax资源链接:formSubmitToAjax.js
github链接: https://github.com/1499610503/formSubmitToAjax
下载上面文件或复制下边代码
formSubmitToAjaxl.js:
$(function() {
$('form').on('submit', function(event) {
var that = this;
event.preventDefault()
console.log(this)
var url = this.action || ''
var type = this.method || 'post'
var formdata = new FormData(this)
console.log({
url,
type,
})
$.ajax({
url: url,
type: type,
data: formdata,
processData: false,
success: function(res) {
if (that.success) {
that.success(res)
return
}
console.log('提交成功', res)
alert('提交成功')
},
error: function(err) {
if (that.error) {
that.error(err)
return
}
console.log('提交失败', err)
alert('提交失败')
}
});
})
})
引入formSubmitToAjaxl.js 后,页面上的 form表单submit 都将以ajax形式提交
可以给 指定的form 设置 success(请求成功) 和 error(请求失败) 的处理方法:
返回数据应该为json格式
$('#form1').get(0).success=function(res){
console.log(res)
}
$('#form1').get(0).error=function(err){
console.log(err)
}
formSubmitToAjaxl.js 中我用到了jq,所以引入formSubmitToAjaxl.js前需先引入 jq 文件
formSubmitToAjaxl.js的代码量很小,也很简单。它其实就是阻止了form的submit默认行为,然后将form data 以ajax的形式发送到目标url,最后 根据成功或失败 调用 success 或 error 方法