JavaScript 基础知识 - Ajax(下)

前面讲到了 Ajax 用 get 的方法来捞取资料，这篇来介绍 post 的方法来传送资料

以下是 HTML 结构:

帐号:<input type="email" name="account" id="account"><br>密码:<input type="password" name="password" id="password"><br><button id="btn">送出</button>

接下来针对每个 DOM 元素来做选取:

let account = document.querySelector('#account');let password = document.querySelector('#password');let btn = document.querySelector('#btn');

为按钮绑上监听:

btn.addEventListener('click',submit);

监听的 function:

function submit(){            // 针对 api 要写入的格式，把 HTML　捞取回来的　value 写成物件            let accountItem = {                email: account.value,                password: password.value            };                        // 接着新增一个 XMLHttpRequest()            const xhr = new XMLHttpRequest();                        // 接着使用 open()，第一个参数改为 post            xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);                        // 不同于 get，post 在传送前要先设定传送资料的格式，我要传过去的是 JSON 格式            xhr.setRequestHeader('Content-type','application/json');                        // 接着须将 JSON 格式转为字串，再传送过去 api            const data = JSON.stringify(accountItem);                        // 接着传送过去            xhr.send(data);                        // 等待资料确定传送过去时触发 onload function            xhr.onload = function(){                // 把 responseText 的文字转为 JSON 格式                const str = JSON.parse(xhr.responseText);                                // 取我们要的属性，用来判断                const data = str.message;                                // 以下就是简单的小判断                if(data == '帐号注册成功'){                    alert('帐号注册成功');                }else{                    alert('帐号注册失败');                }            }        }

上面就是 post 的作法