form提交 转为 ajax请求

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 方法