AJAX 表单提交没有 Javascript 回退

Question

我是 AJAX 新手，正在将一些常规 HTML 表单转换为 AJAX。

我现有的实现如下 - 表单（在 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，我在此 SO 链接 How to show loading gif when request goes Ajax 上使用 @SSL 的解决方案 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

您想检测这是否是一个 xhr 请求，如果不是，则默认为非 ajax 行为。

我会看$_SERVER['HTTP_X_REQUESTED_WITH']

Answer 2

保持您当前的表单设置不变，如果它在没有 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.
    }
?>