LESSON-26 · TOPIC 04

聯絡 POST 與 JSON Envelope

能以 form-urlencoded 的 action=createContact 與 payload JSON 字串傳 submissionId、五個聯絡欄位，並讀取 {ok,data,message,error} 回應。

code-editGAS 商品 GET、訂單 POST 與聯絡 POST 契約｜聯絡 POST 與 JSON Envelope本頁只練一個責任

本頁只練什麼

能以 form-urlencoded 的 action=createContact 與 payload JSON 字串傳 submissionId、五個聯絡欄位，並讀取 {ok,data,message,error} 回應。

同一 transport 的兩種 POST 必須可分流且用一致方式處理錯誤。

要修改的檔案：files/starter/apps-script/Code.gs

定位：先確認 GAS 由 e.parameter.action 與 JSON.parse(e.parameter.payload) 取值，再搜尋前端是否含 Spreadsheet ID、token 或 SpreadsheetApp。｜依 module-4 定位，只修改「聯絡 POST 與 JSON Envelope」的責任。

任務情境

先結果，再原理；完成後要能說出自己看見的證據。

現在的問題

學生正在累積 project/e-commerce，必須在不碰外部服務的前提下完成「聯絡 POST 與 JSON Envelope」。

起始狀態：本地 fixture 已準備聯絡 POST 與 JSON Envelope 的最小資料，尚未執行驗收。

完成後要看到

action、六個 payload 欄位與 ok/data/message/error 四個回應責任均可指出。

驗收證據：count=11、uniqueCount=11、valid=true

何時會用到

第 23–28 章運動器材電商在修改 js/contact.js／apps-script/Code.gs 時。

常見混淆：看到畫面不等於契約通過；仍要核對欄位、操作與證據。

觀念與最小範例

這段程式是理解起點，不是要你直接跳過 Starter。

聯絡 POST 與 JSON Envelope Contact POST and response envelope

能以 form-urlencoded 的 action=createContact 與 payload JSON 字串傳 submissionId、五個聯絡欄位，並讀取 {ok,data,message,error} 回應。

正式說法：Contact POST and response envelope 是把聯絡 POST 與 JSON Envelope 的輸入、責任、輸出與證據固定成可重現契約。

new URLSearchParams({ action:'createContact', payload:JSON.stringify({ submissionId,name,gender,phone,email,message }) })

三步完成本主題

每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。

Step 1｜先看見目前缺口，不急著貼答案。
檔案：files/starter/apps-script/Code.gs　定位：先確認 GAS 由 e.parameter.action 與 JSON.parse(e.parameter.payload) 取值，再搜尋前端是否含 Spreadsheet ID、token 或 SpreadsheetApp。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先確認 GAS 由 e.parameter.action 與 JSON.parse(e.parameter.payload) 取值，再搜尋前端是否含 Spreadsheet ID、token 或 SpreadsheetApp。」目前的缺口。
證據：保存 files/starter/apps-script/Code.gs 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/apps-script/Code.gs，且定位到先確認 GAS 由 e.parameter.action 與 JSON.parse(e.parameter.payload) 取值，再搜尋前端是否含 Spreadsheet ID、token 或 SpreadsheetApp。。
Step 2｜只修改本主題的一個責任。
檔案：files/starter/apps-script/Code.gs　定位：先確認 GAS 由 e.parameter.action 與 JSON.parse(e.parameter.payload) 取值，再搜尋前端是否含 Spreadsheet ID、token 或 SpreadsheetApp。
要做：先核對 Form Data 的 action/payload，再核對成功與失敗 envelope。
預期：action、六個 payload 欄位與 ok/data/message/error 四個回應責任均可指出。
證據：count=11、uniqueCount=11、valid=true
卡住先查：先確認 GAS 由 e.parameter.action 與 JSON.parse(e.parameter.payload) 取值，再搜尋前端是否含 Spreadsheet ID、token 或 SpreadsheetApp。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：files/starter/apps-script/Code.gs　定位：先確認 GAS 由 e.parameter.action 與 JSON.parse(e.parameter.payload) 取值，再搜尋前端是否含 Spreadsheet ID、token 或 SpreadsheetApp。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：action、六個 payload 欄位與 ok/data/message/error 四個回應責任均可指出。
證據：count=11、uniqueCount=11、valid=true
卡住先查：先確認 GAS 由 e.parameter.action 與 JSON.parse(e.parameter.payload) 取值，再搜尋前端是否含 Spreadsheet ID、token 或 SpreadsheetApp。

觀察示範

這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。

聯絡 POST 與 JSON Enveloperuntime fixture · read-only demo

本主題示範畫面：

action-createContact
payload-submissionId
payload-name
payload-gender
payload-phone
payload-email
payload-message
response-ok
response-data
response-message
response-error

尚未執行

驗收證據

勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。

我能指出 files/starter/apps-script/Code.gs 的目前缺口。
我依 Step 2 只修改本主題責任。
我重新載入並保存了這項證據：count=11、uniqueCount=11、valid=true

提示 1｜方向

方向提示：先只找出「聯絡 POST 與 JSON Envelope」的輸入與可觀察輸出，不同時修改別的責任。

提示 2｜關鍵片段

關鍵片段：new URLSearchParams({ action:'createContact', payload:JSON.stringify({ submissionId,name,gender,phone,email,message }) })

提示 3｜完整解答與原因

完整解答與原因：先核對 Form Data 的 action/payload，再核對成功與失敗 envelope。；驗收必須得到「count=11、uniqueCount=11、valid=true」，因為這項證據直接對應本 module 的成功條件。

完成後進入下一階段，或回到入口選下一個 topic。

開始 Starter →回到主題清單