当浏览器不允许JavaScript时如何在提交后重定向

Question

当 JavaScript 被禁用时，我的表单出现问题：

• 表单是从页面 index.php 提交的
• 收件人收到表格
• 在 include.emailSender.php 处挂起

返回原始页面我缺少什么？从网页到流程表单的代码：

<?php include_once('includes/include.contactForm.php'); ?>

include.emailSender.php 文件：

<?php


$contactformRecipient = 'a@b.org';


$contactformTitle = 'Contact from ...';


if($_POST) {
    $contactName = addslashes( $_POST['contactName'] );
    $contactEmail = addslashes( $_POST['contactEmail'] );
    $contactPhone = addslashes( $_POST['contactPhone'] );
    $contactMessage = addslashes( $_POST['contactMessage'] );


    $message = '';
    $message .= 'Name:  ' . $contactName . '<br />';
    $message .= 'Email:  ' . $contactEmail . '<br />';
    $message .= 'Phone:  ' . $contactPhone . '<br />';
    $message .= 'Message:  ' . $contactMessage . '<br />';



    // Email Headers
    $headers = "From: " . $contactEmail . "\r\n";
    $headers .= "Reply-To: ". $contactEmail . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

    // send mail
    // mail( to, subject, message, headers, parameters)
    mail( $contactformRecipient, $contactformTitle, $message, $headers );
}

?>

include.contactForm.php 文件：

<?php 
$randomNumber1 = rand(1, 12);
$randomNumber2 = rand(1, 12);

$contactCaptchaAnswer = $randomNumber1 + $randomNumber2;
?>
            <div id="contact-warning">
            </div><!-- // #contact-warning -->

            <div id="contact-success">
                Email successfuly sent, thank you.<br />    
            </div><!-- // #contact-warning -->

            <form name="contactForm" id="contactForm" method="post" action="includes/include.emailSender.php">
                <fieldset>

                    <label for="contactName">Your Full Name <span class="required">*</span></label>
                    <input name="contactName" type="text" id="contactName" size="60" value="" />

                    <br />
                    <label for="contactEmail">Email Address <span class="required">*</span></label>
                    <input name="contactEmail" type="text" id="contactEmail" size="60" value="" />

                    <br />
                    <label for="contactPhone">Phone <span class="required">*</span></label>
                    <input name="contactPhone" type="text" id="contactPhone" size="60" value="" />
                    <br />
                    <label for="contactMessage">Message <span class="required">*</span></label>
                    <textarea name="contactMessage" id="contactMessage" rows="6" cols="7"></textarea>

                    <br />
                    <label for="contactCaptcha"><strong><?php echo $randomNumber1; ?></strong> + <strong><?php echo $randomNumber2; ?></strong> = <span class="required">*</span></label>
                    <input name="contactCaptcha" type="text" id="contactCaptcha" size="30" value="" />

                    <input name="contactCaptchaAnswer" type="hidden" id="contactCaptchaAnswer" value="<?php echo $contactCaptchaAnswer; ?>" />

                    <br />
                    <label class="placeholder">&nbsp;</label>
                    <button class="submit">Submit</button>
                </fieldset>
            </form>

jQuery 文件：

 var isEmail_re       = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;

function isEmail (s) {
return String(s).search (isEmail_re) != -1;
}

$(document).ready(function(){

// Smooth scrolling to internal anchors
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 600);
            return false;
        }
    }
});

// ScrollSpy automatically updates nav targets based on scroll position
// http://twitter.github.com/bootstrap/javascript.html#scrollspy
$('#nav').scrollspy();


selectnav('nav');

// Handle Contact Form Submission
$('form#contactForm button.submit').click(function() {
    var contactName = $('form#contactForm input#contactName').val();
    var contactEmail = $('form#contactForm input#contactEmail').val();
    var contactPhone = $('form#contactForm input#contactPhone').val();
    var contactMessage = $('form#contactForm #contactMessage').val();
    var contactCaptcha = $('form#contactForm input#contactCaptcha').val();
    var contactCaptchaAnswer = $('form#contactForm input#contactCaptchaAnswer').val();

    var dataString = 'contactName=' + contactName + '&contactEmail=' + contactEmail +      '&contactPhone=' + contactPhone + '&contactMessage=' + contactMessage;       
    var contactError = '';

    // Check name
    if( contactName == '' ) {
        contactError += 'Please enter your name<br />';
    }

    // Check e-mail
    if ( contactEmail == '') {
        contactError += 'Please enter your e-mail<br />';
    } else if ( isEmail(contactEmail) !== true ) {
        contactError += 'Please enter a valid e-mail address<br />';
    }
    if( contactPhone == '' ) {
        contactError += 'Please enter your phone number<br />';
    }

    if( contactMessage == '' ) {
        contactError += 'Please enter your message<br />';
    }

    if ( contactCaptcha !== contactCaptchaAnswer ) {
        contactError += 'Please enter the correct validation value <br />';
    }

    if ( contactError == '' ) {
        $.ajax({
            type: "POST",
            url: "includes/include.emailSender.php",
            data: dataString,
            success: function() {
                $('#contact-success').fadeIn();
                $('form#contactForm').fadeOut();
                $('#contact-warning').hide();
            }
        });
    } else {
        $('#contact-warning').html(contactError);
        $('#contact-warning').fadeIn();
    }

    return false;

});
});

Answer 1

现在我没有阅读你所有的代码，而是我想给你一些关于何时使用 AJAX:ing 表单或其他东西的提示。

不是首先构建表单的 JavaScript + AJAX 版本，而是开始纯版本。可以在全球所有类型设备上的浏览器中运行。

一旦完成，你hijax那个表格。使用 jQuery 和 jQuery Form 插件 (http://www.malsup.com/jquery/form/) 再简单不过了。假设您已经设置了表单：

<form method="post" action="some-action.php" id="my-form">
    <p><label>Some field<br><input type="text" name="foo"></label></p>
    <p><input type="hidden" name="bar" value="1"><input type="submit" value="Go"></p>
</form>

并且您已确保 some-action.php 正确处理表单提交（不使用 AJAX）然后简单地：

$('#my-form').ajaxForm(function (data) {
    alert(data); // data returned by some-action.php
});

现在，如果您想在 some-action.php 中执行不同的操作，具体取决于它是否是 AJAX 调用（例如，您可能希望在非 AJAX 调用上重定向回上一页），您只需检查 $_SERVER['HTTP_X_REQUESTED_WITH']，我通常会这样做（在你保持常量的地方）：

define('XHR', (
    isset($_SERVER['HTTP_X_REQUESTED_WITH']) and 
    strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'
));

然后在some-action.php:

if (XHR) {
    die(json_encode(array('success' => true)));
}
else {
    header('Location: ' . $_SERVER['http_referer']);
}

所谓的渐进增强（最纯粹的版本优先）相对于优雅降级（最高级的版本）的好处与移动优先设计的好处相同。它们都在其他地方得到了更好的解释，比如 Brad Frost 的博客：http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/