很久以前,form的post需要刷新页面。
后来有人发明了ajax,又有人开源了jquery,我们的form可以ajax post而无须刷新页面。
var url, method, data, element = $('form');
url = element.attr('action');
method = element.attr('method');
data = $(element[0].elements).serializeArray();
$.ajax({
url:url,
type:method,
data:data
});
但存在一个问题,不支持带有文件上传的form。
<form method="post" action="submit" enctype="multipart/form-data">
<input type="file" name="file"/>
</form>
因为,上传的文件对象无法被序列化。。。
这个问题需要新的DTD来解决,于是就有了FormData的对象。
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
XMLHttpRequest Level 2添加了一个新的接口FormData
利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,
我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单",
比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。
所有主流浏览器的较新版本都已经支持这个对象了,
比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
注意!需要设置ajax参数{cache:false,processData:false,contentType:false}
查看ajax的文档 http://www.w3school.com.cn/jquery/ajax_ajax.asp
于是我们又可以愉快地 form-ajax-post 了
var url, method, data, element = $('form');
url = element.attr('action');
method = element.attr('method');
data = new FormData(element[0]);
$.ajax({
cache:false,processData:false,contentType:false,
url:url,
type:method,
data:data
});
相关推荐
总结来说,C#提供了强大的工具来处理`multipart/form-data`和JSON数据的POST请求。无论是上传文件、发送复杂的业务数据还是两者结合,都可以通过`HttpClient`和相关辅助类轻松完成。在实际开发中,要根据具体需求...
在处理表单数据时,我们常常需要将表单数据序列化以便于发送到服务器,这就是`ajax-axios-url-form-serialize`插件的作用。 `ajax-axios-url-form-serialize`插件专为Axios设计,用于将HTML表单数据转换成URL编码...
在本主题中,我们将深入探讨如何使用C#来模拟POST请求,以便发送JSON和multipart/form-data格式的数据。这两种数据格式在现代网络应用中非常常见,特别是用于API交互和文件上传。 首先,让我们了解JSON(JavaScript...
multipart/form-data是另一种常用的编码格式,它将窗体数据编码为一条消息,页上的每个控件对应消息中的一个部分。这种编码格式可以上传文件,并且可以处理复杂的数据结构。 在实际开发中,我们需要根据具体情况...
<form method="POST" id='form2' name='form2' action="${weiboPublictUrl}" ENCTYPE="multipart/form-data"> <input type="file" name="uploadPath" id="uploadPath" size="62" maxlength="3"/> ...
Ajax-pardot-form-ajax-handler.zip,为salesforce pardot表单设置ajax提交,而不是使用iframe发布,并处理结果。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它...
在IT行业中,网络通信是不可或缺的一部分,而上传文件或发送包含多个部分的数据通常涉及使用`multipart/form-data`编码方式。`multipart/form-data`是一种HTTP请求的Content-Type,它允许我们发送一个请求体,其中...
Power Builder 12.5,使用ole MSXML2.ServerXMLHTTP方式,对接WEB API,以选用JSON和x-www-form-urlencoded方式提交数据,POST/GET方式均可。
使用c#实现的HttpClient拼接multipart/form-data形式参数post提交数据,包含图片内容,有需要的可以下载,希望能帮到有需要的人,
具体来说,multipart/form-data格式的请求体由多个部分组成,每个部分前都有一个分隔符,该分隔符包括两部分:一长串随机生成的分隔符以及两个连续的减号。每个部分都会包含自己的Content-Disposition和Content-Type...
Ajax-ajax-contact-form-wordpress.zip,wordpress的联系人表单,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...
`laravel-form-ajax-validation`项目正是关注这一主题,旨在教你如何在Laravel中实现异步的Ajax表单验证。 **1. Laravel Form Builder** Laravel的Form Builder提供了一种简洁的方式来创建HTML表单。它通过`\...
form-generator项目集成方案 form-generator项目集成方案是指将form-generator项目集成到本地项目中,以便实现表单可视化设计和生成表单代码的功能。该方案主要涉及到 Vue 项目的多页面结构、组件引入、样式文件...
### 解决Java enctype "multipart/form-data" 文件上传传值问题 在Java Web开发中,处理文件上传是一项常见的任务。特别是当涉及到使用`multipart/form-data`作为表单的编码类型时,这种需求更为突出。本文将深入...
比如`data-ajax="true"`启用Ajax处理,`data-ajax-url`指定请求的目标URL,`data-ajax-method`定义HTTP方法(GET或POST)等。 2. **事件处理**:库内部监听`ajaxStart`、`ajaxSend`、`ajaxSuccess`、`ajaxError`等...
vue-ajax-form-component, 用于创建简单AJAX窗体的Vue.js 组件 vue-ajax-form-component用于创建简单AJAX表单的 Vue.js 插件组件。安装通过npm作为 vue-ajax-form-component 可用。 或者作为 inline 脚本包括在 ...
在这个“login-form-using-ajax.rar”压缩包中,我们重点关注的是如何利用Ajax来创建一个动态的登录表单,实现用户在不刷新整个页面的情况下,后台校验用户名是否存在。 首先,让我们理解Ajax的核心概念。Ajax是一...
首先,需要创建一个HttpWebRequest对象,并设置其Method属性为“POST”,ContentType属性为“multipart/form-data”。然后,使用StringBuilder类来构建请求的主体部分,包括边界、文件参数和键值对参数。最后,使用...
本篇文章将详细探讨如何在C#中处理`multipart/form-data`和JSON格式的数据。 `multipart/form-data`是HTTP协议中一种用于上传文件或发送复杂数据(如带有文件的表单数据)的Content-Type。在C#中,我们可以使用...
本压缩包"js-ajax-form-submission-源码.rar"(实际应为"js-ajax-form-submission-源码.zip")可能包含一个用于演示或教学目的的AJAX表单提交的完整示例。下面将详细解释AJAX表单提交的相关知识点。 1. **AJAX基础*...