无法从服务器端API获取邮件发送成功消息的技术求助

邮件能成功发送但前端无法接收返回结果，主要是以下几个问题导致：

前端代码问题及修复 #

1. 表单默认提交导致页面刷新：submit类型按钮点击后会触发表单默认提交行为，页面刷新后AJAX的回调还没执行就丢失了状态。
2. AJAX语法错误：url字段末尾缺少逗号，导致JavaScript执行失败。
3. 未指定响应数据类型：未明确告诉jQuery期望接收JSON格式响应，可能导致解析失败。
4. 缺少错误回调处理：没有处理请求失败或服务器错误的情况。

修复后的前端代码 #

HTML部分（调整事件绑定方式）

<form id="myForm">
    <div class="row">
        <div class="col-sm-6">
            <input id="name" type="text" name="name" placeholder="Name">
        </div>
        <div class="col-sm-6">
            <input id="email" type="email" name="email" placeholder="Email">
        </div>
    </div>
    <input id="subject" type="text" name="subject" placeholder="Subject">
    <textarea id="message" name="message" placeholder="Message"></textarea>
    <button type="submit" class="btn" id="submit">Send Message</button>
    <div id="resultmessage">
        <div class="error"></div>
        <div class="success"></div>
    </div>
</form>

JavaScript部分（修复语法、阻止默认行为、完善回调）

function sendEmail(e) {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    var name = $("#name");
    var email = $("#email");
    var subject = $("#subject");
    var message = $("#message");

    if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(message)) {
        $.ajax({
            url: 'https://.../send-email', // 修复：补全字段末尾逗号
            type: 'POST',
            headers: {
                'Accept': 'application/json',
            },
            dataType: 'json', // 指定接收JSON格式响应
            data: {
                name: name.val(),
                email: email.val(),
                subject: subject.val(),
                message: message.val()
            },
            success: function (response) {
                console.log("email sent");
                if (response.success) {
                    $('.success').text(response.message);
                    $('.error').text(''); // 清空错误提示
                    $('#myForm')[0].reset();
                } else {
                    $('.error').text(response.message || '发送失败，请重试');
                    $('.success').text('');
                }
            },
            error: function(xhr, status, error) {
                // 处理请求失败或服务器返回的非200状态
                $('.error').text('发送失败：' + (xhr.responseText || error));
                $('.success').text('');
            }
        });
    } else {
        $('.error').text('请填写所有必填字段');
        $('.success').text('');
    }
}

// 给表单绑定submit事件，替代按钮的onclick
$("#myForm").on("submit", sendEmail);

// 实现字段非空校验函数（如果之前未定义）
function isNotEmpty(field) {
    if (field.val().trim() === '') {
        field.addClass('error-border'); // 可选：添加输入框错误样式
        return false;
    } else {
        field.removeClass('error-border');
        return true;
    }
}

后端代码优化 #

1. 添加JSON解析中间件：同时支持urlencoded和JSON格式的请求体，提升兼容性。
2. 统一返回JSON格式：错误时也返回JSON，方便前端统一处理。

修复后的后端代码 #

// 新增JSON解析中间件，同时支持两种请求体格式
server.use(express.urlencoded({ extended: true }));
server.use(express.json());

router.post("/", (req, res) => {
  let transporter = nodemailer.createTransport({
    host: "smtp.gmail.com",
    port: 465,
    secure: true,
    auth: {
      user: process.env.EMAIL,
      pass: process.env.PASSWORD,
    },
  });

  // escape转义HTML字符，避免注入风险
  let name = escape(req.body.name);
  let email = escape(req.body.email);
  let subject = escape(req.body.subject);
  let message = escape(req.body.message);

  let mailOptions = {
    to: "testemail@gmail.com",  
    subject: req.body.subject, 
    html: `Name: ${name} <br> Email: ${email} <br> Subject: ${subject} <br> Message: ${message}`
  };

  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.log(error);
      // 返回JSON格式错误信息
      return res.status(500).json({message: "Error sending email", success: false});
    }
    // 返回JSON格式成功响应
    res.status(200).json({message: "Email sent!!!!!", success: true});
    console.log(`Message sent: ${info.response}`);
  });
});

关键修复点说明 #

• 阻止默认提交：通过e.preventDefault()避免页面刷新，确保AJAX回调能正常执行。
• 修复JS语法错误：补全url字段后的逗号，保证AJAX配置对象语法正确。
• 统一JSON响应：前后端都使用JSON格式交互，避免解析异常。
• 完善错误处理：覆盖字段为空、请求失败、服务器错误等场景，提升用户体验。

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