如何在同一页面上处理表单（前端和后端）？答案

【问题标题】：How do I process forms (front and back end) on the same page?如何在同一页面上处理表单（前端和后端）？
【发布时间】：2014-01-04 03:34:54
【问题描述】：

我目前有一个看起来像这样的表单（使用 Bootstrap）：

我通常通过 post 将表单处理到另一个 php 文件，就像这样

<form action="complete.php" method="post" class="form-inline" role="form">

但是，当他们被带到不同的页面时，它会破坏用户体验，而且我以前见过一些东西，在提交表单后，如果文本有效，文本就会发生变化。因此，如果他们提供有效的电子邮件，则上图的文本和形式可能只是替换为“谢谢，您的电子邮件已被接受”。

所以这个问题分为两部分：

首先，我如何在后端执行此操作？为了简单起见，我使用 php，因为它很容易安装。

其次，我如何在前端做到这一点？这种动作在JS中是否有通用的参考术语？

回答其中的任何一部分（如果可以的话，都回答！）会很棒。如果您有对我来说不太复杂的参考文件（我是新手），我也很乐意阅读它们。

谢谢！

【问题讨论】：

您可以使用 action="" 并将所有内容都放在一个页面中，或者更好的是，使用 AJAX。
使用 ajax 搜索 php 表单。要将其保持在同一页面上，您可以使用 ajax。
stackoverflow.com/questions/1960240/jquery-ajax-submit-form
您只需要使用 ajax 即可，无需刷新。您可以刷新然后只是回显不同的内容，您知道，“感谢您的提交”而不是正常的表单标记
你写过php代码吗？

标签： javascript php jquery forms twitter-bootstrap

【解决方案1】：

我将扩展 Sam Sullivan 所说的关于 Ajax 方法的内容。

Ajax 基本上在后台运行任何脚本，用户几乎不会注意到它。脚本运行后，您可以返回一个布尔值或字符串来检查结果是真还是假。

JS：

function validateForm(){
    $.ajax({
        type: 'POST',
        url: '/path/to/processForm.php',
        data: $('#yourForm').serialize(),
        success: function(output){
            if(output){ // You can do whatever JS action you want in here
                alert(output);
            }else{
                 return true; // this will redirect you to the action defined in your form tag, since no output was found.
            }
        }
    });
    return false;
}

然后在您的 processForm.php 脚本中，您通过$_POST 验证数据。无论你在这个脚本中出现什么echo，都将是你的output。

更多信息，http://api.jquery.com/jquery.ajax/

【讨论】：

【解决方案2】：

在同一页面上包含 PHP 和表单逻辑：

<?php
if(isset($_POST['submit'])) {
  // Submit logic
  echo 'Success';
}
?>

<form action="" method="POST">
  <!-- etc -->
  <input type="submit" name="submit" value="Submit" />
</form>

或者您可以使用 AJAX 提交：

<form action="" method="POST" onsubmit="submitForm(this); return false;">
  <!-- etc -->
  <input type="submit" name="submit" value="Submit" />
</form>

<script type="text/javascript">
  function submitForm(form)
  {
    // This can use AJAX to submit the values to a PHP script
  }
</script>

如果您有 jQuery，则不需要使用内联事件处理程序（更好）：

<script type="text/javascript">
  $('form').submit(function(event) {
    event.preventDefault();

    $form = $(event.target);
    // AJAX here
  });
</script>

这应该足以开始。如果您有具体问题，请告诉我。

【讨论】：

【解决方案3】：

把表格改成

<form action="[whatever the page name is]" method="post" class="form-inline" role="form">

首先，我如何在后端执行此操作？为了简单起见，我使用 php，因为它很容易安装。

在页面顶部，添加

<?php
if(isset($_POST)){
// Check for the $_POST variables and process
// $content = "<div> ... </div>"  // Then echo out the content in place of the original for

}
?>

【讨论】：

【解决方案4】：

您可以只输入 form action="filename-of-the-form-processor" 或为同一页面留空。如果您无法避免将 php 模块放在表单所在的同一页面上，请创建一个 view.php 文件，然后将其包含在内。

index.php

注意：这不是最好的方法。

【讨论】：