JavaScript – Fetch API

//以下是GET Method(Default 是GET) 其他的有 POST,PUT,DELETE,HEAD
fetch('url').then((response) => {    //response的屬性有 "ok"成功時true,不成功false  status,成功為200, statusText成功為ok...
    //回傳json, 如果是text 就改為.text()
    response.json().then(data => {
       console.log(data);
    });
}).catch(err){
     console.error(err);
}

fetch('url', {
   method:"POST",
   body: JSON.stringify({ name: "elvis", age: "18" })       //前面可再加上 encodeURI() 做轉碼,防止傳送中文時出現亂碼, POST,PUT,DELETE時必需
}).then((response) => {
    return response.json(); //再return 會回傳到下面的then
}).then(result => {   //這裡接收上面的回傳
    console.log(result);   
});

const postURL = (name,age) => {
   return fetch('url', {
      method:"POST",
      body: JSON.stringify({ name: "elvis", age: "18" })       //前面可再加上 encodeURI() 做轉碼,防止傳送中文時出現亂碼, POST,PUT,DELETE時必需
   }).then((response) => {
       return response.json(); //再return 會回傳到下面的then
   }).then(result => {   //這裡接收上面的回傳
       console.log(result);   
   });
}
postURL('elvis',18);
console.log("test");
postURL('noah',19);
//輸出會是:
test
{name:"elvis", age:18}
{name:"noah", age:19}

~async function(){   //直接執行的寫法
   const postURL = (name,age) => {
      return fetch('url', {
         method:"POST",
         body: JSON.stringify({ name: "elvis", age: "18" })       //前面可再加上 encodeURI() 做轉碼,防止傳送中文時出現亂碼, POST,PUT,DELETE時必需
      }).then((response) => {
          return response.json(); //再return 會回傳到下面的then
      }).then(result => {   //這裡接收上面的回傳
          console.log(result);   
      });
   }
   await postURL('elvis',18);
   console.log("test");
   await postURL('noah',19);
}();
//輸出會是:
{name:"elvis", age:18}
test
{name:"noah", age:19}
// 或者以下方法
async function delayFunction(){
    let response = await fetch('url');
    await response.json().then(data => {
      console.log(data);
   }).catch(err => {
      console.error(err);
   });
   console.log('done');
};
//正常的輸出次序為
//1. console.log(data);
//2. console.log('done');

<?php
$data = json_decode(file_get_contents('php://input'), true);

$name = $data["name"];
$age = $data["age"];

$return = "你所輸入的名稱為 $name, 歲數為 $age";

echo json_encode($return);

?>

let formData = new FormData();

formData.append("name", "elvis");
formData.append("age", "18");

let photo = document.querySelector("#your_input_element").files[0];

formData.append("photo", photo);

fetch(url, {
  'method':'post',
  'Content-Type': 'multipart/form-data',
   //如果FormData 包括了檔案的傳送則需使用
   //'Content-Type': 'multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD'
  body: formData,
}).then((response) => {
  return response.json(); //視乎Server的回傳格式, 文字請改為 text()
}).then(
  result => {
    console.log(result);
  }
).catch(
  error => console.log("錯誤:", error);
)

<?php

$name = $_POST['name'];
$age = $_POST['age'];
$photo = $_FILES["photo"];

$upload_path = "photo/";
$file_name = basename($_FILES["photo"]["name"]);

$return = "你所輸入的名稱為 $name, 歲數為 $age";

if(move_uploaded_file($_FILES["photo"]["tmp_name"], $upload_path . $file_name)){

  $return .= "並上載成功";
}
else{
  $return .= "但上載失敗";
  //有可能是權限不足導致上載不成功
}

echo json_encode($return);


?>