AJAX- XML物件、post操作-3
Published in
4 min readAug 29, 2020
這篇的話,就會比較詳細的記錄,當上傳的格式(一般表單格式、JSON格式)不一樣的時候,在處理回傳資料的時候,要做什麼不一樣的操作。
例
<form action="index.html"><label for="email">帳號</label><input type="email" name="account" id="email"><br><label for="password">密碼</label><input type="password" name="password" id="password"><br><input type="submit" value="送出" id="submit_btn"></form>
上傳格式: 一般表單格式 撰寫方式
var btn = document.querySelector('#submi_btn');
btn.addEventListener('click',function(){var xhr = new XMLHttpRequest();
xhr.open('post','伺服器端的網址',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
var account = document.querySelector('#email').value;
var password = document.querySelector('#password').value;
var send_content = 'email='+email+'&password='+password;xhr.send(send_content);},false);
上傳格式: JSON 格式撰寫方式
var btn = document.querySelector('#submi_btn');
btn.addEventListener('click',function(){var xhr = new XMLHttpRequest();
xhr.open('post','伺服器端的網址',true);
xhr.setRequestHeader('content-type','application/json');
var email= document.querySelector('#email').value;
var password = document.querySelector('#password').value;
var account = {};
account.email = email;
account.password= password;
var output_data = JSON.stringify(account);xhr.send(output_data);},false);
以上,就是兩種不一樣的格式所做得不一樣的操作
第一個不同點: setRequestHeader的內容不同
第二個不同: 上傳的內容的轉換
在一般表單的格式下,是直接上傳字串給伺服器端,不需要作任何轉換
在JSON格式下,我們會先創一個物件,並在該物件的屬性值中塞入我們想驗證的資料,最後,再利用JSON.stringify將該物件的內容轉成字串的型別後,才將它上傳至伺服器端。
以上,就是記錄不一樣的上傳格式,所要做的操作內容 。