可复用表单提交后按钮卡在sending状态但可正常收邮件问题求助

问题根因 #

• 提交成功的逻辑分支未做按钮状态重置：现有代码仅在提交失败的else分支中编写了按钮文本、类型还原的逻辑，成功分支完全没有相关处理，所以提交成功后按钮会一直停留在sending...状态。
• 变量作用域问题：$form是在submit事件回调内部定义的局部变量，after_form_submitted函数直接调用该变量会出现访问异常，导致JS执行中断，后续逻辑无法运行。
• 缺少AJAX异常处理：代码仅配置了success回调，没有配置error回调，若后端返回的JSON格式不合法、请求出现网络波动等异常情况，不会触发按钮重置逻辑。
• 后端返回格式异常：你指定了AJAX返回格式为json，若handler.php发完邮件后没有返回合法的JSON结构、或者输出了多余的调试信息/空白字符，会导致jQuery解析响应失败，无法进入success回调。

修复方案 #

1. 前端代码修改 #

修改后的完整JS代码如下：

$(function()
{
    function after_form_submitted(data, $form)
    {
        if(data.result == 'success')
        {
            $('form#reused_form').hide();
            $('#success_message').show();
            $('#error_message').hide();
            // 新增：成功分支重置按钮状态
            $('button[type="button"]', $form).each(function()
            {
                $btn = $(this);
                label = $btn.prop('orig_label');
                if(label)
                {
                    $btn.prop('type','submit' );
                    $btn.text(label);
                    $btn.prop('orig_label','');
                }
            });
        }
        else
        {
            $('#error_message').append('<ul></ul>');

            jQuery.each(data.errors,function(key,val)
            {
                $('#error_message ul').append('<li>'+key+':'+val+'</li>');
            });
            $('#success_message').hide();
            $('#error_message').show();

            // 失败分支重置按钮
            $('button[type="button"]', $form).each(function()
            {
                $btn = $(this);
                label = $btn.prop('orig_label');
                if(label)
                {
                    $btn.prop('type','submit' );
                    $btn.text(label);
                    $btn.prop('orig_label','');
                }
            });

        }//else
    }

    $('#reused_form').submit(function(e)
      {
        e.preventDefault();

        const $form = $(this);
        // 按钮状态切换为提交中
        $('button[type="submit"]', $form).each(function()
        {
            $btn = $(this);
            $btn.prop('type','button' );
            $btn.prop('orig_label',$btn.text());
            $btn.text('Sending ...');
        });

        const formdata = new FormData(this);
        $.ajax({
            type: "POST",
            url: 'handler.php',
            data: formdata,
            success: function(data) {
                // 把$form作为参数传入回调，解决作用域问题
                after_form_submitted(data, $form);
            },
            // 新增异常回调
            error: function() {
                $('#error_message').text('提交出现异常，请稍后重试').show();
                $('#success_message').hide();
                // 异常时也重置按钮
                $('button[type="button"]', $form).each(function()
                {
                    $btn = $(this);
                    label = $btn.prop('orig_label');
                    if(label)
                    {
                        $btn.prop('type','submit' );
                        $btn.text(label);
                        $btn.prop('orig_label','');
                    }
                });
            },
            dataType: 'json' ,
            processData: false,
            contentType: false,
            cache: false
        });

      });
});

2. 后端代码检查 #

确保handler.php发完邮件后，仅输出合法的JSON结构，没有多余输出，示例成功返回代码：

// 邮件发送成功后输出
echo json_encode(['result' => 'success']);
exit;
// 如果有校验失败的情况，输出：
// echo json_encode(['result' => 'error', 'errors' => ['邮箱' => '格式不正确']]);
// exit;

内容的提问来源于stack exchange，提问作者Creative Tech 360