{"id":15390,"date":"2025-03-30T08:42:47","date_gmt":"2025-03-30T00:42:47","guid":{"rendered":"https:\/\/fgchen.com\/wpedu\/?p=15390"},"modified":"2026-03-30T14:28:23","modified_gmt":"2026-03-30T06:28:23","slug":"%e5%b0%87google-sheets%e5%81%9a%e7%82%ba%e8%87%aa%e8%a3%bd%e7%b7%9a%e4%b8%8a%e8%a1%a8%e5%96%ae%e7%9a%84%e8%b3%87%e6%96%99%e5%84%b2%e5%ad%98","status":"publish","type":"post","link":"https:\/\/fgchen.com\/wpedu\/2025\/03\/%e5%b0%87google-sheets%e5%81%9a%e7%82%ba%e8%87%aa%e8%a3%bd%e7%b7%9a%e4%b8%8a%e8%a1%a8%e5%96%ae%e7%9a%84%e8%b3%87%e6%96%99%e5%84%b2%e5%ad%98\/","title":{"rendered":"\u5c07Google Sheets\u505a\u70ba\u81ea\u88fd\u7dda\u4e0a\u8868\u55ae\u7684\u8cc7\u6599\u5132\u5b58"},"content":{"rendered":"\n<p>Web \u8868\u55ae\u9001\u51fa\u8cc7\u6599\u4e26\u5132\u5b58\u5230\u5f8c\u7aef\u7684\u65b9\u6cd5\u6709\u8a31\u591a\u7a2e\uff0c\u4e3b\u8981\u53ef\u5206\u70ba\u4ee5\u4e0b\u5e7e\u985e\uff1a<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. \u5132\u5b58\u5230\u8cc7\u6599\u5eab\uff08Database\uff09<\/strong><\/h2>\n\n\n\n<p><strong>\u9069\u7528\u5834\u666f<\/strong>\uff1a\u9700\u8981\u9577\u671f\u5b58\u53d6\u3001\u67e5\u8a62\u3001\u5927\u91cf\u6578\u64da\u8655\u7406<br><strong>\u6280\u8853\u9700\u6c42<\/strong>\uff1a\u4f3a\u670d\u5668 + \u8cc7\u6599\u5eab\uff08SQL \u6216 NoSQL\uff09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u5e38\u898b\u65b9\u6cd5<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>MySQL \/ PostgreSQL \/ MariaDB<\/strong>\uff08\u95dc\u806f\u5f0f\u8cc7\u6599\u5eab\uff09\n<ul class=\"wp-block-list\">\n<li>\u9700\u8981\u5f8c\u7aef\u8a9e\u8a00\uff08PHP\u3001Node.js\u3001Python\u3001Java \u7b49\uff09\u63a5\u6536\u8868\u55ae\u8cc7\u6599\uff0c\u4e26\u5b58\u5165\u8cc7\u6599\u5eab<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>MongoDB \/ Firebase Firestore<\/strong>\uff08NoSQL \u8cc7\u6599\u5eab\uff09\n<ul class=\"wp-block-list\">\n<li>\u9069\u5408\u52d5\u614b\u8cc7\u6599\uff0c\u4f8b\u5982\u5373\u6642\u804a\u5929\u3001\u65e5\u8a8c\u8a18\u9304\u7b49<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u7c21\u55ae\u6d41\u7a0b<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u524d\u7aef<\/strong> \u4f7f\u7528 AJAX\/Fetch \u63d0\u4ea4\u8868\u55ae\u8cc7\u6599<\/li>\n\n\n\n<li><strong>\u5f8c\u7aef\uff08\u5982 PHP, Node.js, Python\uff09<\/strong> \u8655\u7406\u8cc7\u6599<\/li>\n\n\n\n<li><strong>\u8cc7\u6599\u5eab\uff08MySQL, MongoDB\uff09<\/strong> \u5b58\u5132\u8cc7\u6599<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u7bc4\u4f8b\uff08PHP + MySQL\uff09<\/strong><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n$conn = new mysqli(\"localhost\", \"username\", \"password\", \"database\");\n\n$name = $_POST[\"name\"];\n$email = $_POST[\"email\"];\n\n$sql = \"INSERT INTO users (name, email) VALUES ('$name', '$email')\";\n$conn->query($sql);\n$conn->close();\n?>\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. \u5132\u5b58\u5230 Google \u8868\u55ae\uff08Google Forms + Google Sheets\uff09<\/strong><\/h2>\n\n\n\n<p><strong>\u9069\u7528\u5834\u666f<\/strong>\uff1a\u5c0f\u578b\u8868\u55ae\u3001\u5feb\u901f\u6536\u96c6\u8cc7\u6599\u3001\u7121\u9700\u81ea\u5efa\u4f3a\u670d\u5668<br><strong>\u6280\u8853\u9700\u6c42<\/strong>\uff1aGoogle Forms + Google Apps Script<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u5be6\u73fe\u65b9\u5f0f<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u76f4\u63a5\u4f7f\u7528 Google Forms \u63d0\u4ea4<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5efa\u7acb Google Forms\uff0c\u53d6\u5f97 <code>formResponse<\/code> \u9023\u7d50\uff0c\u524d\u7aef <code>&lt;form&gt;<\/code> \u76f4\u63a5\u63d0\u4ea4\u8cc7\u6599\uff08\u7121\u6cd5\u81ea\u8a02\u56de\u61c9\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u900f\u904e Google Apps Script\uff08GAS\uff09+ AJAX<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u81ea\u8a02 Google Apps Script \u63a5\u6536\u8cc7\u6599\u4e26\u5b58\u5165 Google Sheets\uff08\u53ef\u5ba2\u88fd\u5316\u56de\u61c9\uff09<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u7bc4\u4f8b\uff08AJAX \u9001\u8cc7\u6599\u5230 GAS Web API\uff09<\/strong><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">fetch(\"\u4f60\u7684Google Apps Script URL\", {\n    method: \"POST\",\n    body: new FormData(document.getElementById(\"form\"))\n})\n.then(response => response.text())\n.then(data => alert(\"\u6210\u529f\u63d0\u4ea4\uff1a\" + data));\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. \u5132\u5b58\u5230 Firebase\uff08Google \u96f2\u7aef\u8cc7\u6599\u5eab\uff09<\/strong><\/h2>\n\n\n\n<p><strong>\u9069\u7528\u5834\u666f<\/strong>\uff1a\u5373\u6642\u61c9\u7528\u3001\u7121\u5f8c\u7aef\u958b\u767c\u9700\u6c42\u3001\u884c\u52d5\u61c9\u7528\u6574\u5408<br><strong>\u6280\u8853\u9700\u6c42<\/strong>\uff1aFirebase Database \u6216 Firestore<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u7bc4\u4f8b\uff08Firebase Firestore\uff09<\/strong><\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { getFirestore, collection, addDoc } from \"firebase\/firestore\"; \n\nconst db = getFirestore();\nasync function saveData() {\n    await addDoc(collection(db, \"users\"), {\n        name: \"\u5f35\u4e09\",\n        email: \"zhangsan@example.com\"\n    });\n}\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. \u5132\u5b58\u5230 JSON \u6a94\u6848\uff08\u5f8c\u7aef API \u5b58 JSON\uff09<\/strong><\/h2>\n\n\n\n<p><strong>\u9069\u7528\u5834\u666f<\/strong>\uff1a\u8f15\u91cf\u7d1a\u61c9\u7528\u3001\u7121\u8cc7\u6599\u5eab\u9700\u6c42\u3001\u53ef\u7528\u65bc\u975c\u614b\u7db2\u7ad9<br><strong>\u6280\u8853\u9700\u6c42<\/strong>\uff1a\u5f8c\u7aef\uff08Node.js\/Python\/PHP\uff09\u5132\u5b58 JSON \u6a94\u6848<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u7bc4\u4f8b\uff08Node.js Express\uff09<\/strong><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const fs = require(\"fs\");\nconst express = require(\"express\");\nconst app = express();\napp.use(express.json());\n\napp.post(\"\/save\", (req, res) => {\n    let data = req.body;\n    fs.writeFileSync(\"data.json\", JSON.stringify(data, null, 2));\n    res.send(\"\u5132\u5b58\u6210\u529f\uff01\");\n});\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5. \u76f4\u63a5\u5bc4 Email \u5132\u5b58\uff08Mail Server\uff09<\/strong><\/h2>\n\n\n\n<p><strong>\u9069\u7528\u5834\u666f<\/strong>\uff1a\u806f\u7d61\u8868\u55ae\u3001\u5ba2\u670d\u56de\u8986\u3001\u4e0d\u9700\u8981\u9577\u671f\u5b58\u53d6<br><strong>\u6280\u8853\u9700\u6c42<\/strong>\uff1aSMTP \u4f3a\u670d\u5668\uff08\u5982 Gmail\u3001SendGrid\uff09<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u7bc4\u4f8b\uff08PHP \u4f7f\u7528 PHPMailer \u5bc4\u4fe1\uff09<\/strong><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">use PHPMailer\\PHPMailer\\PHPMailer;\n\n$mail = new PHPMailer();\n$mail->isSMTP();\n$mail->Host = \"smtp.gmail.com\";\n$mail->SMTPAuth = true;\n$mail->Username = \"your-email@gmail.com\";\n$mail->Password = \"your-password\";\n$mail->setFrom(\"your-email@gmail.com\", \"Web Form\");\n$mail->addAddress(\"recipient@example.com\");\n$mail->Subject = \"\u65b0\u8868\u55ae\u63d0\u4ea4\";\n$mail->Body = \"\u59d3\u540d: $_POST[name]\\nEmail: $_POST[email]\";\n$mail->send();\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>6. \u900f\u904e No-Code \u670d\u52d9\uff08\u5982 Airtable \/ Zapier\uff09<\/strong><\/h2>\n\n\n\n<p><strong>\u9069\u7528\u5834\u666f<\/strong>\uff1a\u7121\u9700\u5beb\u7a0b\u5f0f\u3001\u5feb\u901f\u90e8\u7f72<br><strong>\u6280\u8853\u9700\u6c42<\/strong>\uff1aAirtable API \u6216 Zapier Webhook<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u7bc4\u4f8b\uff08Airtable API \u76f4\u63a5\u5b58\u8cc7\u6599\uff09<\/strong><\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">fetch(\"https:\/\/api.airtable.com\/v0\/YOUR_BASE_ID\/Table1\", {\n    method: \"POST\",\n    headers: {\n        \"Authorization\": \"Bearer YOUR_API_KEY\",\n        \"Content-Type\": \"application\/json\"\n    },\n    body: JSON.stringify({\n        fields: { Name: \"\u5f35\u4e09\", Email: \"zhangsan@example.com\" }\n    })\n});\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u7d50\u8ad6\uff1a\u5982\u4f55\u9078\u64c7\uff1f<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>\u65b9\u6cd5<\/strong><\/th><th><strong>\u9069\u7528\u5834\u666f<\/strong><\/th><th><strong>\u6280\u8853\u9700\u6c42<\/strong><\/th><\/tr><\/thead><tbody><tr><td><strong>MySQL\/PostgreSQL<\/strong><\/td><td>\u4f01\u696d\u7d1a\u61c9\u7528\u3001\u5927\u91cf\u6578\u64da\u5b58\u53d6<\/td><td>\u9700\u8981\u5f8c\u7aef\uff08PHP, Node.js, Python\uff09<\/td><\/tr><tr><td><strong>Google Forms + Google Sheets<\/strong><\/td><td>\u7c21\u55ae\u8868\u55ae\u3001\u7121\u5f8c\u7aef\u9700\u6c42<\/td><td>\u76f4\u63a5\u4f7f\u7528 Google Forms \u6216 GAS<\/td><\/tr><tr><td><strong>Firebase Firestore<\/strong><\/td><td>\u5373\u6642\u6578\u64da\u3001\u884c\u52d5\u61c9\u7528<\/td><td>\u9700\u8981 Firebase \u8a2d\u5b9a<\/td><\/tr><tr><td><strong>JSON \u6a94\u6848\u5132\u5b58<\/strong><\/td><td>\u8f15\u91cf\u7d1a\u61c9\u7528\u3001\u975c\u614b\u7db2\u7ad9<\/td><td>\u9700\u8981\u5f8c\u7aef\uff08Node.js, PHP\uff09<\/td><\/tr><tr><td><strong>Email \u65b9\u5f0f\uff08SMTP\uff09<\/strong><\/td><td>\u806f\u7d61\u8868\u55ae\u3001\u901a\u77e5<\/td><td>\u9700\u8981 SMTP \u670d\u52d9<\/td><\/tr><tr><td><strong>No-Code\uff08Airtable \/ Zapier\uff09<\/strong><\/td><td>\u7121\u9700\u7a0b\u5f0f\u958b\u767c\u3001\u5feb\u901f\u4e0a\u7dda<\/td><td>\u9700 Airtable\/Zapier \u8a02\u95b1<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u63a8\u85a6\u9078\u64c7<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5982\u679c\u53ea\u662f\u6536\u96c6\u8cc7\u6599<\/strong> \u2192 Google Forms + Google Sheets<\/li>\n\n\n\n<li><strong>\u5982\u679c\u6709\u5f8c\u7aef\u9700\u6c42<\/strong> \u2192 MySQL + PHP \/ Node.js<\/li>\n\n\n\n<li><strong>\u5982\u679c\u8981\u5373\u6642\u540c\u6b65<\/strong> \u2192 Firebase Firestore<\/li>\n\n\n\n<li><strong>\u5982\u679c\u7121\u4f3a\u670d\u5668\u4f46\u60f3\u5b58\u5165 DB<\/strong> \u2192 Airtable \/ Zapier<\/li>\n\n\n\n<li><strong>\u5982\u679c\u8981\u5bc4 Email \u901a\u77e5<\/strong> \u2192 SMTP \u65b9\u5f0f<\/li>\n<\/ul>\n\n\n\n<p>\u54ea\u4e00\u7a2e\u65b9\u5f0f\u6700\u7b26\u5408\u4f60\u7684\u9700\u6c42\u5462\uff1f\ud83d\ude03<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u81ea\u88fdWeb\u8868\u55ae\uff0c\u5c07\u8cc7\u6599\u9001\u81f3Google Sheets\u5132\u5b58<\/h2>\n\n\n\n<p>\u5982\u679c\u4f60\u60f3\u8981<strong>\u81ea\u5df1\u8a2d\u8a08 HTML\/CSS\/JavaScript \u8868\u55ae<\/strong>\uff0c\u4f46\u53c8\u5e0c\u671b<strong>\u8cc7\u6599\u80fd\u5132\u5b58\u5230 Google Sheets<\/strong>\uff0c\u90a3\u9ebc\u6700\u597d\u7684\u65b9\u5f0f\u662f\u900f\u904e <strong>Google Apps Script\uff08GAS\uff09<\/strong>\uff0c\u8b93\u4f60\u7684\u8868\u55ae\u900f\u904e AJAX \u63d0\u4ea4\u8cc7\u6599\uff0c\u4e26\u7531 GAS \u4ee3\u70ba\u5b58\u5165 Google Sheets\u3002<\/p>\n\n\n\n<p>\u9019\u7a2e\u65b9\u5f0f\u8b93\u4f60\u53ef\u4ee5<strong>\u5b8c\u5168\u81ea\u8a02\u524d\u7aef\u756b\u9762<\/strong>\uff0c\u800c\u4e14\u5f8c\u7aef\u7121\u9700\u984d\u5916\u4f3a\u670d\u5668\uff0c\u76f4\u63a5\u7528 Google Sheets \u4f5c\u70ba\u8cc7\u6599\u5eab\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u5b8c\u6574\u6d41\u7a0b<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5efa\u7acb Google Sheets<\/strong><\/li>\n\n\n\n<li><strong>\u64b0\u5beb Google Apps Script\uff08GAS\uff09\u7576\u4f5c API<\/strong><\/li>\n\n\n\n<li><strong>\u524d\u7aef HTML\/CSS\/JavaScript \u8868\u55ae<\/strong><\/li>\n\n\n\n<li><strong>AJAX \u63d0\u4ea4\u8cc7\u6599\u5230 GAS<\/strong><\/li>\n\n\n\n<li><strong>GAS \u63a5\u6536\u8cc7\u6599\u4e26\u5beb\u5165 Google Sheets<\/strong><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1\ufe0f\u20e3 \u5efa\u7acb Google Sheets<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u958b\u555f <a href=\"https:\/\/docs.google.com\/spreadsheets\/\">Google Sheets<\/a><\/li>\n\n\n\n<li>\u5efa\u7acb\u65b0\u8a66\u7b97\u8868\uff0c\u53d6\u540d\u70ba <strong>\u300c\u8868\u55ae\u56de\u61c9\u300d<\/strong><\/li>\n\n\n\n<li>\u5728 <strong>A1\u3001B1\u3001C1<\/strong> \u8f38\u5165\u6a19\u984c\uff0c\u4f8b\u5982\uff1a <br><code>\u59d3\u540d   | Email            | \u8a0a\u606f<\/code><br> <code>------|<code>-<\/code>-----------------|----- <\/code><br><code>\u738b\u5c0f\u660e | test@example.com | \u9019\u662f\u6211\u7684\u7559\u8a00<\/code><\/li>\n\n\n\n<li>\u8a18\u4e0b <strong>\u8a66\u7b97\u8868\u7db2\u5740<\/strong>\uff0c\u7a0d\u5f8c\u6703\u7528\u5230\u3002<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2\ufe0f\u20e3 \u64b0\u5beb Google Apps Script\uff08GAS\uff09\u4f5c\u70ba API<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5728 Google Sheets <strong>\u300c\u64f4\u5145\u529f\u80fd\u300d<\/strong> \u2192 <strong>\u300cApps Script\u300d<\/strong><\/li>\n\n\n\n<li>\u522a\u9664\u9810\u8a2d\u7a0b\u5f0f\u78bc\uff0c\u8cbc\u4e0a\u4ee5\u4e0b GAS \u4ee3\u78bc\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function doPost(e) {\n  var sheet = SpreadsheetApp.openById(\"\u4f60\u7684 Google Sheets ID\").getActiveSheet();\n  var data = JSON.parse(e.postData.contents);\n  \n  sheet.appendRow([data.name, data.email, data.message]);\n\n  return ContentService.createTextOutput(\"\u6210\u529f\u5132\u5b58\uff01\")\n      .setMimeType(ContentService.MimeType.TEXT);\n}\n<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u5982\u4f55\u53d6\u5f97 Google Sheets ID\uff1f<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u8a66\u7b97\u8868\u7db2\u5740\u985e\u4f3c\u9019\u6a23\uff1a <code>https:\/\/docs.google.com\/spreadsheets\/d\/1A2B3C4D5E6F7G8H9I\/edit<\/code><\/li>\n\n\n\n<li><strong>\u628a <code>1A2B3C4D5E6F7G8H9I<\/code> \u586b\u5165\u4e0a\u65b9 <code>openById()<\/code><\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u9ede\u64ca <strong>\u300c\u90e8\u7f72\u300d<\/strong> \u2192 <strong>\u300c\u65b0\u90e8\u7f72\u300d<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u9078\u64c7 <strong>\u300cWeb \u61c9\u7528\u7a0b\u5f0f\u300d<\/strong><\/li>\n\n\n\n<li><strong>\u5141\u8a31\u4efb\u4f55\u4eba\uff08Everyone\uff09\u5b58\u53d6<\/strong><\/li>\n\n\n\n<li><strong>\u9ede\u64ca\u90e8\u7f72<\/strong>\uff0c\u53d6\u5f97 API URL\uff08\u7a0d\u5f8c\u8981\u7528\uff09<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3\ufe0f\u20e3 \u81ea\u8a02 HTML\/CSS \u8868\u55ae<\/strong><\/h2>\n\n\n\n<p>\u9019\u6bb5\u7a0b\u5f0f\u78bc\u662f<strong>\u7f8e\u89c0\u7684 Bootstrap \u8868\u55ae<\/strong>\uff0c\u4e26\u4e14\u53ef\u4ee5 AJAX \u63d0\u4ea4\u8cc7\u6599\u5230\u525b\u525b\u7684 GAS API\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>index.html<\/strong><\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"zh-TW\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>\u81ea\u8a02 Google Sheets \u8868\u55ae&lt;\/title>\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\">\n    &lt;script>\n        function submitForm() {\n            var formData = {\n                name: document.getElementById(\"name\").value,\n                email: document.getElementById(\"email\").value,\n                message: document.getElementById(\"message\").value\n            };\n\n            fetch(\"\u4f60\u7684GAS API URL\", {\n                method: \"POST\",\n                headers: { \"Content-Type\": \"application\/json\" },\n                body: JSON.stringify(formData)\n            })\n            .then(response => response.text())\n            .then(data => {\n                alert(\"\u8868\u55ae\u63d0\u4ea4\u6210\u529f\uff01\");\n                document.getElementById(\"myForm\").reset();\n            })\n            .catch(error => console.error(\"\u932f\u8aa4:\", error));\n        }\n    &lt;\/script>\n&lt;\/head>\n&lt;body class=\"container mt-5\">\n    &lt;h2>\u806f\u7d61\u6211\u5011&lt;\/h2>\n    &lt;form id=\"myForm\" onsubmit=\"event.preventDefault(); submitForm();\">\n        &lt;div class=\"mb-3\">\n            &lt;label class=\"form-label\">\u59d3\u540d&lt;\/label>\n            &lt;input type=\"text\" id=\"name\" class=\"form-control\" required>\n        &lt;\/div>\n        &lt;div class=\"mb-3\">\n            &lt;label class=\"form-label\">Email&lt;\/label>\n            &lt;input type=\"email\" id=\"email\" class=\"form-control\" required>\n        &lt;\/div>\n        &lt;div class=\"mb-3\">\n            &lt;label class=\"form-label\">\u8a0a\u606f&lt;\/label>\n            &lt;textarea id=\"message\" class=\"form-control\" rows=\"3\" required>&lt;\/textarea>\n        &lt;\/div>\n        &lt;button type=\"submit\" class=\"btn btn-primary\">\u63d0\u4ea4&lt;\/button>\n    &lt;\/form>\n&lt;\/body>\n&lt;\/html>\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4\ufe0f\u20e3 AJAX \u63d0\u4ea4\u5230 GAS\uff08Google Sheets\uff09<\/strong><\/h2>\n\n\n\n<p>\u9019\u90e8\u5206\u7684 JavaScript \u4ee3\u78bc\u6703\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u53d6\u5f97\u8868\u55ae\u8f38\u5165\u503c<\/li>\n\n\n\n<li>\u900f\u904e <code>fetch()<\/code> \u767c\u9001 JSON \u683c\u5f0f\u8cc7\u6599\u5230 <strong>GAS API<\/strong><\/li>\n\n\n\n<li>GAS \u6703\u5c07\u8cc7\u6599\u5b58\u5165 Google Sheets<\/li>\n\n\n\n<li>\u6210\u529f\u5f8c\u6703\u8df3\u51fa <strong>\u300c\u8868\u55ae\u63d0\u4ea4\u6210\u529f\uff01\u300d<\/strong> \u63d0\u793a<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd25 \u6700\u7d42\u6548\u679c<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5b8c\u5168 <strong>\u5ba2\u88fd\u5316\u8868\u55ae<\/strong>\uff08\u53ef\u4ee5\u8a2d\u8a08\u4efb\u4f55\u98a8\u683c\uff09<\/li>\n\n\n\n<li><strong>\u514d\u4f3a\u670d\u5668<\/strong>\uff08Google Sheets \u76f4\u63a5\u7576\u8cc7\u6599\u5eab\uff09<\/li>\n\n\n\n<li><strong>\u81ea\u52d5\u5b58\u5165\u8a66\u7b97\u8868<\/strong><\/li>\n\n\n\n<li><strong>\u53ef\u64f4\u5145\u6027\u5f37<\/strong>\uff08GAS \u53ef\u5beb\u66f4\u591a\u908f\u8f2f\uff09<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u2705 \u70ba\u4ec0\u9ebc\u9019\u7a2e\u65b9\u6cd5\u9069\u5408\u4f60\uff1f<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>\u512a\u52e2<\/strong><\/th><th><strong>\u8aaa\u660e<\/strong><\/th><\/tr><\/thead><tbody><tr><td><strong>\u5b8c\u5168\u5ba2\u88fd\u5316<\/strong><\/td><td>\u53ef\u7528 HTML\/CSS\/JavaScript \u81ea\u8a02\u8a2d\u8a08<\/td><\/tr><tr><td><strong>\u514d\u5f8c\u7aef\u4f3a\u670d\u5668<\/strong><\/td><td>\u53ea\u9700\u8981 Google Sheets \u548c Google Apps Script<\/td><\/tr><tr><td><strong>\u652f\u63f4 AJAX \u5373\u6642\u63d0\u4ea4<\/strong><\/td><td>\u7121\u9808\u91cd\u65b0\u6574\u7406\u9801\u9762\u5373\u53ef\u63d0\u4ea4\u8cc7\u6599<\/td><\/tr><tr><td><strong>\u53ef\u64f4\u5145\u61c9\u7528<\/strong><\/td><td>\u53ef\u52a0\u5165\u9a57\u8b49\u3001\u901a\u77e5\u3001\u5206\u6790\u7b49\u529f\u80fd<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u9019\u6a23\u7684\u89e3\u6cd5\uff0c\u65e2\u80fd\u64c1\u6709 Google Sheets \u7684\u4fbf\u5229\u6027\uff0c\u53c8\u80fd\u4fdd\u6709\u7db2\u7ad9\u7684<strong>\u5c08\u696d\u5916\u89c0<\/strong>\uff0c\u9069\u5408\u9700\u8981\u7c21\u55ae\u4f46\u5c08\u696d\u7684\u8cc7\u6599\u6536\u96c6\u65b9\u6848\uff01\ud83c\udf89<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web \u8868\u55ae\u9001\u51fa\u8cc7\u6599\u4e26\u5132\u5b58\u5230\u5f8c\u7aef\u7684\u65b9\u6cd5\u6709\u8a31\u591a\u7a2e\uff0c\u4e3b\u8981\u53ef\u5206\u70ba\u4ee5\u4e0b\u5e7e\u985e\uff1a 1. \u5132\u5b58 &hellip; <\/p>\n","protected":false},"author":1,"featured_media":15407,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[266],"tags":[],"class_list":["post-15390","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-266"],"_links":{"self":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/comments?post=15390"}],"version-history":[{"count":2,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15390\/revisions"}],"predecessor-version":[{"id":15393,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15390\/revisions\/15393"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media\/15407"}],"wp:attachment":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media?parent=15390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/categories?post=15390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/tags?post=15390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}