XMLHttpRequest
已经推出很长时间了,W3C 对此引入了一些很好的特性,阮一峰有一篇很好的文章对此进行了汇总式的介绍 XMLHttpRequest Level 2 使用指南
。
在实际使用中排除那些落伍的浏览器,最简单的使用方法就是
- 用标准的 HTML 语法生成 FORM 表单
- hander 表单的 submit 事件,用 FormData 生成 XMLHttpRequest 提交数据,进行提交, 向submit 返回 false
- 处理 XMLHttpRequest 结果
这样就完成了ajax方式的表单提交。当然这是支持文件上传
的。如果我们使用 jQuery.ajax 代码大概就是这个样子
$('yourform').submit(function(){
var formdata=new FormData(this);
$.ajax({
type:'POST',
url:'/yourpath',
data:formdata,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType:false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData:false
}).then(function(){
//doneCal
},function(){
//failCal
});
return false;
});
标准之下就是这么简单。
有很多时候是可以要求用户使用现代浏览器的。比如对于编辑,对应定制的企业用户。
分享到:
相关推荐
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。 最简单的情况下,$.ajax()可以不带任何参数直接使用。 注意,所有的选项都可以...
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。...
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个”表单”。 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明。 但上传文件部分只有底层的...
XMLHttpRequest中文参考手册,学习AJAX的必备良品
被请求者XMLHttpRequest + FormData 包装器,可轻松嵌入 AJAX。应用程序接口新的创建一个新的 Requeste 实例。 new Requeste ( string method , string uri ) ; 例子: var req = new Requeste ( 'GET' , '...
ajax帮助手册...chm格式.......
利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二...
与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件。 jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form ...
Ajax 简单实例 XMLHttpRequest对象的创建,请求,发送,仅供初学者
有一个场景需求是根据服务器返回的不同数据类型,前端进行不同的响应,这里记录下如何使用$.ajax实现该需求。 $.ajax({ ‘url‘: ‘GetWatermarkInfo.ashx‘, ‘type‘:‘post‘, ‘data‘: { ‘bgstyle‘: bgstyle...
Jquery的$.ajax的用法: jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据,这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况...
jQuery.ajax( url, [ settings ] ) 返回: jqXHR 执行一个异步的HTTP(Ajax)的请求。 version added: 1.5jQuery.ajax( url, [ settings ] ) url一个用来包含发送请求的URL字符串。 settings一个以"{键:值}...
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。 $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 ...
1. JQUERY.AJAX没有监听上传进度的ONPROGRESS事件。 2. XMLHTTPREQUEST(XHR)跨域 问题解答 1. JQUERY没有给出ONPROGRESS事件的接口,必须从其他接口中找到原生XHR对象。 jQuery.ajax()返回的是jqXHR对象。jqXHR模仿...
本文实例为大家分享了基于jQuery Ajax实现上传文件的关键代码,供大家参考,具体内容如下 JS代码: //保存 function btnAdd() { var formData = new FormData($("#frm")[0]); $.ajax({ url: "/Admin/...
AJAX(XMLHttpRequest)进行跨域请求方法详解
jQueryBifröst 使用隐藏的iframe技术发出异步请求,甚至可以从根本不支持FormData , File API或XMLHttpRequest的浏览器发送文件和数据。 (缩小并压缩成1.3kb)设置加载所需的文件jquery.js和jquery.bifrost.js 。...
未初始化、初始化、发送数据、数据传送中、完成。数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据。
一:jQuery.ajax语法基础 jQuery.ajax([options]) 概述:通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。使用这个方法...