eRROR消息在从Web应用程序联系表中自动数据输入到GoogleSheep

问题描述 投票:0回答:1
“发生错误。请重试”。

请我不知道我在哪里弄错了。这是我的联系表码:

import { useForm, SubmitHandler } from 'react-hook-form'; interface IFormInputs { name: string; businessName: string; email: string; phoneNumber: string; message: string; } export default function ContactForm() { const { register, handleSubmit, formState: { errors } } = useForm<IFormInputs>(); const onSubmit: SubmitHandler<IFormInputs> = async (data) => { try { console.log('Submitting form data:', data); // Log the data being sent const response = await fetch('https://script.google.com/macros/s/AKfycbzvMAauhjdECZa-pZo5tTxPM1UrjQbS2jTJsbyiWYAy3LxoPMC9ZM116834mNzBT1ulLw/exec', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }); console.log('Response status:', response.status); // Log the response status if (response.ok) { const result = await response.json(); console.log('Response result:', result); // Log the result if (result.success) { alert('Form submitted successfully!'); } else { alert('Failed to submit form. Please try again.'); } } else { alert('Failed to submit form. Please try again.'); } } catch (error) { console.error('Error submitting form:', error); // Log the error alert('An error occurred. Please try again.'); } }; return ( <form onSubmit={handleSubmit(onSubmit)} className="space-y-6"> <div> <label htmlFor="name" className="block text-sm font-medium text-gray-100">Name *</label> <input type="text" id="name" {...register("name", { required: "Name is required" })} className="mt-1 block w-full rounded-md border-light-green shadow-sm focus:border-light-green focus:ring focus:ring-light-green focus:ring-opacity-50 bg-white text-charcoal-gray" /> {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name.message}</p>} </div> <div> <label htmlFor="businessName" className="block text-sm font-medium text-gray-100">Business Name</label> <input type="text" id="businessName" {...register("businessName")} className="mt-1 block w-full rounded-md border-light-green shadow-sm focus:border-light-green focus:ring focus:ring-light-green focus:ring-opacity-50 bg-white text-charcoal-gray" /> </div> <div> <label htmlFor="email" className="block text-sm font-medium text-gray-100">Email *</label> <input type="email" id="email" {...register("email", { required: "Email is required", pattern: { value: /\S+@\S+\.\S+/, message: "Invalid email address" } })} className="mt-1 block w-full rounded-md border-light-green shadow-sm focus:border-light-green focus:ring focus:ring-light-green focus:ring-opacity-50 bg-white text-charcoal-gray" /> {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>} </div> <div> <label htmlFor="phoneNumber" className="block text-sm font-medium text-gray-100">Phone Number</label> <input type="tel" id="phoneNumber" {...register("phoneNumber")} className="mt-1 block w-full rounded-md border-light-green shadow-sm focus:border-light-green focus:ring focus:ring-light-green focus:ring-opacity-50 bg-white text-charcoal-gray" /> </div> <div> <label htmlFor="message" className="block text-sm font-medium text-gray-100">Message *</label> <textarea id="message" rows={4} {...register("message", { required: "Message is required" })} className="mt-1 block w-full rounded-md border-light-green shadow-sm focus:border-light-green focus:ring focus:ring-light-green focus:ring-opacity-50 bg-white text-charcoal-gray" ></textarea> {errors.message && <p className="mt-1 text-sm text-red-600">{errors.message.message}</p>} </div> <div> <button type="submit" className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-light-green hover:bg-dark-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-light-green" > Send Message </button> </div> </form> ); }

This is the code on my Google sheet Appscript: function doPost(e) { const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); try { // Log the incoming data Logger.log('Incoming data: ' + JSON.stringify(e.postData.contents)); // Parse the incoming data const data = JSON.parse(e.postData.contents); // Append the data to the sheet sheet.appendRow([data.name, data.businessName, data.email, data.phoneNumber, data.message]); // Return a success response return ContentService.createTextOutput(JSON.stringify({ success: true })).setMimeType(ContentService.MimeType.JSON); } catch (error) { Logger.log('Error: ' + error); return ContentService.createTextOutput(JSON.stringify({ success: false, error: error.message })).setMimeType(ContentService.MimeType.JSON); } }

我已经为AppScript代码设置了一个触发器,以便在提交时运行。表上的列标题是(名称,BusinessName,电子邮件,Phonenumber,消息),如代码上显示的那样。我还写了它们,因为它们以占位符格式出现,但它不起作用。但是,我确保使用在网络应用程序上部署在应用程序脚本上的同一Web URL,但是,每次我仍然收到相同的错误消息

	
使用轴而不是提取
要回答您的问题,您的代码问题位于前端侧,在脚本中获取

response.ok

。但是,没有办法在AppScript中使用200或OK = true的AppScript响应
reactjs google-sheets google-apps-script web-applications contact-form
1个回答
0
投票
请求,因此解决方法是创建拆分脚本,由我们社区中的某人回答。

获取确实有效,但是您需要在标题中添加更多参数,例如

"Access-Control-Allow-Origin": "*"

,以允许任何域访问资源。但是,基于我尝试的内容和研究,我看不到任何信息在Google App脚本中具有任何返回值的信息。

为了使其正常工作,因为您正在使用
doPost()
安装节点软件包模块轴。
i我重新分配了代码,我还使用这些方法进行了研究,就是使用另一个库typescript frontend framework它也是Node.js的基于承诺的HTTP客户端。 Axios接受Google App脚本的响应,因为它处理了HTTP请求和响应。 Google Apps脚本可以用作Web服务,返回JSON或AXIOS可以轻松处理的其他数据格式。 您可以在此处阅读有关如何安装和添加到项目的参考。

前码:

Axios

    

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.