1

我正在使用 Pardot 表单处理程序在 Gatsby/React 中提交自定义表单。我还希望向用户发送成功/失败消息，因此我想根据 Pardot 服务器发回的内容更新 UI。

Pardot 使用 JSONP 提交表单数据，这很好，但我需要读取 Pardot 的响应。我得到了真实的回应；因成功而成功，因失败而失败。Pardot 建议在您自己的服务器上创建 2 个返回简单 JSON 响应的静态 URL。我已经这样做了：

success.json
{"status":"success"}

or

successTwo.json
callback({"status":"success"})

or

successThree.js
return "callback({ 'status': 'success' })"

我的印象是 JSONP 会将我的响应包装在我定义为“回调”的回调中。

我获得了相应表单提交的成功和失败，因此向 Pardot 添加数据有效，但我无法从收到的 /success*.json,.js 或 /error*.json,.js 文件中读取响应。

我尝试过的事情： - 设置一些文件类型，.json 和 .js - 在回调中将 JSON 包装在我返回的文件中 - 用引号括起来并返回 - 进行回调window.callback = data => {...} - 我已经对这些问题进行了审查：- -使用 JavaScript URL 模拟 JSONP 响应 -如何在 Gatsby 网站上正确实现 JSONP 表单提交 - 我不反对 Jquery，但我很确定我在这里不需要它

就好像浏览器正在寻找来自 Pardot 的原始查询 URL 中的响应，即添加表单数据的 URL，而不是从 Pardot 响应的 URL。

那么，如何从 Pardot 读取响应 URL？

代码：（FWIW，我正在使用 Formik，但我认为这并不重要）我还使用了一个名为fetch-jsonp的 NPM 库，因为 Pardot 需要 JSONP

    <Formik
      initialValues={{ email: '' }}
      validationSchema={Yup.object({
        email: Yup.string()
          .email('Invalid email address')
          .required('Required'),
      })}
      onSubmit={(values, { setSubmitting }) => {
        fetchJsonp(`${formId}?${encode(values).toString()}`, {
          jsonpCallbackFunction: 'callback',
          timeout: 10000,
        })
          .then(function(data) {
            console.log('data', data)
            window.callback(data)
          })
          .then(function(response) {
            return response.json()
          })
          .then(function(json) {
            console.log('parsed json', json)
          })
          .catch(function(ex) {
            console.log('parsing failed', ex)
          })

      }}
    >
4

0 回答 0