$ .ajax POST正在發送數據，但在服務器響應中顯示為未定義

Question

我正在嘗試允許從我的網站發送電子郵件。 我試圖將信息傳遞給服務器，但是當我在控制台日志中記錄該消息時，它作為未定義返回。 老實說，我什至不知道如何確定服務器正在獲取什么信息，因為我嘗試控制台記錄服務器的數據的所有嘗試均作為未定義返回。 我以前沒有使用過$ .ajax，我通常使用XMLHttpRequest，我也不知道我是否正確執行了此操作。 我想使用$ .ajax。 前端代碼是：

$(function () {

    $("#contactForm input,#contactForm textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function ($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function ($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var phone = $("input#phone").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: "mail",
                type: "POST",
                datatype: "json",
                data: {
                    name: name,
                    phone: phone,
                    email: email,
                    message: message
                },
                cache: false,
                success: function () {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Your message has been sent. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function () {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function () {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function (e) {
        e.preventDefault();
        $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function () {
    $('#success').html('');
});

后端代碼是：

var express = require('express');
var mail = express.Router();
var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
var mandrill = require('mandrill-api/mandrill');
var config = require('../mailkey.js');
var mandrill_client = new mandrill.Mandrill(config.key);

mail.post('/mail', jsonParser, function (req, res) {
    var message = {
        "html": "<p>" + req.body.message + "</p>",
        "subject": "*You have received a message from someone*",
        "from_email": config.from,
        "from_name": req.body.name,
        "to": [{
            "email": config.from,
            "name": config.name,
            "type": "to"
        }],
        "headers": {
            "Reply-To": req.body.email
        },
        "metadata": {
            "phone": req.body.phone
        }
    };

    console.log(message);
    var async = false;
    var ip_pool = null;
    var send_at = null;
    mandrill_client.messages.send({ "message": message, "async": async, "ip_pool": ip_pool, "send_at": send_at }, function (result) {
        res.sendStatus(200);
    }, function (e) {
        res.sendStatus(500);
        // Mandrill returns the error as an object with name and message keys
        console.log('An error occurred sending the mail: ' + e.name + ' - ' + e.message);
        // A mandrill error occurred: Unknown_Subaccount - No subaccount exists with the id 'customer-123'
    });
});


module.exports = mail;

Answer 1

查看您的ajax調用，沒有參數分配給成功處理程序。

success: function (response){
console.log(response);
}

Answer 2

我最終沒有使用$ .ajax並使用XMLHttpRequest。 為了使其工作，我必須通過以下方式將請求標頭設置為json：

xhr.setRequestHeader（“ Content-type”，“ application / json”）; 我使用的前端代碼更改為：

$(function () {

    $("#contactForm input,#contactForm textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function ($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function ($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var phone = $("input#phone").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            var xhr = new XMLHttpRequest();
            xhr.open('post', '/mail', true);
            xhr.setRequestHeader("Content-type", "application/json");
            var data = {
                name: name,
                phone: phone,
                email: email,
                message: message
            };
            var jsonData = JSON.stringify(data);
            xhr.send(jsonData);
            xhr.onload = function () {
                var response = xhr.response;
                if (response === "OK") {
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Your message has been sent. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                } else {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                }
            };
        },
        filter: function () {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function (e) {
        e.preventDefault();
        $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function () {
    $('#success').html('');
});