serialize()与new FormData()

尾调薄雾
• 阅读 4004

form表单ajax提交我们经常用到 serialize与new FormData
serialize()和new FormDate()
javascript序列化表单的方法,
所谓序列化表单就是讲form表单中所有name属性序列化成KEY-VALUE的形式,提交到后台,后台以对象相应的字段接收。

区别

1,new
FormDate()支持表单中文件二进制流形式提交,也就是支持上传文件,serialize()不支持文件二进制流提交。

2,seriaLize()是jquery方法

formData

document.querySelector("#sub").onclick=function(){
var xhr = new XMLHttpRequest();
xhr.open("post",'fromData.php');
// 如果是jq就可以使用表单序列化方法
// 现在在XMLHttpRequest2.0 我们可以使用formData来收集表单数据
// 获取表单
var myform = document.querySelector("#form1");
// 将表单作为参数传递,再创建formData对象
var formdata=new FromData(myform);
// 特点 可以自由的追加参数
formdata.append("address","什么");
xhr.send(fromdata);
xhr.onreadystatechange = function(){
if(xhr.status ==200&&xhr.readyState==4){
console.log(xhr.responseText);
}

serialize

// 1.serialize()这个方法是jq的方式,所以需要使用jq对象来调用

        // 2.这个方法可以将表单中所有name属性的表单元素的值收集,生成 key=value&key=value...这种格式
        // 3.在ajax中,支持两种格式的参数(1.对象 2.参数格式字符串)
        var data = $("#ajaxForm").serialize();
        $.ajax({
            type:'post',
            url:'./server/register.php',
            data:data,
            timeout:3000,
            dataType:'json',
            beforeSend:function(){
                // 用户输入的合法性验证
                // 如果验证通过。开启节流阀。避免用户反复提交
                $('.submit').addClass("disabled").val('正在注册中');

注意

如果form表单中不含文件二进制形式尽量使用serialize()方法,避免一些浏览器不兼容的解码错误。遇到过一次IE浏览器死活不兼容在不包含文件的form表单使用new
formdata序列化的事情,最后换serialize()解决了问题

点赞
收藏
评论区
推荐文章
Karen110 Karen110
4年前
盘点JavaScript 事件和方法提交那些事儿
大家好,我进阶学习者。一、前言提交表单时,会触发submit事件,它通常用于在将表单发送到服务器之前对表单进行校验,或者中止提交,并使用JavaScript来处理表单。form.submit()方法允许从JavaScript启动表单发送。可以使用此方法动态地创建表单,并将其发送到服务器。二、事件:submit1\.提交表单主要有两种方式
Firefox数据抓包分享
啥是POST请求呢?我们在做一些信息提交的时候比如注册,登录这时候我们做的就是POST请求,POST的参数不会直接放在URL上,会以Form表单的形式将数据提交给服务器。我们来登录一下ip.16yun.cn:817还有就是请
Stella981 Stella981
4年前
Play 2.0 用户指南 - 文件上传 -- 针对Scala开发者
   处理文件上传   在form中指定multipart/formdata属性上传文件   上传文件的标准方式是指定form的一个特殊属性multipart/formdata,可以让你混合表单数据和表单文件附件。   开始编写HTML表单:@form(actionrou
Wesley13 Wesley13
4年前
PHP 表单
1、一个简单的HTML表单POSt方法包含两个输入字段和一个提交按钮<html<body<formaction"welcome.php"method"post"Name:<inputtype"text"name"name"<brEmail:<inputty
Easter79 Easter79
4年前
SpringMVC 页面传递参数到controller的五种方式
一共是五种传参方式:一:直接将请求参数名作为Controller中方法的形参public Stringlogin(Stringusername,Stringpassword) :解释:括号中的参数必须与页面Form表单中的name名字相同二:使用@RequestParam绑定请求参数参数值举例:publicStri
Wesley13 Wesley13
4年前
Spring接收参数的几种形式
通过Springcontroller的机制自动绑定参数form表单或者通过url传递过来的参数,如果参数name和预定义的name一致则可以直接绑定。Controller代码@RequestMapping("test")publicvoidtest(intcount){}或者@Req
Stella981 Stella981
4年前
Spring Boot 与 Kotlin 验证web表单信息
在做web开发的时候,我们需要验证表单,确认用户提交的信息是安全的,比如用户名不能超过多少位,密码不能少于多少位等等。那么如何在SpringBoot与Kotlin中验证表单信息?在springmvc工程中,需要检查表单信息,表单信息验证主要通过注解的形式。表单验证下面我们在之前《SpringBoot与kotlin使用
Stella981 Stella981
4年前
CAS 实现站内单点登录及实现第三方 OAuth、OpenId 登录(二)
一、登录表单<form:form id"loginForm" method"post" commandName"${commandName}" htmlEscape"true"    <form:errors path"" element"em" cssClass"" /    <c:if t
Stella981 Stella981
4年前
Django
一:form表单标签的文件上传1:浏览器:html文件<h4form文件上传</h4<formaction"/file_put/"method"post"enctype"multipart/formdata"{%csrf_token
Wesley13 Wesley13
4年前
HTML5的表单input元素的新属性
    知识点《HTML5的表单input元素的新属性》,留待学习分享。。。<!HTML5的表单input元素的新属性Autocomplete:自动完成功能Autofocus:自动获取焦点Form:所属表单Required:必填Pattern:验证input的模式placeholder:提示\
Stella981 Stella981
4年前
Play 2.0 用户指南 - 表单提交和验证 --针对Scala开发者
处理表单提交   定义一个表单   play.api.data包中包含了一些助手方法,用于处理HTTP表单数据提交和验证。操纵表单提交最容易的方式是定义一个play.api.data.Form结构:importplay.api.data._importplay.api.data.F