表单提交结果以加载到 div

Posted 2023-03-05

【中文标题】表单提交结果以加载到 div

【英文标题】：form submit results to load in div

【发布时间】：2017-12-04 08:32:15

【问题描述】：

现在挣扎了几天并编辑了一些代码，只是为了将我的表单发送到 process.php，然后将结果重新加载到表单所在的 div 中。 我正在使用引导布局，不希望页面重新加载/转到 process.php

html 表单在不通过 ajax 调用时可以正常工作，因此表单和 process.php 是可以的。 唯一的事情是我在

上办理登机手续

$_POST['toevoegen'] == "training toevoegen" 

因为如果我成功转移到 process.php 会有更多的表单。

HTML 表单只是它的一个快照，它有更多的价值。

    <form id="form1" name="form1" method="post" action="process.php">
      <label>datum:</label>
      <input name="datum" id="datum" size="10" type="text" autocomplete="off" /><br><br>
       <label>club:</label>
       <select name="clubid" id="club-list"  onChange="gettrainer(this.value);">
       <option value="">Selecteer club</option>
       <?php
       foreach($results as $club) 
        ?>
       <option value="<?php echo $club["id"]; ?>"><?php echo $club["clubnaam"]; ?   ></option>
       <?php
      
      ?> 
<input type="submit" id="submit" name="toevoegen" value="training toevoegen" />
</form>

ajax 调用是这样的，但目前这根本不起作用。

<script>
      $( document ).ready(function()   

        $('#form1').on('submit', function (e) 

          e.preventDefault();
            var form1 = document.getElementById("form1");
            var fd = new FormData(form1);

          $.ajax(
            type: 'POST',
            url: 'process.php',
            data: fd,
              success: function (response) 
             $("#main").html(response);
            
          );

        );

      );
    </script>

【问题讨论】：

“只有我在 $_POST['toevoegen'] 上签入进程”——这就是问题所在；因为您在此处对表单提交事件做出反应，所以提交按钮值不包含在您使用new FormData(form1) 构建的数据集中。解决此问题的最简单方法是在表单中使用隐藏字段来指示要在服务器端执行的操作，这样就不再依赖于表单的实际提交方式。

感谢@CBroe，但现在我收到一个错误，例如参数在 jquery 中不是可选的。所以我认为我在某个地方还有错误？

什么论据，在哪里？

SCRIPT65535：Het 参数是 niet optioneel jquery-3.2.1.js (8429,4)

您是否对 jQuery 部分进行了任何更改？该错误消息指的是哪一行？

【参考方案1】：

将数据字段更改为数据：$('#form1').serialize(),

<script>
      $( document ).ready(function()   

        $('#form1').on('submit', function (e) 

          e.preventDefault();
          $.ajax(
            type: 'POST',
            url: 'process.php',
            data: $('#form1').serialize(),
              success: function (response) 
             $("#main").html(response);
            
          );

        );

      );
    </script>