如何完成表单后使用 AJAX 重定向并在其他页面上显示数据


HOWTO redirect with AJAX after completing form and show data on a other page

>我已经创建了一个带有验证的表单,在一个人填写完整表单后,我想将他重定向到显示他填写数据的新页面。

但是,单击发送按钮后,此当前代码将保留在同一页面上。

如何将数据发送到另一个页面,例如结果.php?

表单的一部分

<form id="ContactForm" action="">
<tr>
<td class="left_td">Contactpersoon<font size="-2" style="vertical-align:top;">*</font></td><td><input id="contactpersoon" name="contactpersoon" class="inplaceError" maxlength="120" type="text" class="error" autocomplete="off" onFocus="window.scrollTo(0, 0);"/><span class="error" style="display:none; margin-left:40px;"></span></td>
</tr>
<input type="button" class="button_verzenden black" id="send" value="VERSTUUR" /><input type="hidden" id="newcontact" name="newcontact" value="1"></input>
</form>

(这是JAVASCRIPT)

$(document).ready(function() {
contact.initEventHandlers();
});
var contact = {
    initEventHandlers   : function() {
        /* clicking the submit form */
        $('#send').bind('click',function(event){
            $('#loader').show();
            setTimeout('contact.ContactFormSubmit()',500);
        });
        /* remove messages when user wants to correct (focus on the input) */

$('.inplaceError,.foutmelding_antwoorden',$('#ContactForm')).bind('focus',function(){
            var $this       = $(this);
            var $error_elem = $this.next();
            if($error_elem.length)
                $error_elem.fadeOut(function(){$(this).empty()});
            $('#success_message').empty();  
        });
        /* user presses enter - submits form */
        $('#ContactForm input,#ContactForm textarea').keypress(function (e) {
            if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {  

$("#send").click();
                return false;  
            } 
            else  
                return true;  
        });
    },
    ContactFormSubmit   : function() {
        $.ajax({
               type     : 'POST',
               url      : 'php/contact.php?ts='+new Date().getTime(),
               dataType : 'json',
               data     : $('#ContactForm').serialize(),
               success  : function(data,textStatus){
                              //hide the ajax loader
                              $('#loader').hide();
                              if(data.result == '1'){
                                   //show success message
                                   $('#midden').remove();
                                   var tekst = $('input[name=vraag1_antwoorden]:checked').val();
                                   $('#succes_A_div span').html(tekst);
                                   var tekst = $('input[name=vraag2_antwoorden]:checked').val();
                                   $('#succes_B_div span').html(tekst);
                                   //ook nog nodig om het echt te tonen?
                                   $('#succes_A_div').show()
                                   $('#succes_B_div').show()
                                } 
                              else if(data.result == '-1'){
                                  for(var i=0; i < data.errors.length; ++i ){
                                      if(data.errors[i].value!='') {
                                        var elm = $("#"+data.errors[i].name);
                                        // we gaan kijken welk soort element elm is.
                                        // wanneer dat element een span is, moeten we geen nieuwe span meer aanmaken...
                                        switch (elm[0].tagName.toLowerCase()) {
                                          case 'span':
                                            elm.html(data.errors[i].value).fadeIn();
                                            break;
                                          default:
                                            elm.next().html('<span class="foutmelding_quiz">'+data.errors[i].value+'</span>').fadeIn();
                                            break;
                                        }
                                      }
                                          $("#"+data.errors[i].name).next().html('<span class="foutmelding_antwoorden">'+data.errors[i].value+'</span>').fadeIn();
                                  }
                              }                       
                          },
               error    : function(data,textStatus){}
        });
    }  
};

(这是联系人。菲律宾普)

