Question

我正在尝试使用jQuery-AJAX将我的表单中的数据提交给我的控制器（index.php），在那里它由PHP处理并通过PDO插入数据库（如果有效）。将代码插入数据库后，先前存在的表单的div应替换为另一个页面的内容（newpage.php）。提交表单时不应刷新原始页面，只应刷新以前存在的表格的div。我的代码存在一个特殊问题，尽管我似乎无法找到问题所在：

这是我的jQuery：

<script type="text/javascript">

    function processForm() {
    var action= $('#action').val();
    var data = $('#data').val();
    var dataString = 'action=' + action + '&data=' + data;

$.ajax ({
    type: "POST",
    url: ".",
    data: dataString,
    success: function(){
            $('#content_main').load('newpage.php');
        }
    });
}
</script>

这是我的HTML :(作为旁注，我注意到当我从HTML中取出“return false;”时，表单将提交到我的数据库，但整个页面也会重新加载 - 并且是空白的当我在HTML中留下“return false;”时，newpage.php正确加载到div中，但数据没有进入数据库）

<form action="" method="post" onsubmit="processForm();return false;">

    <input type="hidden" name="action" value="action1" />
    <input type="text" name="data" id="data" />

    <input type="submit" value="CONTINUE TO STEP 2" name="submit" />

</form>

这是我的PHP：

<?php
$action = $_POST['action'];

switch ($action) {
    case 'action1':
        $data = $_POST['data'];

        pdo ($data);

    exit;
}
?>

我觉得我在某个地方犯了一个愚蠢的错误，但我不能把手指放在它上面。感谢您提供的任何帮助！

解决方案（通过Jen）：

jQuery的：

<script type="text/javascript">
    function processForm() {
        var dataString = $("#yourForm").serialize();

    $.ajax ({
    type: 'POST',
    url: ".",
    data: dataString,
    success: function(){
            $('#content_main').load('newpage.php');
          }
        });
    return false;
    });
</script>

HTML：

<form id="yourForm">

    <input type="hidden" name="action" value="action1" />
    <input type="text" id="data" name="data" />

    <input type="submit" value="CONTINUE TO STEP 2" name="submit" />

</form>

PHP：

<?php
    $action = $_POST['action'];

    switch ($action) {
        case 'action1':
            $data = $_POST['data'];

            pdo ($data);

        exit;
    }
?>

我学到了什么：如果它是一个选项，请使用.serialize（）jQuery方法，因为它会节省大量时间为每个表单值写出var，而.serialize（）通常不会错误将信息发送到php。

Answer 1

好像你需要解释而不是修复代码。以下是对这两种情况的简要说明：

当您取出return false;时，代码会将您的表单视为普通的HTML表单，该表单将通过action=""提交给服务器，这无处可去。然而，在这种情况下，Javascript也可以完成它的工作，但由于页面被重定向到了无处，所以最后它变成了空白。
当你放return false;回到表单，表单将捕获事件处理程序，并知道此表单将返回FALSE提交。这就是为什么你可以看到你的Javascript代码如何完成这项工作的原因。但是，您应该注意的一件事是您的jQuery AJAX函数需要POST（或GET）到处理文件，而不是'.'

在不了解您的实际情况的情况下考虑此回复。您需要回顾一下代码，看看如何编辑代码。如果您有任何问题，将很乐意回复。

希望这个小提示有帮助（：

Answer 2

尝试一下：

 $("#yourForm").submit(function(){


  // Could use just this line and not vars below      
  //dataString = $("#yourForm").serialize(); 

  // vars are being set by selecting inputs by id but id not set in form fields
  var action= $('#action').val(); // value of id='action' 
  var data = $('#data').val();    // value of id='data'
  var dataString = 'action=' + action + '&data=' + data;
  // dataString = 'action=&data=' so nothing is posted to db
  // because input fields cannot be found by id
  // fix by adding id fields to form fields

   $.ajax ({
   type: "POST",
   url: ".",
   data: dataString,
   success: function(){
        $('#content_main').load('newpage.php');
    }
   });
return false; 
});

并将表单更改为（我添加了id属性）：

<form id="yourForm">
<input type="hidden" id="action" name="action" value="action1" />
<input type="text" id="data" name="data" id="data" />

<input type="submit" value="CONTINUE TO STEP 2" name="submit" />

</form>

使用jQuery-AJAX将表单提交给PHP并在div中显示新内容而不刷新的问题

2 个答案: