JQuery 以Ajax方式提交表单

使用jquery.form.js实现
jquery.form.js-v3.51.0 提取码 dgst
1.HTML引入

<script src="/js/lib/jquery.form.js" th:src="@{/js/lib/jquery.form.js}"></script>

2.JS

function ajaxForm(url, parameters){
//新增form
    this.form = $('<form action="'+url+'"method="post" style="display:none;"></form>');
//新增提交的参数
    $(Object.keys(parameters)).each(function(idx,e){
    	$("<input type='hidden' />").attr("name", e).attr("value", parameters[e]).appendTo(this.form);
    });
//提交表单
    this.submit = function(options){
        $( "body" ).append(this.form);
        this.form.ajaxSubmit(options);
    }
}

实例

var url = "getXXX";
var parameters = {
	"key1": "value1",
	"key2": "value2",
	"key3": "value3",
};
//定义ajaxForm的选项,更多选项参照jquery.form.js官方文档
var options = {
	target: '#response', //Response返回的内容会赋值到该元素,使用$("#output")获取
	timeout: 10000, //超时时间10s,超时后请求被Cancel
	error: showError, //请求超时,失败时进入的回调函数
	success: showSuccess, //请求成功,返回Response后的回调函数
};
function showError(responseText, statusText){
	if(statusText == "timeout"){
		console.log("请求超时");
	}
	else{
		console.log("请求失败")
	}
}
function showSuccess(){
	console.log("请求完成");
}
var form = new ajaxForm(url, parameters);
form.submit(options);