<?php
require_once("db.php");                 /* Database Class */
require_once('utils/is_email.php');     /* Email Validation Script */
/* Handle Ajax Request */
if(isset($_POST['newcontact'])){
    $contact = new Contact();
    unset($contact);
}
else{
    header('Location: ../result.php');
}
/* Class Contact */
class Contact{
private $db;                        /* the database obj */
private $errors         = array();  /* holds error messages */
private $num_errors;                /* number of errors in submitted form */
public function __construct(){
    $this->db = new DB();
    if(isset($_POST['newcontact']))
        $this->processNewMessage();
    else
        header("Location: ../result.php");
}
public function processNewMessage(){
    $contactpersoon     = $_POST['contactpersoon'];     
    $bedrijfsnaam       = $_POST['bedrijfsnaam'];
    $telefoon           = $_POST['telefoon'];
    $email              = $_POST['email'];
    $vraag1_antwoorden  = $_POST['vraag1_antwoorden'];
    $vraag2_antwoorden  = $_POST['vraag2_antwoorden'];

    /* Server Side Data Validation */
    /* Contactpersoon Validation */
    if(!$contactpersoon || mb_strlen($contactpersoon = trim($contactpersoon)) == 0)
        $this->setError('contactpersoon', 'Vul uw contactpersoon in');
    else if(mb_strlen(trim($contactpersoon)) > 120)
        $this->setError('contactpersoon', 'Te lang! 120 karakters max.');
    /* Bedrijfsnaam Validation */
        if(!$bedrijfsnaam || mb_strlen($bedrijfsnaam = trim($bedrijfsnaam)) == 0)
        $this->setError('bedrijfsnaam', 'Vul uw bedrijfsnaam in');
    else if(mb_strlen(trim($bedrijfsnaam)) > 120)
        $this->setError('bedrijfsnaam', 'Te lang! 120 karakters max.');
        /* Telefoon Validation */
        if(!$telefoon || mb_strlen($telefoon = trim($telefoon)) == 0)
        $this->setError('telefoon', 'Vul uw telefoonnummer in');
    else if(mb_strlen(trim($telefoon)) > 120)
        $this->setError('telefoon', 'Te lang! 120 karakters max.');
        /* Vraag 1 Validation */
        if(!$vraag1_antwoorden || mb_strlen($vraag1_antwoorden = trim($vraag1_antwoorden)) == 0)
        $this->setError('vraag1_antwoorden', 'Selecteer een antwoord a.u.b.');
        /* Vraag 2 Validation */
        if(!$vraag2_antwoorden || mb_strlen($vraag2_antwoorden = trim($vraag2_antwoorden)) == 0)
        $this->setError('vraag2_antwoorden', 'Selecteer een antwoord a.u.b.');
        /* Email Validation */
    if(!$email || mb_strlen($email = trim($email)) == 0)
        $this->setError('email','Vul uw e-mail in');
    else{
        if(!is_email($email))
            $this->setError('email', 'Vul een correct email adres in');
        else if(mb_strlen($email) > 120)
            $this->setError('email', 'Te lang! 120 karakters max.');
    }
    /* Errors exist */
    if($this->countErrors() > 0){
        $json = array(
            'result' => -1, 
            'errors' => array(
                            array('name' => 'contactpersoon'    ,'value' => $this->error_value('contactpersoon')),
                            array('name' => 'bedrijfsnaam'  ,'value' => $this->error_value('bedrijfsnaam')),
                            array('name' => 'email'     ,'value' => $this->error_value('email')),                               
                            array('name' => 'telefoon'  ,'value' => $this->error_value('telefoon')),
                            array('name' => 'vraag1_antwoorden' ,'value' => $this->error_value('vraag1_antwoorden')),
                            array('name' => 'vraag2_antwoorden' ,'value' => $this->error_value('vraag2_antwoorden')),
                        )
            );              
        $encoded = json_encode($json);
        echo $encoded;
        unset($encoded);
    }
    /* No errors, insert in db*/
    else{
        if(($ret = $this->db->dbNewMessage($contactpersoon, $bedrijfsnaam, $email, $telefoon, $vraag1_antwoorden, $vraag2_antwoorden)) > 0){
            $json = array('result'      => 1); 
            if(SEND_EMAIL)
                $this->sendEmail($contactpersoon,$bedrijfsnaam,$email,$telefoon,$vraag1_antwoorden,$vraag2_antwoorden);
        }   
        else
            $json = array('result'      => -2); /* something went wrong in database insertion  */
        $encoded = json_encode($json);
        echo $encoded;
        unset($encoded);
    }
}
public function sendEmail($contactpersoon,$bedrijfsnaam,$email,$telefoon,$vraag1_antwoorden,$vraag2_antwoorden){
    /* Just format the email text the way you want ... */
    $message_body   = "<div style='"font-size:12px; font-weight:normal;'">Hallo,<br><br>"
                                ."Het volgende bedrijf heeft zich zojuist aangemeld:</div><br>"
                                ."<table cellpadding='"1'" cellspacing='"1'" width='"550px'"><tr><td style='"font-size:12px; color:#000000'">Bedrijfsnaam:</td><td style='"font-size:12px; color:#000000'">".$bedrijfsnaam."</td></tr><tr><td style='"font-size:12px; color:#000000'">Contactpersoon:</td><td style='"font-size:12px; color:#000000'">".$contactpersoon."</td></tr><tr><td style='"font-size:12px; color:#000000'">Telefoonnummer:</td><td style='"font-size:12px; color:#000000'">".$telefoon."</td></tr><tr><td style='"font-size:12px; color:#000000'">E-mail:</td><td style='"font-size:12px; color:#000000'">".$email."</td></tr><tr><td style='"font-size:12px; color:#000000'">Antwoord vraag 1:</td><td style='"font-size:12px; color:#000000'">".$vraag1_antwoorden."</td></tr><tr><td style='"font-size:12px; color:#000000'">Antwoord vraag 2:</td><td style='"font-size:12px; color:#000000'">".$vraag2_antwoorden."</td></tr></table><br>";
        // Geef GELDIGE adressen op
        // Een korte benaming voor jouw website
        $website_naam = 'Aanmelding';
        // Jouw eigen geldige emailadres
        $eigen_emailadres = 'EMAIL';
        // Een geldig emailadres voor errors
        $error_emailadres = 'EMAIL';
        // De naam van de verzender
        $naam_verzender = ''.$bedrijfsnaam.'';
        // Het geldige emailadres van de afzender
        $email_verzender = ''.$email.'';
        // Een geldig emailadres of helemaal leeg laten
        $bcc_emailadres = '';
        // HTML mail? True/False
        $html = true;
        // De headers samenstellen
        $headers     = 'From: ' . $website_naam . ' <' . $eigen_emailadres . '>' . PHP_EOL;
        $headers    .= 'Reply-To: ' . $naam_verzender . ' <' . $email_verzender . '>' . PHP_EOL;
        $headers    .= 'Return-Path: Mail-Error <' . $error_emailadres . '>' . PHP_EOL;
        $headers    .= ($bcc_emailadres != '') ? 'Bcc: ' . $bcc_emailadres . PHP_EOL : '';
        $headers    .= 'X-Mailer: PHP/' . phpversion() . PHP_EOL;
        $headers    .= 'X-Priority: Normal' . PHP_EOL;
        $headers    .= ($html) ? 'MIME-Version: 1.0' . PHP_EOL : '';
        $headers    .= ($html) ? 'Content-type: text/html; charset=iso-8859-1' . PHP_EOL : '';

        mail(EMAIL_TO,MESSAGE_SUBJECT,$message_body,$headers);
}
public function setError($field, $errmsg){
    $this->errors[$field]   = $errmsg;
    $this->num_errors       = count($this->errors);
}
public function error_value($field){
    if(array_key_exists($field,$this->errors))
        return $this->errors[$field];
    else
        return '';
}
public function countErrors(){
    return $this->num_errors;
}
};
?>

更新问题 20-08-2012

有谁知道是否可以使用以下代码解决此问题:

  <input type="hidden" name="redirect_to" value="http://redirect.to.com">

$redirect_to = apply_filters('login_redirect', $redirect_to, isset( $_REQUEST['redirect_to'] ) ? $_REQUEST['redirect_to'] : '', $user);

(来源:单击表单提交按钮时重定向)

如果可能,我需要将此代码放在哪里?

你还没有说初始表单在哪个页面上,但如果它是php/contact.php,那么这就是它保持在同一页面上的原因。 基本上,您只需要将 POST 调用jQuery.ajax()中的 URL 更改为其他页面。 请注意,这要求您将所有表单处理代码移动到另一个页面中,如果它当前处于php/contact.php(我怀疑是这样)。