JavaScript 序列化表單

Mehvish Ashiq 2024年2月15日

JavaScript JavaScript Serialize Form

使用 JSON.stringify() 方法序列化 JavaScript 物件
在 JavaScript 中使用 FormData() 序列化表單
在 JavaScript 中使用 XMLSerializer() 序列化表單
在 JavaScript 中使用 jQuery 序列化表單

想知道一個解決方案，讓你可以在使用和不使用 jQuery 的情況下在 JavaScript 中序列化表單？本教程將指導你使用/不使用 jQuery 的 JavaScript 序列化表單。

但在此之前，瞭解 JavaScript Serialize 是很好的。序列化是將資料結構或物件轉換為合適的格式以通過網路傳輸的過程。

我們可以通過呼叫方法 JSON.stringify() 將物件序列化為 JSON 字串，同時呼叫 CSSStyleDeclaration.getPropertyValue() 方法來序列化我們的 CSS 值。

在本教程中，我們將序列化表單和物件。我們將使用 JSON.stringify()、XMLSerializer() 和 FormData 介面在 JavaScript 中進行序列化。

JSON.stringify() 將 JavaScript 值或物件轉換為 JSON 字串。它可以有至少一個，最多三個引數。

這裡，value 引數是必需的，而 replacer 和 space 是可選的。你可以在此處找到有關這些引數的更多資訊。

我們將使用 XMLSerializer() 的 serializeToString() 方法將我們的文件物件模型 (DOM) 樹轉換為 XML 字串。FormData 介面有助於建立鍵值對的集合，該集合描述了具有相應值的表單欄位。

然後，這些很容易使用 XMLHttpRequest.send() 方法傳送。

讓我們從使用 JSON.stringify() 方法序列化物件開始，因為我們將在序列化表單時連線到這個概念。

使用 `JSON.stringify()` 方法序列化 JavaScript 物件

HTML 程式碼：

<!DOCTYPE html>
<html>
 	<head>
 		<title> Serialize Object using JSON</title>
 	</head>
 	<body>
        Type of Resulting String: <span id="resultType"></span><br />
        JSON String: <span id="serialized"></span><br >
        From JSON to JS Object: <span id="object"></span>
 	</body>
</html>

JavaScript 程式碼：

let student = {
  firstname: 'John',
  lastname: 'Christopher',
  semester: 4,
  courses: ['Python', 'JavaScript', 'Java']
};

let jsonString = JSON.stringify(student);
resultType.innerHTML = typeof jsonString;
serialized.innerHTML = jsonString;

let jsonToObject = JSON.parse(jsonString.replace(/&quot;/g, ' '));
object.innerHTML = '{firstname:' + jsonToObject.firstname + ',' +
    'lastname:' + jsonToObject.lastname + ',' +
    'semester: ' + jsonToObject.semester + ',' +
    'courses: [' + jsonToObject.courses + ']}';

輸出：

Type of Resulting String:
string

JSON String:
{"firstname":"John","lastname":"Christopher","semester":4,"courses":["Python","JavaScript","Java"]}

From JSON to JS Object:
{firstname:John,lastname:Christopher,semester: 4,courses: [Python,JavaScript,Java]}

在上面的程式碼中，JSON.stringify() 採用名為 student 的物件並將其轉換為序列化或字串化字串。

我們可以使用 typeof 檢查結果字串的資料型別。

replace() 方法查詢&quote; （這些在雙引號編碼時可見，你可以在控制檯上列印 jsonString 時看到）在一個字串中（這裡的字串是 jsonString）並用空格替換它。

JSON.parse() 方法將字串轉換回物件。

此外，JSON.stringify() 也與原語一起使用。請參閱以下程式碼。

alert(JSON.stringify(3))  // Output: 3
// a string in JSON is still a string, but double-quoted
alert(JSON.stringify('Mehvish'))      // Output: "Mehvish"
alert(JSON.stringify(false));         // Output: false
alert(JSON.stringify([5, 3, 6, 4]));  // Output: [5,3,6,4]

在 JavaScript 中使用 `FormData()` 序列化表單

讓我們從使用 FormData() 和 XMLHttpRequest.send() 方法序列化資料的最簡單方法開始。

HTML 程式碼：

