表单提交ajax实现

提交表单常见的几种方式这里总结一下,最平常的直接submit按钮提交就不说了。

一、不使用submit按钮的submit提交

这个标题看起来有些别扭,但实际中确实有这样的需求,我们要在提交表单时进行验证,验证通过才提交,否则不提交。可以用下面代码实现:
这是比较基础的一种实现方法。注意这时就不需要再form标签 上加action属性,地址填在这里的url就好。onSubmit是在表单提交的同时执行的方法,$(this).form(“validate”)用的是easyui的表单验证,验证失败则不提交。

 $("#fm").form("submit",{
        url:url,
        onSubmit:function(){
            return $(this).form("validate");
        },
        success:function(result){
            var result=eval('('+result+')');
            if(result.status=="success"){
                $.messager.alert("系统提示","保存成功!");
                resetValue();
                $("#dlg").dialog("close");
                $("#dg").datagrid("reload");
            }else{
                $.messager.alert("系统提示","保存失败!名称或编号已存在");
                return;
            }
        }
     });

二、普通ajax提交

这也是很常见的写法,不过表单在这里就失去意义了。
当然可以使用$(“form”).serialize()直接序列化表单内容放在data里面,就不用这样一个个添加。

$.ajax({
                url:"../add_stu.do",
                type:"post",
                dataType:"json",
                data:{
                    id:id,
                    name:name,
                    birth:birth,
                    sex:sex,
                    tel:tel,
                    email:email,
                    address:address,
                    classid:classid
                },
                success:function(data){
                    if(data.status == "success"){
                        $('#add_dlg').dialog('close'); 
                        $.messager.show({
                            title : '提示',
                            msg : '添加成功'
                        });
                        $('#dg').datagrid('load', {});
                    }else{
                        $.messager.show({
                            title : '提示',
                            msg : '添加失败,请联系管理员 ------'
                        });
                    }
                },
                error:function(){
                        $.messager.show({
                            title : '提示',
                            msg : '系统错误,请联系管理员------'
                        });
                }
            });

三、使用jquery.form.js进行表单提交

上面的使用$选择器和ajax的毫无疑问要引入jquery.min.js,但使用这种方法还要引入一个jquery.form.js
这种方式算是正宗的表单ajax提交

var form = $("#addcompany");
            form.ajaxSubmit({
                type : "post",
                url : "${ctx}/company/addCompany.do",
                data : $.param({
                    dealType : dealType
                }),
                dataType : "json",
                success : function(data) {
                    if (data == "exist") {
                             $.messager.alert("系统提示","公司名称已存在,请重新输入!");
                    } else {
                         $.messager.alert("系统提示","公司添加成功");
                        initCompany();
                        $("#company_info").dialog("close");
                    }

                },
                error : function() {
                }
            });
  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值