AJAX-表单提交，同一页面，PHP [英] AJAX - form submit, same page, PHP
问题描述
我已经将AJAX代码更改为现在使用的代码，并且还在代码中包含了JQuery
我已经阅读了尽可能多的AJAX，但我失败了！
I've read up on as much AJAX as I can and I am flat out failing!
我的HTML表单如下:
My HTML form looks like this:
<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>
从堆栈中，我设法获得了这个AJAX:
From Stack I've managed to get this 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，页面会刷新.
I've tried changing it from button to input and back again but nothing seems to change. The form still submits but it ignores the AJAX and the page refreshes.
推荐答案
您需要阻止JS提交表单，并且使用的表单ID错误.另外，根据评论判断，您需要包含jquery.
You need to prevent the JS from submitting the form, and you're using the wrong form ID. Also, judging by the comments, you need to include jquery.
在HTML文件的头中，在<head>和</head>之间或紧接</body>标记之前，您可以使用以下代码:
In the head of your HTML file, between <head> and </head> or just before the closing </body> tag, you can use the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
以下代码可能会对您有所帮助(尽管建议不要查询与您的ajax请求所发出的页面相同的页面):
The following code may help you (though it's advised to not query the same page as your ajax request emits from):
<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
