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回复了文本＆＃34; OKAY＆＃34;：

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" />

＆＃34;我应该提一下，我还要保留当前的响应，以确保非JS用户也能获得相应的消息＆＃34;

非JS用户将无法获得任何内容，因为您的Ajax代码使用JS ...

Answer 2

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

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

Answer 3

这是AJAX调用初始化中成功/错误对象的目的。您需要添加三个失败案例。由于服务器端问题，前两个失败案例将通过success ajax调用。第二个错误情况将在ajax调用的error情况下。此外，您的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。

使用返回的数据使用ajax执行其他javascript测试

3 个答案: