logo标签列表

通过成功的Ajax请求进行页面重定向

javascriptjqueryajaxredirect
49

我有一个表单，在客户端使用Ajax进行验证。该表单的结尾如下：

$.ajax({
        url: 'mail3.php',
        type: 'POST',
        data: 'contactName=' + name + '&contactEmail=' + email + '&spam=' + spam,

        success: function(result) {
            //console.log(result);
            $('#results,#errors').remove();
            $('#contactWrapper').append('<p id="results">' + result + '</p>');
            $('#loading').fadeOut(500, function() {
                $(this).remove();

            });

        }
    });

编辑：这是我的mail3.php文件处理错误的代码：

$errors=null; 

if ( ($name == "Name") ) {
    $errors = $nameError; // no name entered
}
if ( ($email == "E-mail address") ) {
    $errors .= $emailError; // no email address entered
}
if ( !(preg_match($match,$email)) ) {
    $errors .= $invalidEmailError; // checks validity of email
}
if ( $spam != "10" ) {
    $errors .= $spamError; // spam error
}

if ( !($errors) ) {
    mail ($to, $subject, $message, $headers);
    //header ("Location: thankyou.html");
    echo "Your message was successfully sent!";
    //instead of echoing this message, I want a page redirect to thankyou.html

} else {
    echo "<p id='errors'>";
    echo $errors;
    echo "</p>";
}
我想知道在ajax请求成功且没有错误时，是否可以将用户重定向到一个感谢页面。这可能吗？ 谢谢！ Amit
如何使用jQuery重定向页面 - Andrea Zilio
2
@Andrea：这不是重复的问题，因为我只想在没有错误时重定向页面。如果存在错误，我希望它能写出这些错误。 - Amit
这个回答解决了你的问题吗？ 如何在jQuery中重定向页面？ - ToolmakerSteve
我认为这是一个重复的问题。问题的实质是如何进行重定向，可以在链接的问答中看到可以在此处使用的代码，在测试所需测试以确定没有错误之后。事实上，每个答案“在这里”都像答案“那里”一样，在明显的“if”检查之后。 - ToolmakerSteve
9个回答
47
当然可以。只需在成功函数的末尾添加一些内容，例如：
if(result === "no_errors") location.href = "http://www.example.com/ThankYou.html"

当没有错误存在时，您的服务器返回响应no_errors。

3
正确使用HTTP状态码可以让每个成功都变成真正的成功，而无需服务器返回任何消息。 - Jeremy Boyd
2
@Jeremy- 没错，除非你想传递特定的错误消息供网站处理，或者在失败时重定向到不同的URL。这些消息必须与200响应代码一起返回，需要一个no_errors响应来区分。 - Adam
实际上，乍一看，我觉得这种方法会起作用！ - Amit
иғҪеҗҰиҺ·еҸ–д»Һmail3.phpж–Ү件иҝ”еӣһзҡ„$errorеҸҳйҮҸ并жЈҖжҹҘе…¶еҶ…е®№гҖӮеҰӮжһң!($error)пјҢйӮЈд№ҲйҮҚе®ҡеҗ‘йЎөйқўпјҹ - Amit
1
@Adam - 不一定。jQuery的Ajax对象中的错误函数仍将能够访问响应的响应文本。 - Jeremy Boyd
21

进行一些错误检查，如果所有内容都正确，则设置window.location将用户重定向到另一个页面。

$.ajax({
    url: 'mail3.php',
    type: 'POST',
    data: 'contactName=' + name + '&contactEmail=' + email + '&spam=' + spam,

    success: function(result) {
        //console.log(result);
        $('#results,#errors').remove();
        $('#contactWrapper').append('<p id="results">' + result + '</p>');
        $('#loading').fadeOut(500, function() {
            $(this).remove();

        });

        if ( /*no errors*/ ) {
            window.location='thank-you.html'
        }

    }
});
如果所有的错误都通过mail3.php文件处理，我该如何检查没有错误的情况？ - Amit
1
你应该在mail3.php文件中捕获错误，并在响应中返回500状态码。 - Jeremy Boyd
1
你能详细说明一下吗？我应该如何返回500状态码？ - Amit
能否获取从mail3.php文件（参见EDIT）返回的$error变量并检查其内容。如果!($error)，则重定向页面。 - Amit
1
@Amit 我会这样做：如果(result === "Your message was successfully sent!")//redirect，否则$('#id ofEmptyDivOnPage').html(response)，这将在页面上显示错误（如果有错误）并重定向（如果没有错误），假设您的div具有该ID。 - Adam
@Adam：使用 window.location 进行重定向在本地托管的服务器上（使用 XAMPP）是否有效？因为它没有起作用。 - Amit
15

你可以在success处理程序中直接重定向，像这样：

window.location.href = "thankyou.php";

或者，由于您正在显示结果，请等待几秒钟，例如，这将等待2秒钟：

setTimeout(function() {
  window.location.href = "thankyou.php";
}, 2000);
你能看一下我的修改，看看我如何处理没有错误的情况吗？如果没有错误出现，我只想将其重定向到 thankyou.php。 - Amit
@Amit - 你可以在这之前加上 if(result === "Your message was successfully sent!")，这样只有在这些情况下才会发送。 - Nick Craver
3
$.ajax({
        url: 'mail3.php',
        type: 'POST',
        data: 'contactName=' + name + '&contactEmail=' + email + '&spam=' + spam,

        success: function(result) {

            //console.log(result);
            $('#results,#errors').remove();
            $('#contactWrapper').append('<p id="results">' + result + '</p>');
            $('#loading').fadeOut(500, function() {
                $(this).remove();

            });

            if(result === "no_errors") location.href = "http://www.example.com/ThankYou.html"

        }
    });
2
在你的mail3.php文件中，你应该使用try {} catch {}来捕获错误。
try {
    /*code here for email*/
} catch (Exception $e) {
    header('HTTP/1.1 500 Internal Server Error');
}

在你的success回调中，你不必担心错误，因为它永远不会以成功的方式返回。

你可以像Nick所说的那样，在你的成功函数中使用：window.location.href = "thankyou.php";。

2

我在另一个帖子上发布了确切的情况，请重新发布。

对不起，这不是对上面发布的问题的答案。

但是带来了一个有趣的话题---何时使用AJAX，何时不使用AJAX。在这种情况下，最好不要使用AJAX。

让我们以登录和密码为例。如果登录和/或密码不匹配，则使用AJAX报告一个简单的消息说“登录不正确”会很好。但是，如果登录和密码正确，为什么我还要回调一个AJAX函数来重定向到用户页面呢？

在这种情况下，我认为只需使用一个简单的表单提交就好了。如果登录失败，请重定向到Relogin.php，该页面与Login.php相同，并在URL中带有一个GET消息，例如Relogin.php?error=InvalidLogin......之类的东西......

只是我的两分钱。 :)

1

我认为你可以用以下方式实现：

window.location = "your_url";
0

我想你可以用两种方法来解决这个问题：

1）在成功的函数中插入window.location = 'http://www.yourdomain.com。

2）使用另一个ajax调用并将其注入到页面上的元素中，更多信息可以在jQuery文档中找到http://api.jquery.com/jQuery.get/。

0

另一个选项是：

window.location.replace("your_url")
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接