<!DOCTYPE html>
<html>
	 <head>
 		<title>Serialize Form</title>
 	 </head>
 	<body>
 		<form id="form">
 			<label for="firstname">FirstName:</label>
 			<input type="text" name="firstname" id="firstname">
 			<label for="lastname">LastName:</label>
 			<input type="text" name="lastname" id="lastname">
 			<label for="age">Age:</label>
 			<input type="text" name="age" id="age">

          	<button>Submit</button>
 		</form>
 	</body>
</html>

JavaScript 程式碼：

var form = document.querySelector('form');
var data = new FormData(form);

document.addEventListener('submit', function(event) {
  event.preventDefault();
  let url = 'https://jsonplaceholder.typicode.com/posts';
  var xmlhr = new XMLHttpRequest();
  xmlhr.open('POST', url);
  xmlhr.send(data);

  xmlhr.onreadystatechange = function() {
    if (xmlhr.readyState === 4) {
      var response = JSON.parse(xmlhr.responseText);
      if (xmlhr.status === 201) {
        console.log('successful');
      } else {
        console.log('failed');
      }
    }
  }
});

輸出：

successful

如果資料通過網路成功傳送，上面的示例顯示 successful；否則 failed。event.preventDefault() 阻止表單提交到伺服器。

XMLHttpRequest() 用於與網路伺服器交換資料。open() 方法指定請求，而 send() 將 POST 請求傳送到伺服器。

onreadystatechange 用於定義 readyState（保持 XMLHttpRequest 狀態）屬性何時更改。

我們有 HTML 表單，並且希望在每次提交表單時獲取值。在下面的示例中，我們使用 JSONPlaceholder API 的 fetch() 方法檢視名為 FormData() 的本機方法。

HTML 程式碼：（對於下面給出的所有示例，此 HTML 程式碼保持不變）

<!DOCTYPE html>
<html>
 	<head>
 		<title>Serialize Form</title>
 	</head>
 	<body>
 		<form id="form">
 			<label for="firstname">FirstName:</label>
 			<input type="text" name="firstname" id="firstname">
 			<label for="lastname">LastName:</label>
 			<input type="text" name="lastname" id="lastname">
 			<label for="age">Age:</label>
 			<input type="text" name="age" id="age">

			<button>Submit</button>
 		</form>
 	</body>
</html>

JavaScript 程式碼：

var form = document.querySelector('form');
var formData = new FormData(form);

document.addEventListener('submit', function(event) {
  event.preventDefault();
  let url = 'https://jsonplaceholder.typicode.com/posts';

  fetch(url, {
    method: 'POST',
    body: new FormData(event.target),
  })
      .then(function(response) {
        if (response.ok) {
          return response.json();
        }
        return Promise.reject(response);
      })
      .then(function(formData) {
        console.log(formData);
      })
      .catch(function(error) {
        console.warn(error);
      });
});

輸出：

//you get the following Output each time you submit the form
{
  id: 101
}

在上面的示例中，我們使用 fetch() 方法將資料傳送到 JSONPlaceholder API。

為此，我們將 event.target（提交的表單）傳遞給 FormData() 建構函式並將其用作 body 屬性。

fetch() 方法從網路中獲取資源並返回一個 promise，一旦響應準備好/可用，該承諾就會得到滿足。你可以在此處找到有關此方法的更多資訊。

你可能已經在上面的輸出中注意到，我們獲取的不是實際資料而是數字。JSONPlaceholder 接受 JSON 物件，但不接受 FormData。

我們需要使用 for 迴圈將其轉換為物件。因此，新的 JavaScript 程式碼如下所示。

var form = document.querySelector('form');
var data = new FormData(form);

// convert FormData to Object
var serializeFormToObject = function(form) {
  var objForm = {};
  var formData = new FormData(form);
  for (var key of formData.keys()) {
    objForm[key] = formData.get(key);
  }
  return objForm;
};

document.addEventListener('submit', function(event) {
  event.preventDefault();
  let url = 'https://jsonplaceholder.typicode.com/posts';

  fetch(url, {
    method: 'POST',
    body: JSON.stringify(serializeFormToObject(event.target)),
    headers: {'Content-type': 'application/json; charset=UTF-8'}
  })
      .then(function(response) {
        if (response.ok) {
          return response.json();
        }
        return Promise.reject(response);
      })
      .then(function(data) {
        console.log(data);
      })
      .catch(function(error) {
        console.warn(error);
      });
});

