我正在使用 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)
})
}}
>