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对象可以设置的参数如下:


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秒后,跳出请求
};


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


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

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

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

3.ajaxSubmit()方法代码示例

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


$(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);
	}	
}

利用ajaxSubmit()方法实现Form提交表单后回调的更多相关文章

  1. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

  2. 详解使用postMessage解决iframe跨域通信问题

    这篇文章主要介绍了详解使用postMessage解决iframe跨域通信问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. HTML5表单验证特性(知识点小结)

    这篇文章主要介绍了HTML5表单验证特性的一些知识点,本文通过实例代码截图的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. amazeui页面分析之登录页面的示例代码

    这篇文章主要介绍了amazeui页面分析之登录页面的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. ios – Swift Eureka Form中的循环

    我正在构建一个Eureka表单,并希望在表单中放置一个循环来构建基于数组的步进器列表.我试图使用的代码是:但是,当我这样做时,我在StepperRow行上出现了一个错误:所以看起来Swift不再认为它在形式之内并且正在关注

  6. swift开发笔记9 - 正向和反向页面传参

    在storyboa里segue是这样的:首先看考勤页面(主页面)如何给备注页面传参:在考勤页面(主页面)的viewcontroller中找到prepareForSegue方法,这个方法由xcode自动生成,用于在使用segue跳转前,做一些处理动作:实际上是通过修改segue的目标页面的某个类属性,从而达到传参的目的。

  7. swift 上传图片和参数 upload image with params

    Alamofire.upload(urlRequest.0,urlRequest.1).progress{(bytesWritten,totalBytesWritten,totalBytesExpectedToWrite)inprintln("\(totalBytesWritten)/\(totalBytesExpectedToWrite)")}}

  8. [快速学会Swift第三方库] Kingfisher篇

    [快速学会Swift第三方库]Kingfisher篇Kingfisher是一个轻量的下载和缓存网络图片库。也可以利用kf_setimageWithURL函数的返回值来进行更多的管理操作下载器自定义下载器参数缓存系统自定义缓存参数预取将一些图片在显示到屏幕上之前,先预取到缓存。动态图片加载动态图片只需要加上一行代码,设置imageView为AnimatedImageView,不设置也能加载,但是在动态图片较大的时候推荐进行该设置。深入学习这里列出了Kingfisher大多数操作,如果想要深入学习Kingfi

  9. swift - 回调

    回调函数B不由该函数的实现方A直接调用,而是在特定的事件或条件发生时由另外的一方C调用,用于对该事件或条件进行响应。在swift中有同步和异步两种形式的回调函数:同步回调函数异回调函数步C调用方法B,B可以是函数或者closureC调用函数B并使B在另一线程上运行B返回之前C处理block状态B和C运行在不同的线程,不会互相block。

  10. 6.3 Swift闭包表达式作为回调函数

    /**闭包表达式作为回调函数*//**上节课中呢,说了闭包表达式的语法,将闭包表达式赋给一个常量并不常用,那种调用方式还不如就写成函数的形式*/vararray=[20,2,3,70,8]showArrayprintbubbleSortletintCmp={->Intin//可以修改闭包表达式//letx=a%10//lety=b%10ifa>b{return-1}elseifaIntin//可以修改闭包表达式letx=a%10lety=b%10ifx>y{return-1}elseifxVoid{for

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到<input>中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部