使用Webflow向Pardot提交AJAX表单遇语法错误求助

首先，你遇到的Uncaught SyntaxError: Unexpected token <错误，核心原因是成功页面的脚本写法完全不符合JSONP的要求。JSONP的本质是让服务器返回一段可执行的JavaScript代码，直接调用你指定的回调函数，而不是返回带return的字符串或包含HTML标签的内容。

第一步：修正Pardot跳转页面的脚本 #

把你在成功页面添加的脚本改成下面这样：

<script>
// 直接调用AJAX请求里指定的jsonpCallback函数
callback({ result: 'success' });
</script>

如果是失败页面，同理改成：

<script>
callback({ result: 'error' });
</script>

这样浏览器加载这个页面的脚本时，会直接触发callback函数，不会因为遇到<标签报错。

第二步：在主脚本中定义全局回调函数 #

因为你在$.ajax里指定了jsonpCallback: 'callback'，必须确保全局作用域存在这个函数，用来处理返回结果并控制Webflow的提示块。修改你的makeWebflowFormAjax函数，在AJAX请求前添加全局回调定义：

makeWebflowFormAjax = function( forms, successCallback, errorCallback ) {
    // 定义全局JSONP回调函数，绑定表单上下文
    window.callback = function(response) {
        var currentForm = window.currentSubmittingForm;
        var container = currentForm.parent();
        var doneBlock = $(".w-form-done", container);
        var failBlock = $(".w-form-fail", container);
        
        if (response.result === 'success') {
            currentForm.hide();
            doneBlock.show();
            failBlock.hide();
            // 执行自定义成功回调（如果传入）
            if (successCallback) successCallback();
        } else {
            currentForm.hide();
            failBlock.show();
            doneBlock.hide();
            if (errorCallback) errorCallback();
        }
    };

    forms.each(function(){
        var form = $(this);
        form.on("submit", function(){
            // 保存当前提交的表单引用，供全局回调使用
            window.currentSubmittingForm = $(this);
            
            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 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);
            
            // 发起JSONP请求
            $.ajax({
                type: method,
                url: action + '?' + dataURI,
                dataType: 'jsonp',
                jsonpCallback: 'callback',
                // 处理网络类请求失败的情况
                error: function() {
                    var currentForm = window.currentSubmittingForm;
                    var container = currentForm.parent();
                    var doneBlock = $(".w-form-done", container);
                    var failBlock = $(".w-form-fail", container);
                    
                    currentForm.hide();
                    failBlock.show();
                    doneBlock.hide();
                    if (errorCallback) errorCallback();
                }
            });

            return false;
        });
    });
}

这里用window.currentSubmittingForm保存当前提交的表单引用，解决了全局回调函数上下文丢失的问题，确保能精准操作对应表单的提示块。

第三步：验证完整流程 #

现在测试流程应该是：

1. 提交表单，AJAX发起JSONP请求到Pardot
2. Pardot处理数据后跳转到你设置的成功/失败页面
3. 页面脚本直接调用callback函数，传入结果
4. 全局callback函数根据结果显示对应Webflow提示块，隐藏原表单

另外要注意检查Pardot的跳转设置，确保它处理完表单后，确实跳转到你添加了上述脚本的页面，而非默认提示页。

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