jquery.form.js失效问题。

    xiaoxiao2026-03-04  5

    项目中引用 jquery.form.js插件。

    打算用      .ajaxForm(options);    方式提交到后台,但是发现  .ajax 是可以正常交互的,但是  .ajaxform 就是不行。

    首先

    在form表单中,button的type问题。 

    form表单中,button 的 type 有三种值。

    分别是:

    reset : 如果button type="reset"   在没有任何事件 的条件下,会清空当前 form 的所有内容。

    button: 默认,就是一个按钮。       可以在form 上设置onkeydown方法,来监听回车按键(13)来提交表单。

    submit:  1、 如果 type = "submit" ,则,点击该 button (按钮),默认提交当前表单。提交的 默认 路径是,form表单中配置的 action。

    2、如果 在这个form 中,回车键 默认 为提交表单。

    然后

    在  jquery.form.js 插件中,有两种方式提交form表单。

    1)$.fn.ajaxSubmit

    2)$.fn.ajaxForm

    button 的 type 类型的问题。

    如果设置 type = "submit"     ,js方法中,就可以用 .ajaxform。

    如果设置 type = "button"     ,js方法中,就可以用 .ajaxform。

    在form表单中,如果 button 的 type = "submit" ,在绑定的js方法中提交表单,就要用  $("#loginform").ajaxForm(options);

    <button type="submit" class="width-35 pull-right btn btn-sm btn-primary"> <i class="icon-key"></i> 登录 </button>

    在form表单中,如果 button 的 type = "button" ,在绑定的js方法中提交表单,就要用  $("#loginform").ajaxSubmit(options);

    <button type="button" class="width-35 pull-right btn btn-sm btn-primary"> <i class="icon-key"></i> 登录 </button>

    完整代码如下:

    js代码如下:

    function toLoginServer(){ var options = { url : $("#ctx").val() + "/login/validate", success : function(response) { alert(response.isSuccess); if(response.isSuccess = true){ window.location.href= $("#ctx").val() + response.url; }else{ alert(response.error); } }, error : function(){ alert("error"); alert(JSON.stringify(response)); }, type : "post", clearForm : false, timeout : 100000 }; // $("#loginform").ajaxSubmit(options);// type="button" $("#loginform").ajaxForm(options);// type = "submit" };jsp代码如下:

    <form:form id="loginform" commandName="form" > <fieldset> <label class="block clearfix"> <span class="block input-icon input-icon-right"> <form:input path="name" id="name" type="text" class="form-control" placeholder="Username" /> <i class="icon-user"></i> </span> </label> <label class="block clearfix"> <span class="block input-icon input-icon-right"> <form:input path="password" id="password" type="password" class="form-control" placeholder="Password" /> <i class="icon-lock"></i> </span> </label> <label> <span> <span class="lbl input-icon input-icon-right"> <form:input path="validateCode" id="validateCode" name="validateCode" type="text" class="span12" maxlength="15" placeholder="验证码" /> <i class="icon-retweet"></i> </span> <span class="lbl"> <img src="${ctx}/CheckCode" id="yzmPic" οnclick="reloadCheckCode()" style="cursor:pointer;" title="点击刷新验证码"/> <a href="#" οnclick="reloadCheckCode()" data-action="reload"> <i class="icon-refresh"></i> </a> </span> </span> </label> <div class="space"></div> <div class="clearfix"> <label class="inline"> <input type="checkbox" class="ace" /> <span class="lbl"> 记住密码</span> </label> <button type="submit" οnclick="toLoginServer();" class="width-35 pull-right btn btn-sm btn-primary"> <i class="icon-key"></i> 登录 </button> </div> <div class="space-4"></div> </fieldset> </form:form>

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)