您的位置:首页 > Web前端 > JQuery

jquery提交form表单之ajaxForm() 和 ajaxSubmit()的区别

2016-11-19 18:05 573 查看
今天在学习恰巧学习到用jquery提交form表单 特赶紧整理下来,以便日后使用。

首先需要在页面引入form.js的插件

<script type="text/javascript" src="js/jquery.form.js"></script>


用jquery表单提交form表单有两种方式,一种是

ajaxSubmit();

详解:

$(“#formId”). ajaxSubmit(options )

var options = {

target: ‘#output’, //把服务器返回的内容放入id为output的元素中

beforeSubmit: showRequest, //提交前的回调函数

success: showResponse, //提交后的回调函数

//url: url, //默认是form的action, 如果申明,则会覆盖

//type: type, //默认是form的method(get or post),如果申明,则会覆盖

//dataType: null, //html(默认), xml, script, json…接受服务端返回的类型

//clearForm: true, //成功提交后,清除所有表单元素的值

//resetForm: true, //成功提交后,重置所有表单元素的值

timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求

}

<script type="text/javascript">
//异步上传图片
function uploadPic(){
//定义参数

var options = {
url : "uploadPic.do",
dataType : "json",//服务器返回的数据类型
type :  "post",//提交表单的方式
success : function(data){//提交表单成功后执行的回调函数
//回调两个路径 url path
$("#allImgUrl").attr("src",data.url);
$("#path").val(data.path);
/* alert("data.url  "+data.url+"   data.path   "+data.path) */

}
};

//jquery.form使用方式jvForm是表单的id
$("#jvForm").ajaxSubmit(options);

}

</script>


另外一种是ajaxForm() 他是不直接提交表单,只是为提交表单做准备,在这个里面可以写一些业务逻辑的判断
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery 表单 异步 插件