Question

我目前有一个看起来像这样的表单（使用Bootstrap）： current look http://oi41.tinypic.com/makjgm.jpg

我传统上通过post将表单处理成另一个php文件，如此

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

然而，当它们被带到不同的页面时，它会破坏用户体验，之前我已经看过一些东西，在提交表单之后，如果文本有效，则文本会被更改。因此，如果他们提供有效的电子邮件，上面图片的文字和表格可能会被替换为“谢谢您，您的电子邮件已被接受”。

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

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

其次，我如何在前端做到这一点？在JS中有这种行为的共同参考术语吗？

回答其中的任何一部分（两者都可以！）会很精彩。如果您有不太复杂的参考文件（我是新手），我也非常乐意阅读它们。

谢谢！

Answer 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/

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

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

Answer 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

}
?>

Answer 4

您可以将表单操作=“表单处理器的文件名”放置，或将其留空以用于同一页面。如果您无法避免将php模块放在您的表单所在的同一页面上，请创建一个view.php文件，然后将其包含在内。

index.php＆lt; - 表单进程发生的地方 index.view.php＆lt; - 表单标记所在的位置，因此您将拥有更清晰的代码行。

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

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

4 个答案: