oceanlabdesign.github.io/test_script.html at main · OceanLabDesign/oceanlabdesign.github.io · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測試Google Apps Script連接</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
        }
        .test-button {
            background: #4285f4;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 0;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #f9f9f9;
            min-height: 100px;
        }
        pre {
            background: #eee;
            padding: 10px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h1>測試Google Apps Script連接</h1>

    <p>這個頁面用於測試Google Apps Script的連接。點擊下面的按鈕將發送測試數據到您的Google表格。</p>

    <button class="test-button" onclick="testDirectURL()">測試1: 直接通過URL訪問(瀏覽器重定向)</button>
    <button class="test-button" onclick="testFetchGet()">測試2: 使用fetch GET請求</button>
    <button class="test-button" onclick="testFetchPost()">測試3: 使用fetch POST請求</button>

    <div class="result" id="result">
        <p>結果將顯示在這裡...</p>
    </div>

    <h2>URL測試參數</h2>
    <pre id="urlInfo"></pre>

    <script>
        // Google Apps Script URL
        const scriptURL = 'https://script.google.com/macros/s/AKfycbysY-Zsg-X7zFW99TF--KpxCgF5XfmWl9TWuNQ31eg3kqf5_kq4I16ofic8FOuhw2hUBg/exec';

        // 測試數據
        const testData = {
            name: '測試用戶',
            email: 'test@example.com',
            phone: '0912345678',
            message: '這是一條測試訊息 - ' + new Date().toLocaleString(),
            timestamp: new Date().toISOString()
        };

        // 顯示URL信息
        function showURLInfo() {
            const url = new URL(scriptURL);

            // 添加參數
            Object.keys(testData).forEach(key => {
                url.searchParams.append(key, testData[key]);
            });

            document.getElementById('urlInfo').textContent = url.toString();
        }

        // 初始化時顯示URL
        showURLInfo();

        // 測試1: 直接通過URL訪問
        function testDirectURL() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '<p>正在通過URL重定向測試...</p>';

            // 創建帶參數的URL
            const url = new URL(scriptURL);
            Object.keys(testData).forEach(key => {
                url.searchParams.append(key, testData[key]);
            });

            // 在新窗口中打開URL
            window.open(url.toString(), '_blank');

            resultDiv.innerHTML += '<p>已在新窗口中打開URL，請檢查Google表格是否收到數據</p>';
        }

        // 測試2: 使用fetch GET請求
        async function testFetchGet() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '<p>正在使用fetch GET請求測試...</p>';

            // 創建帶參數的URL
            const url = new URL(scriptURL);
            Object.keys(testData).forEach(key => {
                url.searchParams.append(key, testData[key]);
            });

            try {
                const response = await fetch(url, {
                    method: 'GET',
                    mode: 'no-cors' // 解決跨域問題
                });

                resultDiv.innerHTML += `
                    <p>請求已發送!</p>
                    <p>由於使用no-cors模式，無法讀取響應內容</p>
                    <p>請檢查Google表格是否收到數據</p>
                `;

                console.log('GET請求響應:', response);
            } catch (error) {
                resultDiv.innerHTML += `
                    <p style="color: red;">錯誤: ${error.message}</p>
                `;
                console.error('GET請求錯誤:', error);
            }
        }

        // 測試3: 使用fetch POST請求
        async function testFetchPost() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '<p>正在使用fetch POST請求測試...</p>';

            try {
                const response = await fetch(scriptURL, {
                    method: 'POST',
                    mode: 'no-cors', // 解決跨域問題
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(testData)
                });

                resultDiv.innerHTML += `
                    <p>POST請求已發送!</p>
                    <p>由於使用no-cors模式，無法讀取響應內容</p>
                    <p>請檢查Google表格是否收到數據</p>
                `;

                console.log('POST請求響應:', response);
            } catch (error) {
                resultDiv.innerHTML += `
                    <p style="color: red;">錯誤: ${error.message}</p>
                `;
                console.error('POST請求錯誤:', error);
            }
        }
    </script>
</body>
</html>