菜单

用AjaxSubmit()方法实现Form提交表单后回调功效

2018年12月13日 - Ajax

1.      背景

1.form表单中唯有生一个input标签,按掉车键将机关提交表单

近日在工作中,需要贯彻网页端图片上传到FTP服务器的机能。上传文件是用Form表单提交数据的章程为后台传输文件流,在此遭遇了一个题目:后台在处理终结图片及传效能后,需要向前台回传是否达到污染成之状态码、上传失利的错误信息和上传成功后的图形URL。不过,用一般Form表单提交的话,没有法落实回调函数。后来当有些伙伴的介绍下,发现可就此ajaxSubmit()方法来实现这些成效。

当form表单中才出一个<input type=”text” name=’name’
/>时按掉车键将谋面自行将表单提交。

2.      ajaxSubmit()方法简介

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' />
</form>

(1)ajaxSubmit()依赖

倘诺不思为这机动提交可以这么做:

ajaxSubmit()方法是JQuery
Form表单插件中的艺术,要想利用该插件,可以一贯去官网http://jquery.malsup.com/form/下载。使用时,需要在jsp或者html页面上,引入JQuery库和Form插件。

还补偿加一个<input
type=”text”/>按下回车将无汇合自动提交,可是页面及出示一个不知所云的输入框挺别扭,后从网上搜到少只解决办法:

(2)ajaxSubmit()用法简介

(1) 添加一个<input type=’text’
style=’display:none’/>不出示输入框,然后回车后为无会见提交:

ajaxSubmit()方法接受0独或1独参数,当为单个参数时,该参数既好是一个回调函数,也足以是一个options对象。回调函数相比简单,下边要介绍一下options的用法。options对象足以设置的参数如下:

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' />
<input style='display:none' />
</form>
var options = { 
    target: ‘#output1',     //把服务器返回的内容放入id为output1的元素中 
    beforeSubmit: showRequest,   //提交前的回调函数 
    success: showResponse,     //提交后的回调函数 
    url: url,      //默认是form的action,如果声明,则会覆盖 
    type: type,   //默认是form的method,如果声明,则会覆盖 
    dataType: json ,  //接受服务端返回的类型 
    clearForm: true,  //成功提交后,清除所有表单元素的值 
    resetForm: true,  //成功提交后,重置所有表单元素的值 
    timeout: 3000    //限制请求的时间,当请求大于3秒后,跳出请求 
}; 

(2) 添加一个onkeydown事件,然后回车后吧非相会显示:

这个参数里,相比较常用之固然是提交前之回调函数beforeSubmit和付出后的回调函数success。beforeSubmit重倘若为此来交给表单前,校验数据的。示例代码:

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' onkeydown='if(event.keyCode==13) return false;'/>
</form>
function validate(formData, jqForm, options) { 
    /* 
    在这里需要对表单元素进行验证,如果不符合规则, 
    直接返回false来阻止表单提交。 
    */ 
    var queryString = $.param(formData);    //组装数据 
    return true; 
} 

ps: 我于此
event.keyCode==13象征并未看了解,只是了然为判断标准,但现实要无懂.假设阁下精晓,还呼吁不吝赐教.

此回调函数有两只参数,formData是数组对象,jqForm是一个JQuery对象,它包裹了表单的素,options参数就是options对象。在这回调函数中,只要非返false,表单都用于允许提交;如若回去false,则会堵住表单提交。

设若想补充加回车事件,可以当onkeydown事件中长判断提交表单:

success是付后底回调函数,有4个参数responseText,statusText,xhr,和$form。其中,相比常用的是前边片只。statusText只是一个回去状态,例如success,error等。responseText引导着服务器重返的数码内容,它会基于设置的options对象吃的dataType属性来回到相应格式的情节。

<form id='form1' action='a1.jsp' method='post'>
<input style='display:none' />
<input type='text' name='name' onkeydown='if(event.keyCode==13){gosubmit();}' />
</form>

3.      ajaxSubmit()方法代码示例

2.有关是否用活动提交

下是ajaxSubmit()方法运用的一个模板。

俺们有时候想回车键敲在文本框(input
element)里来交付表单(form),但有时还要不期望那样。比如寻找行为,希望输入了要词之后一贯按掉车键顿时付给表单,而微复杂表单,可能要避回车键误操作以未形成表单填写的时候就点了表单提交。

$(function(){   
    var options = {  
      type: 'POST', 
      url: '提交路径', 
      success:showResponse,  
      dataType: 'json', 
      error : function(xhr, status, err) {       
        alert("操作失败"); 
      } 
    };  
    $("##Form名称").submit(function(){  
      $(this).ajaxSubmit(options);  
      return false;  //防止表单自动提交 
    }); 
}); 
/** 
 * 保存操作 
 */ 
function toSave(){  
  $("#Form名称").submit(); 
} 
/** 
 * 保存后,执行回调 
 * @param responseText 
 * @param statusText 
 * @param xhr 
 * @param $form 
 */ 
function showResponse(responseText, statusText, xhr, $form){   
  if(responseText.status == "0"){ 
    /** 
    * 请求成功后的操作 
    */ 
    alert(responseText.msg); 
  } else { 
    alert(responseText.msg); 
  }   
} 

如若控制这多少个行为,不需借助JS,浏览器就帮我们做了这多少个处理,这里总计几长规则:

总结

万一表单里出一个type=”submit”的按钮,回车键生效。

以上所述是有点编为我们介绍的运AjaxSubmit()方法实现Form提交表单后回调功效,希望对我们具有助,假若大家发生外问题请于自家留言,小编会及时过来大家之。在此也非凡感谢我们对剧本的拙网站的支撑!

假设表单里才生一个type=”text”的input,不管按钮是啊type,回车键生效。

你或许感兴趣之稿子:

若按钮无是由此input,而是用button,并且没有加type,IE下默认为type=button,FX默看type=submit。

外表单元素如textarea、select不影响,radio
checkbox不影响触发规则,但自我在FX下会响应回车键,在IE下非响应。

type=”image”的input,效果一样于type=”submit”,不知晓为啥会统筹这样平等种植type,不推荐应用,应该据此CSS添加背景图合适些。

如上所述是稍微编为我们介绍的Form表单按回车自动提交表单,希望对我们持有援救,如若我们来任何疑窦请给我留言,小编会及时苏醒我们的。在那一个为相当感谢我们对台本的家网站的补助!

君或许感兴趣的章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图