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

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

<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，我完全失败了

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

我的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>

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

....
更新

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

$（函数（）{
$（'button[type=submit]'）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
url:“match_details.php”，
数据：$（“#匹配#u详细信息”）.serialize（），
beforeSend:function（）{
$（“#结果”）；
},
成功：功能（数据）{
$（'#result'）.html（数据）；
}
});
});
});

---

我试着把它从按钮改为输入，然后再改回来，但似乎什么都没变。表单仍在提交，但它会忽略AJAX，页面会刷新。

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

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

在HTML文件的头部，在

和

之间或在关闭

标记之前，您可以使用以下选项：

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

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

$（函数（）{
$（'button[type=submit]'）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
url:“match_details.php”，
数据：$（“#匹配#u详细信息”）.serialize（），
beforeSend:function（）{
$（“#结果”）；
},
成功：功能（数据）{
$（'#result'）.html（数据）；
}
});
});
});

将

type=“submit”

更改为

type=“button”

谢谢，我已经尝试过了，但是没有任何区别：（这只是一个问题。另一个问题是

$（“myform”）

我也改变了这一点，但仍然没有乐趣。我很抱歉。你没有包括jQuery。谢谢你，我尝试了代码，但不幸的是，它没有工作，上面的建议也没有，所以我显然在某个地方出了问题。你能打开控制台日志并输出任何错误吗？根本找不到任何错误。这是一个错误I’我很奇怪！下一步，当你向“match_details.php”页面发出ajax请求时，你有没有听到任何消息，看看表单是否已提交？是的，我可以看到表单已提交