普通的form提交、ajax提交和jQuery的ajax的form提交

2016-12-22 21:18:26来源:CSDN作者:qq_28089993人点击

第七城市

这篇文章自己记录学习使用,有部分缺失,可对于我们菜鸟来说够用了,哈哈,本文采用的SSM框架,具体看下边,看完再走哈。

一、普通的form提交

  1. jsp,简单的用户属性
<form id="userform" action="${pageContext.request.contextPath}/user/addsysusersubmit.action" method="post">    <table>      <tr>        <td>用户账号</td>        <td><input type="text" id="sysuser_userid" name="sysuserCustom.userid" /></td>      </tr>      <tr>        <td>用户名</td>        <td><input type="text" id="sysuser_username" name="sysuserCustom.username" /></td>      </tr>      <tr>        <td>密码</td>        <td><input type="password" id="sysuser_password" name="sysuserCustom.pwd" /></td>      </tr>      <tr>        <td>用户类型</td>        <td><input type="text" id="sysuser_groupid" name="sysuserCustom.groupid" /></td>      </tr>      <tr>        <td><input type="submit" />        </td>      </tr>      </table></form>

2.js
这里不需要js控制,直接用form的action提交即可

3.controller

@RequestMapping("/addsysusersubmit")    public String addsysusersubmit(SysuserCustom sysuserCustom)throws Exception{    //简单打印一个属性      System.out.println(sysuserCustom.getUserid());        return null;    }

这种方法最简单,但个人觉得比较死板,可能我太笨了。这里前端通过form的action将表单数据封装成一个SysuserCustom对象传给后台处理,大伙可深入spring源码了解如何封装的,其实我都没深入过,郁闷。

二、普通的ajax提交

对于此方式,个人不太喜欢,觉得繁琐。
1. jsp

用了一个很简单的form表单,没有贴测试版本,这里排版出问题。

<form id="userform">    <table>      <tr>        <td>用户账号</td>        <td><input type="text" id="sysuser_userid" name="sysuserCustom.userid" /></td>      </tr>      <tr>        <td>用户名</td>        <td><input type="text" id="sysuser_username" name="sysuserCustom.username" /></td>      </tr>      <tr>        <td>密码</td>        <td><input type="password" id="sysuser_password" name="sysuserCustom.pwd" /></td>      </tr>      <tr>        <td>用户类型</td>        <td><input type="text" id="sysuser_groupid" name="sysuserCustom.groupid" /></td>      </tr>      <tr>        <td><a id="submitbtn" href="#" onclick="sysusersave()">提交</a>         </td>      </tr>      </table></form>
  1. js
function sysusersave(){        var userid = $("#sysuser_userid").val() ;        var username = $("#sysuser_username").val() ;        var password = $("#sysuser_password").val() ;        var groupid = $("#sysuser_groupid").val() ;                if(username =="" || userid == "" || groupid =="" || password == ""){            $("#sysuser_msg").html("请将数据填写完整");            return ;        }else{            $("#sysuser_msg").html("");        }        var json = {            "username": username,            "userid":userid,            "groupid":groupid,            "password":password,        };        $.ajax({                        type:"POST",   //post提交方式,默认是get            url:"addsysusersubmit.action",             data:json,             error:function(request) {      // 设置表单提交出错                                 $("#sysuser_msg").html(request); //登录错误提示信息            },            success:function(data) {                  if(data=="false"){                      $("#sysuser_msg").html("系统错误");                      return ;                  }else{                        $.messager.show( {                            msg : '新增成功',                            title : '提示'                        });                  }            }                  }); 

这种方式必须把表单的每一条数据进行获取,并提交给action进行处理。略微繁琐。这里js没有直接放在jsp中,所以ajax中的url直接是url:"addsysusersubmit.action", 而且在使用js之前记得调用jquery。
3. controller

@RequestMapping("/addsysusersubmit")    public String addsysusersubmit(SysuserCustom sysuserCustom)throws Exception{    //简单的打印一个属性     System.out.println(sysuserCustom.getUserid());        return null;    }

三、jQuery的ajax的form提交

下边来使用jquery,个人觉得很方便,具体看下边。
1. jsp

<form id="sysusereditform" name="sysusereditform" action="${pageContext.request.contextPath}/user/sysusersave.action" method="post">    <table>      <tr>        <td>用户账号</td>        <td><input type="text" id="sysuser_userid" name="sysuserCustom.userid" /></td>      </tr>      <tr>        <td>用户名</td>        <td><input type="text" id="sysuser_username" name="sysuserCustom.username" /></td>      </tr>      <tr>        <td>密码</td>        <td><input type="password" id="sysuser_password" name="sysuserCustom.pwd" /></td>      </tr>      <tr>        <td>用户类型</td>        <td><input type="text" id="sysuser_groupid" name="sysuserCustom.groupid" /></td>      </tr>      <tr>        <td><a id="submitbtn" href="#" onclick="sysusersave()">提交</a>         </td>      </tr>      </table></form>
  1. js
//提交表单function sysusersave(){     if($.formValidator.pageIsValid()){//校验表单输入信息是否合法        //使用jquery的ajax from提交,指定from的id和回调方法,提交的url使用提from中的action,参数为空,传递JSON字符串(去掉也不报错)        jquerySubByFId('sysusereditform',sysusersave_callback,null,"json");    }}//from提交的回调方法,data是提交的返回的数据function sysusersave_callback(data){    message_alert(data);}

注意:上面的回调函数,是action处理后,返回JSON的数据传给了参数data。

上面函数具体的实现(没有封装的代码):要传递四个参数

/**form提交(post方式)**formId form Id*callbackfn 回调函数名(要求函数必须有参数且不能多与两个,一个参数时参数为响应文本,两个参数时第一个参数为响应文本)*param 回调函数参数(如果为null,那么调用一个参数的回调函数,否则调用两个参数的回调函数)*/function jquerySubByFId(formId,callbackFn,param,dataType){    var formObj = jQuery("#" + formId);    var options = {    dataType:  ("undefined"!=dataType && null!=dataType)?dataType:"json",            success: function(responseText) {                if(param === null){                    callbackFn(responseText);                }else{                    callbackFn(responseText,param);                }            }    };    formObj.ajaxSubmit(options); }

最方便的在下面,校验表单输入信息是否合法:使用的是jQuery easyui的内置校验器,如下 ,列举出来的对用户账号进行的校验:

$(function (){    /******表单校验*************/    $.formValidator.initConfig({        formID : "sysusereditform",        theme : "Default",        onError : function(msg, obj, errorlist) {            //alert(msg);        }    });    //用户账号    $("#sysuser_userid").formValidator({        onShow : "",        onCorrect:" "    }).inputValidator({        min : 1,        max : 20,        onError : "请输入用户账号(最长10个字符)"    });});

这里贴一个自己的js脚本

    $(function (){        //***********按钮**************        $('#submitbtn').linkbutton({               iconCls: 'icon-ok'          });          $('#closebtn').linkbutton({               iconCls: 'icon-cancel'          });        //**********表单校验*************        $.formValidator.initConfig({            formID : "sysusereditform",            theme : "Default",            onError : function(msg, obj, errorlist) {                //alert(msg);            }        });        //用户账号        $("#sysuser_userid").formValidator({            onShow : "",            onCorrect:"&nbsp;"        }).inputValidator({            min : 1,            max : 20,            onError : "请输入用户账号(最长10个字符)"        });        //用户名称        $("#sysuser_username").formValidator({            onShow : "",            onCorrect:"&nbsp;"        }).inputValidator({            min : 1,            max : 120,            onError : "请输入用户名称(最长60个字符)"        });        //用户类型        $("#sysuser_groupid").formValidator({            onShow : "",            onCorrect:"&nbsp;"        }).inputValidator({            min : 1,            onError : "请选择用户类型"        });        //用户密码        $("#sysuser_password").formValidator({            onShow : "",            onCorrect:"&nbsp;"        }).inputValidator({            min : 1,            max : 10,            onError : "请填写用户密码(最长10个字符)"        });    });    function sysusersave(){        if($.formValidator.pageIsValid()){            jquerySubByFId('sysusereditform',sysusersave_callback,null,"json");        }    }    function sysusersave_callback(data){        var result = getCallbackData(data);        var type = result.type;        _alert(result);        /* if (TYPE_RESULT_SUCCESS == type) {            parent.sysuserquery();            parent.closemodalwindow();        }    */    }    </script>

再详细的jquery,大家可以参考http://blog.csdn.net/tangliuqing/article/details/34399627,我也参考了的。
3. controller
与前面相同,这里不列出了。

到此,完事。我是一只菜鸟,本篇文章如有不妥之处,请大家指正,大神指正,在此谢谢各位。

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台