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

今天在学习恰巧学习到用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() 他是不直接提交表单,只是为提交表单做准备,在这个里面可以写一些业务逻辑的判断

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery表单插件ajaxFormajaxSubmit都是用来实现表单提交的,其中ajaxForm适用于所有的表单,而ajaxSubmit只适用于表单中的input、select等元素,不能包含文件上传域。 ajaxForm的使用方法: 1.引入jQuery库和jquery.form.js插件文件 ``` <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> ``` 2.使用ajaxForm函数提交表单 ``` $(document).ready(function() { $('#form1').ajaxForm(function(data) { alert(data); }); }); ``` 其中,#form1是表单ID,data是服务器端返回的数据。 ajaxSubmit的使用方法: 1.引入jQuery库和jquery.form.js插件文件 ``` <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> ``` 2.使用ajaxSubmit函数提交表单 ``` $(document).ready(function() { $('#form1').submit(function() { $(this).ajaxSubmit({ success: function(data) { alert(data); } }); return false; }); }); ``` 其中,#form1是表单ID,data是服务器端返回的数据。 ajaxSubmit还可以通过其他参数来设置表单提交的相关信息,如: ``` $(document).ready(function() { $('#form1').submit(function() { $(this).ajaxSubmit({ type: 'post', // 提交方式,get或post,默认为get url: 'submit.php', // 提交的URL地址 data: { // 提交的数据,键值对形式 username: 'admin', password: '123456' }, dataType: 'json', // 服务器返回的数据类型,text、xml、json等 success: function(data) { // 提交成功后的回调函数 alert(data); } }); return false; }); }); ``` 以上就是ajaxFormajaxSubmit的详细使用方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值