AJAX表单提交没有Javascript回退

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

我现有的实现如下所示——表单（在page1.php上）将posts发送到page2.php，它对post数据进行一些验证，并在缺少某些内容时重定向到错误页面。如果输入没有问题，它将包括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');

?>

<?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


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

<?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;
?>

page3.php

<?php

  // do some form processing


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

<?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;
?>

---

您希望检测这是否是xhr请求，如果不是，则默认为非ajax行为

如果当前的表单设置在没有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>


$（文档）.ready（函数（）{
$（'#js form'）。关于（'submit'，函数（e）{
//提交ajax表单和处理响应的逻辑
//返回false以取消本机浏览器表单提交。
返回false；
}); 
});

另一个想法是保留已有的页面，但在ajax请求中发送一个标志以禁用浏览器重定向头。例如，在通过ajax提交表单时添加'src=ajax'。然后在脚本中使用逻辑表示：

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

您可以很容易地识别请求是否是AJAX调用，因为它设置了HTTP头。因此，在没有js的表单提交情况下，应该可以让PHP后端做出不同的响应。不确定为什么这个问题被否决？如果投否决票的人留下评论，我会很感激，这样我就知道我做错了什么。顺便说一下，我确实发现了一些关于AJAX回退的问题，没有JS，但没有具体的重新定向到原始页面。@gpgekko感谢您的快速回复。你的建议和quoo的建议一样吗？或者别的什么，谢谢你。这似乎很有希望。。然而，在帖子上有一个免责声明“$\u服务器['HTTP\u X\u REQUESTED\u WITH']是金券，但并非所有服务器都提供此变量，因此进行其他检查将很重要。”是否要发表评论？评论中还提出了一些安全问题。这能被欺骗吗？此外，这种跨浏览器兼容吗？至少ie8+我不太确定他指的是什么其他检查，但本文详细介绍了发送正确的标题：再次感谢链接，这很好地澄清了问题。我是否将xhr.setRequestHeader（）调用添加到$（[ajax=true]”）中.submit（函数（e）{}代码块，在.ajax（）调用之前？（我指的是我原来文章中的fiddle）再次感谢您的回复。我接受@mspaly response，因为我有点担心使用这种方法时服务器的不一致性。传递ajax参数似乎更简单，风险也更小。对于您的详细回复，我非常喜欢您添加新标志以识别ajax提交的想法。您能澄清一下吗如何使用这个ajax实现。试试这个。注意防止浏览器表单提交的方法和手动添加src=ajax查询参数。非常感谢！我很感激。所以“src”应该可以通过$\u POST访问，对吗？你能评论一下在xhr头方法上使用这个方法的好处吗？至于防止浏览器默认表单提交，例如preventDefault（）；正在执行此操作。请参阅本文，了解preventDefault（）和return false之间的差异。