web-dev-qa-db-fra.com

Redirection de page avec requête Ajax réussie

J'ai un formulaire qui utilise Ajax pour la vérification côté client. La fin du formulaire est la suivante:

$.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();

            });

        }
    });

EDIT: Voici mon fichier mail3.php traitant des erreurs:

$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>";
}

Je me demandais s'il était possible de rediriger l'utilisateur vers une page de remerciement si la demande ajax aboutissait et qu'aucune erreur ne soit présente. Est-ce possible?

Merci! Amit

javascriptjqueryajaxredirect
40
Amit

Sûr. Il suffit de mettre quelque chose à la fin de votre fonction de succès comme:

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

où votre serveur renvoie la réponse no_errors en l'absence d'erreur.

35
Adam

Faites juste quelques vérifications d’erreur, et si tout se passe bien, définissez window.location pour rediriger l’utilisateur vers une autre page.

$.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'
        }

    }
});
15
tj111

Vous pouvez simplement rediriger dans votre gestionnaire success, comme ceci:

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

Ou puisque vous affichez les résultats, attendez quelques secondes, par exemple, cela attendrait 2 secondes:

setTimeout(function() {
  window.location.href = "thankyou.php";
}, 2000);
11
Nick Craver
$.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
morels

Dans votre fichier mail3.php, vous devriez intercepter les erreurs lors d'une tentative {} catch {}

try {
    /*code here for email*/
} catch (Exception $e) {
    header('HTTP/1.1 500 Internal Server Error');
}

Ensuite, dans votre appel success, vous ne devrez pas vous inquiéter de vos erreurs, car cela ne reviendra jamais comme un succès.

et vous pouvez utiliser: window.location.href = "thankyou.php"; dans votre fonction de succès, comme l’a déclaré Nick.

2
Jeremy Boyd

Une autre option est:

window.location.replace("your_url")
0
Aram Mutlu

J'ai posté la situation exacte sur un autre fil. Re-post.

Excusez-moi, ceci n’est pas une réponse à la question posée ci-dessus.

Mais apporte un sujet intéressant --- QUAND utiliser AJAX et quand NE PAS utiliser AJAX. Dans ce cas, il est bon de ne pas utiliser AJAX.

Prenons un exemple simple de login et mot de passe. Si le nom d'utilisateur et/ou le mot de passe ne correspondent pas, il serait agréable d'utiliser AJAX pour renvoyer un simple message disant "Login Incorrect". Mais si le login et le mot de passe IS sont corrects, pourquoi devrais-je rappeler une fonction AJAX pour rediriger vers la page utilisateur?

Dans un cas comme celui-ci, je pense que ce serait bien d'utiliser un simple formulaire SUBMIT. Et si la connexion échoue, redirigez-vous vers Relogin.php, qui a le même aspect que Login.php avec un message GET dans l'URL du type Relogin.php? Error = InvalidLogin.

Juste mes 2 cents. :)

0
Nitin Hurkadli

Je pense que vous pouvez le faire avec: 

window.location = "your_url";
0
MilkyWayJoe

Je suppose que vous pourriez attaquer cela de deux manières;

1) insérez window.location = 'http://www.yourdomain.com dans la fonction de réussite.

2) Utilisez un autre appel ajax et insérez-le dans un élément de votre page. Pour plus d’informations, consultez la documentation jQuery à l’adresse http://api.jquery.com/jQuery.get/

0
simnom