輸出：

{
  age: "30",
  firstname: "mehvish",
  id: 101,
  lastname: "ashiq"
}

我們還可以使用 formEntries() 將 FormData 轉換為 Object 而無需任何迴圈。

請參閱以下 JavaScript 程式碼塊。

var form = document.querySelector('form');
var formData = new FormData(form);

document.addEventListener('submit', function(event) {
  event.preventDefault();
  let url = 'https://jsonplaceholder.typicode.com/posts';

  fetch(url, {
    method: 'POST',
    body: JSON.stringify(Object.fromEntries(new FormData(event.target))),
    headers: {'Content-type': 'application/json; charset=UTF-8'}
  })
      .then(function(response) {
        if (response.ok) {
          return response.json();
        }
        return Promise.reject(response);
      })
      .then(function(formData) {
        console.log(formData);
      })
      .catch(function(error) {
        console.warn(error);
      });
});

輸出：

{
  age: "30",
  firstname: "mehvish",
  id: 101,
  lastname: "ashiq"
}

FormData 建構函式在所有現代瀏覽器中都能完美執行，包括 IE 10 或更高版本。但是，Object.formEntries() 在 IE 中不起作用。

現在讓我們在下面給出的示例中使用 FormData() 練習 URLSearchParams。URLSearchParams 用於定義處理 URL 查詢字串的實用函式。

Array.from() 是用於從可迭代物件建立新例項的靜態方法。

JavaScript 程式碼：

var form = document.querySelector('form');

document.addEventListener('submit', function(event) {
  event.preventDefault();
  let url = 'https://jsonplaceholder.typicode.com/posts';

  fetch(url, {
    method: 'POST',
    body: new URLSearchParams(Array.from(new FormData(form))),
  })
      .then(function(response) {
        if (response.ok) {
          return response.json();
        }
        return Promise.reject(response);
      })
      .then(function(formData) {
        console.log(formData);
      })
      .catch(function(error) {
        console.warn(error);
      });
});

輸出：

{
  age: "30",
  firstname: "mehvish",
  id: 101,
  lastname: "ashiq"
}

在 JavaScript 中使用 `XMLSerializer()` 序列化表單

我們已經學習瞭如何使用物件序列化表單。但是，如果我們想將表單序列化為樹資料結構怎麼辦。

為此，我們可以使用 XMLSerializer() 的 serializeToString() 方法。

JavaScript 程式碼：

var form = document.querySelector('form');
document.addEventListener('submit', function() {
  if (window.XMLSerializer) {
    var serializer = new XMLSerializer();
    var str = serializer.serializeToString(form);
    alert(str);
  } else {
    alert(document.body.outerHTML);
  }
});

輸出：

javascript 序列化表單 - xmlserializer

在 JavaScript 中使用 jQuery 序列化表單

如果你對使用 jQuery 沒問題，下面的程式碼很好。但是不要忘記在你的 <head> 標籤中包含 jQuery。

JavaScript 程式碼：

var form = document.querySelector('form');

document.addEventListener('submit', function() {
  event.preventDefault();
  let url = 'https://jsonplaceholder.typicode.com/posts';

  fetch(url, {
    method: 'POST',
    body: $('form').text($('#form').serialize()),
  })
      .then(function(response) {
        if (response.ok) {
          return response.json();
        }
        return Promise.reject(response);
      })
      .then(function(formData) {
        console.log(formData);
      })
      .catch(function(error) {
        console.warn(error);
      });
});

輸出：

firstname=mehvish&lastname=ashiq&age=30

作者： Mehvish Ashiq

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

使用 JSON.stringify() 方法序列化 JavaScript 物件

在 JavaScript 中使用 FormData() 序列化表單

在 JavaScript 中使用 XMLSerializer() 序列化表單

在 JavaScript 中使用 jQuery 序列化表單

使用 `JSON.stringify()` 方法序列化 JavaScript 物件

在 JavaScript 中使用 `FormData()` 序列化表單

在 JavaScript 中使用 `XMLSerializer()` 序列化表單