AJAX表單提交沒有Javascript後退

Question

我是AJAX新手，並且正在將某些常規HTML表單轉換爲AJAX。

我現有的實現如下 - form（在page1.php上）發佈到page2.php，它對發佈數據做了一些驗證，如果缺少某些內容，則重定向到錯誤頁面。如果輸入正常，它會包含page3.php，它將處理請求並重定向回page1.php。

PHP/page1.php中

<form method="post" action="/php/page2.php" > 
    <input type="text" name="input1" placeholder="Howdy..." /> 
    <input type="text" name="input2" placeholder="Howdy..." /> 

    <input type="submit" value="Submit" />  
</form> 

PHP /使page2.php

<?php 

    // perform some validation on inputs 
    if (empty($_POST['input1'])) 
    { 
    $location ='Location: /php/error.php'; 
    header($location); 
    exit; 
    } 

    // Inputs are fine 
    include('/php/page3.php'); 

?> 

page3.php

<?php 

    // do some form processing 


    // redirect back to page1.php 
    $location = 'Location: /php/page1.php"; 
    header($location); 
    exit; 
?> 

要轉換到AJAX，我使用@ SSL的解決方案上此SO鏈接How to show loading gif when request goes Ajax http://jsfiddle.net/clickthelink/Uwcuz/1/

來自驗證和成功頁面的錯誤都通過回調函數顯示在page1.php中。

PHP /使page2.php

<?php 

    // perform some validation on inputs 
    if (empty($_POST['input1'])) 
    { 
    // Echo erorr code isntead of redirect 
    echo "Please enter input1"; 
    return; 

    //$location ='Location: /php/error.php'; 
    //header($location); 
    //exit; 
    } 

    // Inputs are fine 
    include('/php/page3.php'); 

?> 

page3.php

<?php 

    // do some form processing 

    // Echo success instead of redirect 
    echo "SUCCESS"; 

    // redirect back to page1.php 
    //$location = 'Location: /php/page1.php"; 
    //header($location); 
    //exit; 
?> 

這部分工作的罰款。

我的問題（最後）是我如何處理禁用JavaScript的用戶？我知道表單會被正確提交，但如果出現錯誤或成功，我不會得到重定向。我想在這種情況下也保留header（）重定向類型的功能。這可能嗎？我將不勝感激。

Answer 1

保留目前的形式設置爲-是，如果是爲你工作沒有JavaScript的。

對於啓用JavaScript的瀏覽器，您可以劫持表單上的「提交」事件。捕獲事件並通過ajax將表單發佈到腳本/頁面，該腳本/頁面以易於使用的JavaScript格式處理和返回數據以供最終使用。

例如，使用jQuery：

<form method="post" action="/php/page2.php" id="js-form" > 
    <input type="text" name="input1" placeholder="Howdy..." /> 
    <input type="text" name="input2" placeholder="Howdy..." /> 
    <input type="submit" value="Submit" />  
</form> 

<script> 
$(document).ready(function(){ 
    $('#js-form').on('submit',function(e){ 

     // logic to submit ajax form and handle response 

     // return false to cancel native browser form submission. 
     return false; 
    }); 
}); 
</script> 

另一個想法是讓你已有的頁面，但是送一個標記與Ajax請求禁用瀏覽器重定向頭。例如，通過ajax提交表單時添加'src = ajax'。然後在腳本中使用邏輯來說：

<?php 
    if(!empty($_REQUEST['src'] && $_REQUEST['src'] == 'ajax') { 
     // add redirect logic here. 
    } 
?> 

Answer 2

您想檢測這是否是xhr請求，如果不是，則默認爲非ajax行爲。

我想看看$_SERVER['HTTP_X_REQUESTED_WITH']