serialize()与new FormData()

2024年5月2日 154次阅读 来源: yang

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（）处理了题目

    原文作者：yang
    原文地址: https://segmentfault.com/a/1190000018657186
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