HTML页面向Zoho Creator添加记录失败，报JSON_PARSE_ERROR错误

你的问题核心是HTML表单默认提交格式与Zoho Creator v2 API要求不匹配，再加上代码里的几个小错误，导致出现JSON_PARSE_ERROR。

错误原因拆解 #

1. 请求格式不兼容：HTML表单默认以application/x-www-form-urlencoded格式提交数据，但Zoho Creator v2 API只接受application/json格式的请求体——这就是Postman能成功、HTML表单失败的关键原因，因为你在Postman里肯定手动设置了正确的请求头和JSON请求体。
2. 冗余参数干扰：接口URL里已经包含了账户名、应用名和表单名，隐藏字段里的application name和form name完全多余，反而会干扰API解析。
3. Token格式错误：你的Zoho-oauthtoken值里多了空格和前缀（Zoho-oauthtoken .xxxx），这会直接导致鉴权或解析失败。

修正后的代码 #

改用JavaScript监听表单提交，手动构造符合要求的JSON请求：

<!DOCTYPE html>
<html>
<head>
  <title>Zoho Creator 添加记录表单</title>
</head>
<body>
  <h1>Zoho Creator 添加记录表单</h1>

  <form id="zohoForm">
    <label for="Email">邮箱:</label>
    <input type="email" name="Email" id="Email" required>

    <label for="Phone_Number">电话:</label>
    <input type="tel" name="Phone_Number" id="Phone_Number" required>

    <input type="submit" value="添加记录">
  </form>

  <script>
    document.getElementById('zohoForm').addEventListener('submit', async function(e) {
      e.preventDefault(); // 阻止表单默认提交行为

      // 收集表单数据
      const formData = {
        Email: document.getElementById('Email').value,
        Phone_Number: document.getElementById('Phone_Number').value
      };

      try {
        const response = await fetch('https://creator.zoho.in/api/v2/你的账户名/你的应用名/form/你的表单名', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Zoho-oauthtoken': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // 只保留纯Token值，去掉多余前缀和空格
          },
          body: JSON.stringify(formData)
        });

        const result = await response.json();
        console.log('提交成功:', result);
        alert('记录添加成功！');
        this.reset(); // 重置表单
      } catch (error) {
        console.error('提交失败:', error);
        alert('提交失败，请检查控制台信息');
      }
    });
  </script>
</body>
</html>

关键修改说明 #

• 移除了冗余的隐藏字段，URL路径参数已经足够定位目标表单
• 用fetch API发送JSON格式请求，明确设置Content-Type: application/json请求头
• 修正Zoho-oauthtoken格式，只保留纯Token字符串
• 阻止表单默认提交行为，改用JS处理提交逻辑
• 添加了基础表单验证和提交反馈

内容的提问来源于stack exchange，提问作者Vimal