jquery AJAX 在页面加载上工作而不是在按钮点击上工作的问题

6l7fqoea 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(122)

我一直在玩 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-正是我想要的React，所以这一切都很好。
而这并不：

<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."); } }
    );
});

型
如您所见，唯一的变化是在单击按钮时调用 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.

型
我找到了这个：Ajax working on pageload but not on button click但这似乎并没有解决问题。

jquery

来源：https://stackoverflow.com/questions/76747162/issue-with-ajax-working-on-page-load-but-not-on-button-click

2条答案

按热度按时间

6ju8rftf1#

action属性告诉表单在提交表单时将数据发布到哪个页面。没有代码阻止这种情况发生，因此即使您的请求可能会按预期进行，浏览器也会导航到此页面，因为这是它被告知要做的事情。
您应该侦听窗体本身的submit事件，而不是按钮的click事件。这将有几个好处：它会让你使用event.preventDefault()来防止页面重定向，只要JavaScript被启用，它也会让它这样，表单提交的其他方法（回车键等）也被拦截。
它看起来像这样：

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

字符串

赞(0）回复(0）举报 2023-08-04

neekobn82#

这是因为单击该按钮会向testsi2.php发送一个请求并重新加载页面，而您的 AJAX 请求会被中止。如果您将按钮移出窗体，它将正常工作。

赞(0）回复(0）举报 2023-08-04