使用返回的数据通过 ajax 执行额外的 javascript 测试

Question

我有一个由 ajax 脚本调用的 mail.php 文件。为了完整起见，下面附上了 ajax 脚本。 mail.php 文件所做的只是执行一些服务器端验证，如果一切顺利，则发送一封电子邮件，其中包含mail() 和从 ajax 请求发送的数据。

我想要做的是根据请求的响应执行一些额外的 javascript 操作。您可以看到，在当前状态下，请求的响应只是简单地回显到屏幕上，这很好。但现在我想根据响应修改 HTML 元素。

例如，假设如果邮件已发送，我想在页面上附加一个名为“OK”的图像，如果邮件未发送，我想在页面上附加一个名为“FALSE”的图像。我想做的（在伪代码中）是这样的：

if ( request is OKAY ) $('.contact').append('<img src"OK"');
else ( $('.contact').append('<img src="BAD''); 

有什么方法可以做到这一点吗？

谢谢！

ajax脚本如下图：

$('.submit').click(function() {
    $('div.load').html('<img src="images/load.gif" alt="Loading..." id="loading" />'); 

    //creation of variables to send
    var name = $('#name').val();
        email = $('#email').val();
        phone = $('#phone').val();

    $.ajax({
        url: 'mail.php',
        type: 'POST',
        data: 'name=' + name + '&email=' + email + '&phone=' + phone,

        success: function(result) {
            $('p.error,p.correct').remove();
            $('.contact').append(result);
            $('#loading').fadeOut(500, function() {
                $(this).remove();
            });

        }
    });

    return false; 
});

Answer 1

假设您的 PHP 响应文本“OKAY”：

if (result==="OKAY")
   $('.contact').append('<img src"OK" />');
else
   $('.contact').append('<img src="BAD" />');

或者：

$('.contact').append('<img src"' + (result==="OKAY"?'OK':'BAD') + '" />');

另一种方法是更新您的 PHP，使其返回包含消息和图像的 html，例如，成功时它可以返回：

Your request was successful. <img src="OK" />

“我应该提一下，我想保留当前的响应，以确保非 JS 用户也能收到适当的消息”

非 JS 用户不会得到任何东西，因为您的 Ajax 代码使用 JS...

Answer 2

您可能希望服务器端处理程序通过响应返回其状态，例如格式化为 JSON（PHP 有一个函数）。

为了实现这一点并仍然为非 JavaScript 用户获得良好的响应，我建议在 AJAX 中使用与表单的 action 属性不同的 URL，例如带有一个额外的查询参数à la ?json=1。然后，如果参数存在，您的脚本通常可以执行其标准输出并返回易于解析的 JSON（例如，包含当前响应文本和状态代码的关联数组）。如果你告诉它，jQuery 的 AJAX 接口可以自动将响应解析为 JSON。

Answer 3

这就是AJAX调用初始化中成功/错误对象的目的。您需要添加三个失败案例。前两个失败案例将通过success ajax 调用来实现，两者都是由于服务器端问题。第二个错误案例将出现在 ajax 调用的 errorcase 中。此外，您的 Web 服务应该返回一个成功参数。将您的代码更改为类似的内容以实现您所描述的：

$('.submit').click(function() {
    $('div.load').html('<img src="images/load.gif" alt="Loading..." id="loading" />'); 

    //creation of variables to send
    var name = $('#name').val();
        email = $('#email').val();
        phone = $('#phone').val();

    $.ajax({
        url: 'mail.php',
        type: 'POST',
        data: 'name=' + name + '&email=' + email + '&phone=' + phone,

        success: function(result) {
            if (result) {
                if (result.success) {
                    $(".contact").append("<img src='OK.jpg'>");
                    $('p.error,p.correct').remove();
                    $('.contact').append(result);
                    $('#loading').fadeOut(500, function() {
                        $(this).remove();
                    });
                } else { // The server returned data, but there was an error on the server side.
                    $(".contact").append("<img src='BAD.jpg'>");
                }
            } else { // The server had a problem and didn't return any data.
                $(".contact").append("<img src='BAD.jpg'>");
            }
        }
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            // There was an error in the AJAX call.
            $(".contact").append("<img src='BAD.jpg'>");
        },
    }
});

    return false; 
});

另外，您使用的data 参数错误。忽略上面示例的数据部分并将其用作您的数据：

data: {
    name: name,
    email: email,
    phone: phone
}

对于不懂 JavaScript 对象的人来说，这看起来很奇怪。如果您希望我解释一下为什么我们定义具有相同名称的变量，请告诉我，例如：name: name。