###### tags:`AJAX`
# AJAX - 5.傳統表單輸入-Methods:post

以下紀錄範例是申請帳號,去申請網站資料庫比對,帳號已經被使用還是還可以申請的方式.驗證資料庫是使用六角學院提供的[教學檔](https://github.com/hexschool/nodejs_ajax_tutorial)串接使用,

#### 申請帳號
如果已被其他人使用,回傳**此帳號已被使用**,如果可以使用回傳**帳號註冊成功**

#### 登入
登入一個已存在的帳號,帳號密碼正確跳出**登入成功**,帳號密碼有錯,跳出**此帳號不存在或帳號密碼錯誤**

#### 重點講解
1. 關於表單輸入
2. methods:'post',setRequestHeader
2.1 application/x-www-form-urlencoded（預設值）
2.2 application/json
3. 實作:申請帳號/登入表-使用application/x-www-form-urlencoded格式
3.1 send data方式
5. 實作:申請帳號/登入表-使用application/json格式
4.1 send data方式

### 關於表單輸入
step1.在html貼上表單語法
注意一.form action=""
注意二.送出的btn使用<kbd><input type="submit" value="Submit" class="btn btn-primary"></kbd>

<div class="container w-50  mt-5">
        <h3 class="d-flex justify-content-center">Creat an new account</h3>
        <form action="loginPage.html" class="mt-5 "> 
            <div class="form-group">
              <label for="exampleInputEmail1">Account</label>
              <input type="email" name="account" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
             
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
           
            <div class="d-flex ">
                <input type="submit" value="Sign up " class="btn btn-primary mr-2">
                <input type="submit" value="Login in " class="btn btn-success">
            </div>
          
          </form>
    </div>
    

step2.畫面輸入資料,先輸入一個我們設計假資料
account: [e-mail]
password:adobe1234


step3.點擊submit,url地方會得到以下資料

`loginPage.html?account=adobe%40gmail.com&password=adobe1234`

<kbd>iloginPage.html</kbd>是form action=""接的網址,後面繼續連接的中間是一個問號<kbd>?</kbd>
之後接續<kbd>account=填入帳號</kbd>,後面繼續連接的中間是一個and符號<kbd>&</kbd>,在接著<kbd>password=填入密碼</kbd>

### methods:'post',setRequestHeader
#### application/x-www-form-urlencoded（預設值）

如AJAX - [2.同步&非同步](https://hackmd.io/KxaZa7V0SLebq2cPvi3kWA)
在js檔宣告抓Json,和過往使用<kbd>get</kbd>接收資料不同,這次使用<kbd>post</kbd>提交表單

var xhr = new XMLHttpRequest();
xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);

step4.接著宣告提交表單方式

根據mozilla上[XMLHttpReques](https://)有四種提交方式,這裡使用的是
> 方法：POST；編碼類型：application/x-www-form-urlencoded（預設值）：
>
> Content-Type: application/x-www-form-urlencoded
>
> foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A

使用怎樣提交方式視後端要求而定.

所以我們編寫為

var xhr = new XMLHttpRequest();
xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);
xhr.setRequestHeader('Content-type','application/w-www-form-urllencoded');

#### application/json

如果是使用這種格式提交方式為

var xhr = new XMLHttpRequest();
xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);
xhr.setRequestHeader('Content-type','application/json');

### 3.實作:申請帳號/登入表-使用application/x-www-form-urlencoded格式
<style>
.red{
color:red;
}

.blue{
color:blue;
}
</style>

#### 注意事項
<span class="red">1.送出的button,注意type="button" , 如果是其他狀態如:type="submit",
function無法執行</span>

<span class="blue">
2.sign up和 login 申請帳號和登入兩組的new XMLHttpRequest();大多數程式碼都相同，因此只要帶入對應的參數就可以省略很多相同的程式碼的撰寫
</span>

<span class="red">
3.sign up和 login 兩個function使用的Dom 取得id以及new XMLHttpRequest() 和系統尋應訊息轉字串都應該是同一個代號 ,不然執行會出問題,會點擊sign up button但是接著執行login button function
如sign up和 login的account dom取值都是
</span>

var emailStr = document.querySelector('.account').value;

不需要另外取一個<kbd>emailStr2= document.querySelector('.account').value;</kbd>來區別sign up和 login.

#### 3.1 send data方式
送出帳號密碼後url呈現
`email=adobe%40gmail.com&password=adovbe345`

用程式碼方式寫給Javascript看的方式為

var emailStr = document.querySelector('.account').value;
var passwordStr = document.querySelector('.password').value;
"email=" + emailStr + "&password=" + passwordStr

#### 3.2 [event.onload = function()](https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onload)

要看send到new XMLHttpRequest();資料配對後結果
用 <kbd>event.onload = function()</kbd>

 xhr.onload = function(){ 
 ..........
 }
   

#### 3.3 JSON.parse()將XMLHttpRequest()回傳物件格是訊息轉回文字再取到畫面上

[JSON.parse()解說](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)

xhr.onload = function(){

        // 回傳訊息是字串格式,要把它轉成物件才能透過指令取出來
        var callbackData = JSON.parse(xhr.responseText);
        
        console.log(callbackData);
        alert(callbackData.message);
        
    }

試試看自己創新帳號或登入以下已經存在帳號看結果
email: '[e-mail]',
password: '12345678'

<iframe height="448" style="width: 100%;" scrolling="no" title="Ajax表單驗證-w-www-form-urllencoded格式" src="https://codepen.io/corly74/embed/oNBYdoN?height=448&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/corly74/pen/oNBYdoN'>Ajax表單驗證-w-www-form-urllencoded格式</a> by peiyun
(<a href='https://codepen.io/corly74'>@corly74</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>