1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// <-----html----->
p

// <-----js----->
let xhr = new XMLHttpRequest();  //0
xhr.open("GET","https://hexschool.github.io/ajaxHomework/data.json",true);  //1
xhr.send(null);  //2
xhr.onload = function(){  //4
  let data = JSON.parse(xhr.responseText);
  let p = document.querySelector("p");
  p.textContent = data[0].name;
}
// <-----結果----->
//文字<p>顯示  //王小名

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// <-----html----->
form(action="index.html")
  input(type="text" name="account")
  input(type="password" name="password")
  input(type="submit" value="送出")

// <-----結果----->
//帳號輸入  //test123@gmail.com
//密碼輸入  //abc45678
//點擊"按鈕"時，URL最後方出現...
//index.html?account=test123%40gmail.com&password=abc45678

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// <-----html----->
form
  label 帳號
  input(type="text" name="account")
  br
  label 密碼
  input(type="password" name="password")
  input(type="submit" value="註冊")

// <-----js----->
let account = document.querySelectorAll("input")[0];
let password = document.querySelectorAll("input")[1];
let submit = document.querySelectorAll("input")[2];

submit.addEventListener("click",function(event){
  event.preventDefault();
  let xhr = new XMLHttpRequest();
  //建立XMLHttpRequest來向伺服器發送請求
  xhr.open("POST","https://hexschool-tutorial.herokuapp.com/api/signup");
  //向該網址傳送POST請求
  xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
  //傳送JSON格式
  let accountVal = account.value;
  let passwordVal = password.value;
  xhr.send(`email=${accountVal}&password=${passwordVal}`);
  //將輸入框裡的值組成物件並轉成"字串"後傳送
  xhr.onload = function(){
    //當ajax執行完成時
    let str = JSON.parse(xhr.responseText);
    //將回傳的"字串"解析
    alert(str.message);
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// <-----html----->
form
  label 帳號
  input(type="text" name="account")
  br
  label 密碼
  input(type="password" name="password")
  input(type="submit" value="登入")

// <-----js----->
let account = document.querySelectorAll("input")[0];
let password = document.querySelectorAll("input")[1];
let submit = document.querySelectorAll("input")[2];

submit.addEventListener("click",function(event){
  event.preventDefault();
  let xhr = new XMLHttpRequest();
  //建立XMLHttpRequest來向伺服器發送請求
  xhr.open("POST","https://hexschool-tutorial.herokuapp.com/api/signin");
  //向該網址傳送POST請求
  xhr.setRequestHeader("content-type","application/json");
  //傳送JSON格式
  let accountValue = account.value;
  let passwordValue = password.value;
  let data = {
    email: accountValue,
    password: passwordValue
  }
  xhr.send(JSON.stringify(data));
  //將輸入框裡的值組成物件並轉成"字串"後傳送
  xhr.onload = function(){
    //當ajax執行完成時
    let str = JSON.parse(xhr.responseText);
    //將回傳的"字串"解析
    alert(str.message);
  }
});

1
2
3
4
5
6
7
8

let url = "https://jsonplaceholder.typicode.com/todos/1";
let xhr = new XMLHttpRequest();
xhr.open("GET",url);
xhr.send(null);
xhr.onload = function(){
  let data = JSON.parse(xhr.responseText);
  console.log(data);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/** 方法一 **/
let url = "https://jsonplaceholder.typicode.com/todos/1";
$.ajax({
  url: url,
}).done(function(data){
  console.log(data);
});

/** 方法二 **/
let url = "https://jsonplaceholder.typicode.com/todos/1";
$.ajax({
  url: url, 
  dataType: "json",
  success: function(data){
    console.log(data);
  }
});

1
2
3
4
5

let url = "https://jsonplaceholder.typicode.com/todos/1";
axios.get(url)
  .then((data) => {
    console.log(data.data);
  });