使用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);