AJAX- XML物件、post操作-3

AJAX

這篇的話，就會比較詳細的記錄，當上傳的格式(一般表單格式、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將該物件的內容轉成字串的型別後，才將它上傳至伺服器端。

以上，就是記錄不一樣的上傳格式，所要做的操作內容 。