Question

编辑：我已将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 I我设法得到这个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并且页面刷新。

Answer 1

您需要阻止JS提交表单，并且您使用了错误的表单ID。另外，根据评论判断，您需要包含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>

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

1 个答案: