我将发布对此处提出的另一个问题的跟进:Simulate a JSONP response with JavaScript URLs。我结合了 nickjag 的回答,并在最后被卡住了。
我成功地获得了提交传递给 Pardot,我在每个循环中使用了一点来获取所有表单名称和值:
makeWebflowFormAjax = function( forms, successCallback, errorCallback ) {
forms.each(function(){
var form = $(this);
form.on("submit", function(){
var container = form.parent();
var doneBlock = $(".w-form-done", container);
var failBlock = $(".w-form-fail", container);
var action = form.attr("action");
var method = form.attr("method");
var data = form.serialize();
var dataURI = {};
form.find("input, textarea, select").each(function() {
var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase();
if (inputType !== "BUTTON" && inputType !== "SUBMIT") {
dataURI[this.name] = $(this).val();
}
});
dataURI = $.param(dataURI);
console.log(dataURI);
// call via ajax
$.ajax({
type: method,
url: action + '?' + dataURI,
dataType: 'jsonp',
jsonpCallback: 'callback'
});
// prevent default webflow action
return false;
});
});
}
我在 webflow 中创建了两个页面,在页面的自定义代码部分中将以下内容作为自定义脚本:
<script>
return "callback({ 'result' : 'success' })"
</script>
正如我在潜在客户数据库中看到的测试一样,该表单肯定会击中 Pardot 并传递数据,但我在 Chrome 中收到控制台错误:未捕获的语法错误:意外的令牌 < 从它出现的成功页面返回。看起来我应该做的是基于 Pardot 命中的页面,然后运行一个函数来显示或隐藏 Webflow 成功/失败消息。
像这样的东西:
form.hide();
doneBlock.show();
failBlock.hide();
关于我接下来需要做什么的任何想法?我觉得它非常接近,但我只是不确定如何将它们联系在一起。