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，我在此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.
    }
?>

AJAX表单提交没有Javascript后备

2 个答案: