使用 jQuery-AJAX 向 PHP 提交表单并在不刷新的情况下在 div 中显示新内容的问题

Posted 2023-02-24

【中文标题】使用 jQuery-AJAX 向 PHP 提交表单并在不刷新的情况下在 div 中显示新内容的问题

【英文标题】：Problem using jQuery-AJAX to submit form to PHP and display new content in div without refreshing

【发布时间】：2011-09-10 12:26:40

【问题描述】：

我正在尝试使用 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的信息。

【问题讨论】：

pdo function ($action); 是错字/摘要吗？因为否则，这是一个语法错误......

是的，这是一个摘要（有错字！）。我将它从 pdo 函数（$action）修改为 pdo（$data）。好地方，谢谢。

【参考方案1】：

试试这个：

 $("#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>

【讨论】：

不客气。而且，我也学到了一些东西......我不确定网址：'。就像BeingSimple 一样。我必须记住那个。

嗯...乍一看，我可能已经过时了。数据没有保存到数据库中（我看到的初始更改是以前更新的反映）。嗯……

我编辑了答案，以便您的 PHP 页面可以获取您的表单字段。

另外，您尝试获取表单字段值的方式有点偏离。我把这两个选项都放在我的答案中。

好的！它起作用了（这次肯定）。正如您所建议的那样，dataString 的写入方式存在问题。我所做的更改是去掉var action 和var data，只使用var datastring = $("#yourForm").serialize();。非常感谢您的帮助，珍！！！！

【参考方案2】：

似乎您需要解释而不是修复代码。下面对这两种情况做一个简单的解释：

当您取出return false; 时，代码会将您的表单视为普通的HTML 表单，将通过action="" 提交给服务器，这将导致无处可去。然而，在这种情况下，Javascript 也可以完成它的工作，但由于页面被重定向到无处，所以它在最后变成空白。

当你输入return false;回到表单，表单将捕获事件处理程序并知道该表单将返回 FALSE 以提交。这就是为什么您可以看到您的 Javascript 代码是如何完成这项工作的。但是，您应该注意的一件事是，您的 jQuery AJAX 函数需要 POST（或 GET）处理文件，而不是 '.'

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

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

【讨论】：

感谢您的回复，BeingSimpler。我可能在帖子中没有具体说明，但我将表单信息发送到索引文件（我的控制器），所以在取出return false; 的情况下，当我使用@987654328 时，表单被提交到索引文件@，虽然它不知道要显示什么（因此是空白页）。 '.' 也可以将POST 发送到索引文件，但不是我设置其余代码的方式。再次感谢您的回复。