如何在输入框失焦时通过jQuery/Ajax调用Webhook传递邮编值？

我尝试调用Webhook来传递输入的邮编值，修改了代码但无法正常运行。当前代码运行后无任何反应，尝试在文档加载时执行也无效，希望获得帮助。

对应的HTML代码 #

<input type="text" class="street-address w-input" maxlength="256" name="Zip-Code-2" data-name="Zip Code 2" placeholder="Zip Code" id="Zip-Code-2" required=""/>
<div id="zipisright">
right
</div>
<div id="zipiswrong">
wrong
</div>

使用的jQuery代码 #

$(document).ready(function(){
        $('#Zip-Code-2').blur(function(){
    var zip_code = $('#Zip-Code-2').val();
       {
          $.ajax({
              url:"https://amosdigital.app.n8n.cloud/webhook-test/91383285-6a98-42cd-b9a2-6c6312f0090c",
              method:"POST",
              data:{new_base:zip_code},
              dataType:"text",
              contentType:false,
              processData:false,
              success:function(data:
              {
                $('#Zip-Code-2').val(data);
              }
           });
       }
    });
 });

问题分析与修复 #

1. 语法错误 #

success:function(data: 这里缺少右括号，正确写法是 success:function(data) {，这个语法错误会直接导致代码无法执行。

2. 错误的AJAX参数设置 #

contentType:false 和 processData:false 是用于上传文件的场景，传递普通表单数据时应该移除这两个选项，否则jQuery无法正确序列化data对象，Webhook接收不到有效参数。

3. 缺少错误处理逻辑 #

没有添加error回调，无法排查请求失败的原因（比如跨域问题、Webhook地址失效等）。

修正后的代码 #

$(document).ready(function(){
    $('#Zip-Code-2').blur(function(){
        var zip_code = $(this).val();
        $.ajax({
            url:"https://amosdigital.app.n8n.cloud/webhook-test/91383285-6a98-42cd-b9a2-6c6312f0090c",
            method:"POST",
            data:{new_base:zip_code},
            dataType:"text",
            success:function(data) {
                $('#Zip-Code-2').val(data);
                // 根据返回结果显示对应提示
                $('#zipisright').show();
                $('#zipiswrong').hide();
            },
            error:function(xhr, status, error) {
                // 打印错误信息便于排查
                console.log("请求失败:", error);
                $('#zipiswrong').show();
                $('#zipisright').hide();
            }
        });
    });
});

额外建议 #

• 打开浏览器开发者工具（F12）的控制台，查看是否有报错信息，这是排查前端问题的核心手段。
• 确认Webhook地址可正常访问，且支持跨域请求（若页面域名与Webhook域名不同，需在Webhook端配置CORS）。

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