AJAX - 表单提交，同一页面，PHP答案

【问题标题】：AJAX - form submit, same page, PHPAJAX - 表单提交，同一页面，PHP
【发布时间】：2023-03-20 19:49:01
【问题描述】：

编辑：我已将 AJAX 代码更改为我现在使用的代码，并且我还在我的代码中包含了 JQuery

我已经尽可能多地阅读了 AJAX，但我完全失败了！

我的 HTML 表单如下所示：

<form action="match_details.php" method="post" id="match_details">
....
<button type="submit" form="match_details" name="match_details" class="w3-button w3-block w3-mam w3-section" title="Update Match Postcode">Update</button>
            </form>

从 Stack 我设法得到了这个 AJAX：

<script type="text/javascript">
$(function(){
    $('button[type=submit]').click(function(e){

    e.preventDefault();

        $.ajax({
            type: "POST",
            url: "match_details.php",
            data: $("#match_details").serialize(),
            beforeSend: function(){
                $('#result');
            },
            success: function(data){
                $('#result').html(data);
            }
        });
    });
});
</script>

我尝试将其从按钮更改为输入并再次返回，但似乎没有任何改变。表单仍会提交，但它会忽略 AJAX 并刷新页面。

【问题讨论】：

将type="submit" 更改为type="button"
谢谢，我试过了，但没有任何区别:(
这只是一个问题。另一个是$("myform")
我也改了，但恐怕还是不开心
丑。你不包括 jQuery。

标签： php jquery ajax

【解决方案1】：

您需要阻止 JS 提交表单，并且您使用了错误的表单 ID。此外，根据 cmets 判断，您需要包含 jquery。

在您的 HTML 文件的头部，在 <head> 和 </head> 之间或在结束 </body> 标记之前，您可以使用以下内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

以下代码可能会对您有所帮助（尽管建议不要查询与发出 ajax 请求的页面相同的页面）：

<script type="text/javascript">
$(function(){
    $('button[type=submit]').click(function(e){

    e.preventDefault();

        $.ajax({
            type: "POST",
            url: "match_details.php",
            data: $("#match_details").serialize(),
            beforeSend: function(){
                $('#result');
            },
            success: function(data){
                $('#result').html(data);
            }
        });
    });
});
</script>

【讨论】：

谢谢你，我尝试了代码，不幸的是它没有工作，上面的建议也没有，所以我显然在我的某个地方出错了。
你能打开控制台日志并输出任何错误吗？
根本找不到任何错误。这一切都很奇怪！
那么下一步，当你向“match_details.php”页面发出ajax请求的时候，你有什么东西可以监听到表单是否已经提交了吗？
是的，我可以看到表单已提交