表單提交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() {
                }
            });
發佈了160 篇原創文章 · 獲贊 234 · 訪問量 59萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章