利用ajaxSubmit()方法实现Form提交表单后回调

前端之家收集整理的这篇文章主要介绍了利用ajaxSubmit()方法实现Form提交表单后回调前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.背景

最近在工作中,需要实现网页端图片上传到FTP服务器的功能上传文件是用Form表单提交数据的方法后台传输文件流,在此遇到了一个问题:后台在处理完图片上传功能后,需要向前台回传是否上传成功的状态码、上传失败的错误信息和上传成功后的图片URL。但是,用普通Form表单提交的话,没有办法实现回调函数。后来在小伙伴的介绍下,发现可以用ajaxSubmit()方法来实现此功能

2.ajaxSubmit()方法简介

(1)ajaxSubmit()依赖

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

(2)ajaxSubmit()用法简介

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


  1. var options = {
  2. target: ‘#output1’,//把服务器返回的内容放入id为output1的元素中
  3. beforeSubmit: showRequest,//提交前的回调函数
  4. success: showResponse,//提交后的回调函数
  5. url: url,//默认是form的action,如果声明,则会覆盖
  6. type: type,//默认是form的method,如果声明,则会覆盖
  7. dataType: json,//接受服务端返回的类型
  8. clearForm: true,//成功提交后,清除所有表单元素的值
  9. resetForm: true,//成功提交后,重置所有表单元素的值
  10. timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求
  11. };


这些参数里,比较常用的就是提交前的回调函数beforeSubmit和提交后的回调函数success。beforeSubmit主要是用来提交表单前,校验数据的。示例代码


  1. function validate(formData,jqForm,options) {
  2. /*
  3. 在这里需要对表单元素进行验证,如果不符合规则,
  4. 直接返回false来阻止表单提交。
  5. */
  6. var queryString = $.param(formData); //组装数据
  7. return true;
  8. }

这个回调函数有三个参数,formData是数组对象,jqForm是一个JQuery对象,它封装了表单的元素,options参数就是options对象。在这个回调函数中,只要不返回false,表单都将被允许提交;如果返回false,则会阻止表单提交。

success是提交后的回调函数,有4个参数responseText,statusText,xhr,和$form。其中,比较常用的是前两个。statusText只是一个返回状态,例如success,error等。responseText携带着服务器返回的数据内容,它会根据设置的options对象中的dataType属性来返回相应格式的内容

3.ajaxSubmit()方法代码示例

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


  1. $(function(){
  2. var options = {
  3. type: 'POST',url: '提交路径',success:showResponse,dataType: 'json',error : function(xhr,status,err) {
  4. alert("操作失败");
  5. }
  6. };
  7. $("##Form名称").submit(function(){
  8. $(this).ajaxSubmit(options);
  9. return false; //防止表单自动提交
  10. });
  11. });
  12.  
  13. /**
  14. * 保存操作
  15. */
  16. function toSave(){
  17. $("#Form名称").submit();
  18. }
  19.  
  20. /**
  21. * 保存后,执行回调
  22. * @param responseText
  23. * @param statusText
  24. * @param xhr
  25. * @param $form
  26. */
  27. function showResponse(responseText,statusText,xhr,$form){
  28. if(responseText.status == "0"){
  29. /**
  30. * 请求成功后的操作
  31. */
  32. alert(responseText.msg);
  33. } else {
  34. alert(responseText.msg);
  35. }
  36. }

猜你在找的Ajax相关文章