javascript - 使用普通 JavaScript 的 XHR 调用

Question

我在从本地主机对 GitHub 域进行 XHR 调用时遇到问题。

单击按钮 Click to get User Profile with Ajax+JS 后，将调用 JS 函数 getUser()。代码按预期工作，即获取特定的 GitHub 用户详细信息(全名和头像)并显示在页面上。

## Code for "Click to get User Profile with Ajax+JS" button
<input type="button" value="Click to get User Profile with Ajax+JS" onclick="getUser()" id="jsBtn" />

但是，当我使用 submit 按钮(或返回)在表单提交上调用相同的 JS 函数时，它不会返回预期的结果，即用户详细信息。

## Code for "Submit" button
<form id="myForm" onsubmit="getUser()">
    #...
    <input type="submit"/>
</form>

在 Network 下检查后，我发现在请求 header 部分中形成请求 URL 的方式有所不同:

## With GitHub username input as kirtithorat
## First Case With "Click to get User Profile with Ajax+JS" button
Request URL:https://api.github.com/users/kirtithorat

## Second Case With "submit" button
Request URL:http://localhost:3000/html_file_name?username=kirtithorat

为什么行为不同？相同的 JS 函数适用于 onclick 但不适用于 onsubmit。

注意:

1. 我正在寻找一个纯 JS 解决方案。我知道怎么做查询。
2. 我实际上并不想提交表单，只是 onSubmit 事件应该被触发。

这是我的 JSFiddle

Answer 1

您的第二个 URL 看起来像表单提交，而不是调用 getUser() 的结果(getUser() ajax 调用可能就在表单提交之前)。

如果您不希望表单实际提交(看起来就是您想要的方式)并且只希望调用您的 onSubmit 处理程序，那么您需要确保提交表单的默认行为被阻止。

你可以通过添加一个

来阻止表单提交

return false;

到您的 getUser() onsubmit 处理函数的末尾。

---

或者，您可以通过将事件传递到 getUser() 函数并使用 e.preventDefault() 来阻止表单提交。

---

阻止表单提交的另一个原因是页面将重新加载表单提交的结果，并且您的 javascript 将不会仍然处于事件状态以接收 getUser() ajax 调用的结果.因此，您必须且只能使用 Ajax 调用或表单提交之一(看起来您只需要 ajax 调用，这样您就可以阻止表单提交)。