英文:
issue with ajax working on page load but not on button click
问题
我已经玩了一段时间的ajax，以从数据库中获取一些信息。最终我在我的测试文件中让它正常工作，所以我复制了代码到我的实际文件中。它起作用了。然后它就不起作用了。具体来说，当我在文档加载完成后使用我的代码时，它正常工作，但当我点击按钮时，它不起作用。ajax.php文件不是问题，它在文档加载和我直接从浏览器中调用时都可以工作。那么问题是什么？
工作的代码：
<html>
<body>
<form method="POST" action="testsi2.php">
<p><button id="submitOV">submit this</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
console.log("page loaded");
var selectedVak = 7;
var selectedKlas = 2;
var selectedJaar = 2023;
console.log("prepping ajax call");
var url = "ajax.php?vak=" + selectedVak + "&klas=" + selectedKlas + "&jaar=" + selectedJaar + "&task=4";
console.log("calling " + url);
$.ajax(url, { success: function(data) {
console.log("AJAX call was successful.");
console.log("Data from the server = " + data);
},
error: function() { console.log("There was some error performing the AJAX call."); } }
);
});
</script>
这在控制台中输出，如预期：
page loaded
prepping ajax call
calling ajax.php?vak=7&klas=2&jaar=2023&task=4
AJAX call was successful.
Data from the server = 6-3-5-4-3-
6-3-5-4-3-正是我想要的响应，所以一切都正常。
而这个则不行：
<html>
<body>
<form method="POST" action="testsi2.php">
<p><button id="submitOV">submit this</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$("#submitOV").click(function(event) {
console.log("button clicked");
var selectedVak = 7;
var selectedKlas = 2;
var selectedJaar = 2023;
console.log("prepping ajax call");
var url = "ajax.php?vak=" + selectedVak + "&klas=" + selectedKlas + "&jaar=" + selectedJaar + "&task=4";
console.log("calling " + url);
$.ajax(url, { success: function(data) {
console.log("AJAX call was successful.");
console.log("Data from the server = " + data);
},
error: function() { console.log("There was some error performing the AJAX call."); } }
);
});
</script>
</body>
</html>
正如你所看到的，唯一改变的是当我点击按钮时调用ajax，而不是加载页面时，以及第一个console.log()条目。
这次，我得到了：
button clicked
prepping ajax call
calling ajax.php?vak=7&klas=2&jaar=2023&task=4
There was some error performing the AJAX call.
我已经找到了这个链接：https://stackoverflow.com/questions/17713042/ajax-working-on-pageload-but-not-on-button-click 但似乎不能解决问题。
英文:
I've been playing around with ajax for awhile, to get some info out of a database. I finally got it to work in my testfile, so I copied the code to my real file. It worked. And then it didn't. To be specific, when I use my code when the document finishes loading, it works fina and as expected, but when I click on a button, it does not. The ajax.php file isn't the issue, it works both in the document load and when I call it directly from my browser. So what's the issue here?
Working code:
<html>
<body>
<form method="POST" action="testsi2.php">
<p><button id="submitOV">submit this</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
console.log("page loaded");
var selectedVak = 7;
var selectedKlas = 2;
var selectedJaar = 2023;
console.log("prepping ajax call");
var url = "ajax.php?vak=" + selectedVak + "&klas=" + selectedKlas + "&jaar=" + selectedJaar + "&task=4";
console.log("calling " + url);
$.ajax(url, { success: function(data) {
console.log("AJAX call was successful.");
console.log("Data from the server = " + data);
},
error: function() { console.log("There was some error performing the AJAX call."); } }
);
});
</script>
This echoes in the console, as expected:
page loaded
prepping ajax call
calling ajax.php?vak=7&klas=2&jaar=2023&task=4
AJAX call was successful.
Data from the server = 6-3-5-4-3-
The 6-3-5-4-3- is exactly the response I want, so that's all fine.
And this does not:
<html>
<body>
<form method="POST" action="testsi2.php">
<p><button id="submitOV">submit this</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$("#submitOV").click(function(event) {
console.log("button clicked");
var selectedVak = 7;
var selectedKlas = 2;
var selectedJaar = 2023;
console.log("prepping ajax call");
var url = "ajax.php?vak=" + selectedVak + "&klas=" + selectedKlas + "&jaar=" + selectedJaar + "&task=4";
console.log("calling " + url);
$.ajax(url, { success: function(data) {
console.log("AJAX call was successful.");
console.log("Data from the server = " + data);
},
error: function() { console.log("There was some error performing the AJAX call."); } }
);
});
</script>
As you can see, the only thing changed is calling the ajax when I click the button instead of loading the page, and the first console.log() entry.
This time, I get
button clicked
prepping ajax call
calling ajax.php?vak=7&klas=2&jaar=2023&task=4
There was some error performing the AJAX call.
I have found this one: https://stackoverflow.com/questions/17713042/ajax-working-on-pageload-but-not-on-button-click but that doesn't seem to fix the issue.
答案1
得分: 1
action属性告诉表单在提交时要将数据发布到哪个页面。没有任何代码阻止这种情况发生，所以即使您的请求可能按预期执行，但浏览器也会导航到这个页面，因为这是它被告知要做的事情。
您应该监听表单本身的submit事件，而不是按钮的click事件。这将带来一些好处：只要启用了JavaScript，它将允许您使用event.preventDefault()来防止页面重定向，而且还会使表单提交的其他方法（如回车键等）也被拦截。
代码示例如下：
<form id="form" method="POST" action="testsi2.php">
<p><button type="submit">提交</button></p>
</form>
...
<script>
$("#form").on("submit", function(event) {
event.preventDefault(); // 防止页面重定向
// 在此处添加您的提交处理程序
});
</script>
英文:
The action attribute tells the form which page to post the data to when the form is submitted. There's no code preventing this from happening, so even though your request likely goes through as expected, the browser is also navigating to this page, because that's what it's been told to do.
You should listen to the submit event of the form itself, rather than the click event of the button. This will have a couple benefits: it will let you use event.preventDefault() to prevent the page redirect as long as JavaScript is enabled, and it will also make it so other methods of form submission (enter key, etc.) are also intercepted.
It would look something like this:
<form id="form" method="POST" action="testsi2.php">
<p><button type="submit">submit this</button>
</form>
...
<script>
$("#form").on("submit", function(event) {
event.preventDefault(); // prevent the page redirect
// your submit handler here
});
</script>
答案2
得分: -1
这是因为点击按钮会向 testsi2.php 发送请求并重新加载页面，导致您的 AJAX 请求被中止。如果将按钮移出表单，它就可以正常工作。
英文:
That's because clicking the button sends a request to testsi2.php and reloads the page, and your AJAX request gets aborted. If you move the button out of the form, it works fine.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论