Day20 NodeJS-Express V

Post Parameter

透过Post方法提出请求时，浏览器会将请求以不同的形式递送，请求的内容会纪录在Content并以ContentType把请求的内容格式纪录在Header，常用的方法有送出网页表单(submit form)请求及以JSON格式字串为内容的请求等，今天会就submit form和JSON格式的请求分别练习。

实作submit form

透过app.use()方法加入Express中的urlencoded()方法，用於解析请求的表单内容。

app.use(express.urlencoded({extended: false}));

定义一个透过post()方法请求的Path，在回呼函式中设定回传内容，由於urlencoded()方法将表单内容解析，可於函式内直接存取表单参数。

app.post("/person", (req, res)=>{
  res.send("Thank you");
  console.log(req.body.firstName);
  console.log(req.body.lastName);
});

在index页面加入表单物件<form>与参数输入项<input>及submit按钮，表单内容设定方法为Post、动作为Path(/person)，参数输入项以name作为参数名称。

<html>
  <head>
    <link href="/assets/style.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <h1>Hello</h1>
    <form method="POST" action="/person">
      First Name: <input type="text" id="firstName" name="firstName" /></br>
      Last Name: <input type="text" id="lastName" name="firstName" /></br>
      <input type="submit" />
    </form>
  </body>
</html>

以浏览器请求初始页面index，输入表单内容後按提交，会对/person提出Post请求。

Post请求回传内容为指定字串，从终端机可以确认console.log()印出来的表单参数内容。

实作JSON Post

在JSON的Post练习中，会在前端使用到jQuery套件，可以透过npm install安装，以Express的use()方法给予node_modules新的Path，并在HTML页面以相对路径引用jQuery套件。

app.use("/sources", express.static(`${__dirname}/node_modules`));

<script src="/sources/jquery/dist/jquery.min.js"></script>

JSON资料格式需透过Express中的json()方法解析，以use()方法加入express.json()方法至主程序。

app.use(express.json());

建立一个Path为personJson的Post方法，设定回应内容为JSON格式资料，并以console.log()印出请求内容，这里的req.body是透过express.json()解析後的请求内容。

app.post("/personJson", (req, res)=>{
  res.setHeader('Content-Type', 'application/json');
  res.send(JSON.stringify({ a: "Thank you for the JSON data" }));
  console.log(req.body.fullName);
});

在前端页面的<body>加入要参数输入项，并透过jQuery的$.ajax()方法提出Post请求，请求成功时将回应内容显示於<label>标签内。

Full Name: 
<input type="text" id="fullName" />
<button id="btnSend">JSON送出</button>
<label id="labName"></label>

<script>
  $("#btnSend").on("click", ()=>{
    $.ajax({
      type: "POST",
      url: "/personJson",
      data: JSON.stringify({fullName: $("#fullName").val()}),
      contentType: "application/json",
      dataType: "json",
      success: (data) => {
        $("#labName").text(data.a);
      }
    });
  });
</script>