serialize()與new FormData()

ranwu 發布于2019-08-23 16:23 / 2530人閱讀

摘要：區別，支持表單中文件二進制流形式提交，也就是支持上傳文件，不支持文件二進制流提交。避免用戶反復提交正在注冊中注意如果表單中不含文件二進制形式盡量使用方法，避免一些瀏覽器不兼容的解碼錯誤。

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（）解決了問題

云服務器 GPU云服務器 blank與new區別 formdata serialize formdata上傳文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102978.html

new FormData() - FormData對象的作用及用法

摘要：一概述對象的使用用一些鍵值對來模擬一系列表單控件即把中所有表單元素的與組裝成一個異步上傳二進制文件。二使用對象的操作方法，全部在原型中，自己本身沒任何的屬性及方法。一、概述 FormData 對象的使用： 1.用一些鍵值對來模擬一系列表單控件：即把form中所有表單元素的name與value組裝成一個queryString 2. 異步上傳二進制文件。二、使用 1.FormDat...

EdwardUp 2019-08-21 17:57 評論0 收藏0
javascript圖片上傳相關資料整理

摘要：說明使用獲取表單的數據，不同通過和獲取值上傳圖片這三個參數必須配置該處使用了來獲取文件上傳的進度本人沒實驗，待測圖片壓縮圖片上傳的多種方式一.使用Form表單，enctype=multipart/form-data 說明：1.監聽input上的change事件可以實現自動上傳到服務器2.服務器端通過name字段，獲取上傳圖片的信息 3.數據信...

liukai90 2019-08-22 10:49 評論0 收藏0
form表單那點事兒(下) 進階篇

摘要：在表單提交時，瀏覽器會自動進行一系列的校驗工作，沒有通過校驗的表單是無法提交到服務器的。而方法提交表單，會在請求中發送表單字段鍵值對。表單提交事件表單提交到服務器時，會觸發事件。上一篇主要溫習了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。表單操作取值用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單： ...

jerryloveemily 2019-08-01 15:24 評論0 收藏0