使用纯 JavaScript 调用 XHR

Question

我在从 localhost 对 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 下检查后，我发现请求标头部分中请求 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. 我正在寻找 Pure JS 解决方案。我知道怎么做 jQuery。
2. 我实际上并不希望提交表单，只希望提交 应该触发onSubmit 事件。

这是我的JSFiddle

Answer 1

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

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

你可以通过添加一个来阻止表单提交

return false;

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

---

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

---

阻止表单提交的另一个原因是页面将重新加载表单提交的结果，并且您的 javascript 将无法继续接收getUser() ajax 调用的结果。因此，您必须使用 Ajax 调用或表单提交中的一个且仅一个（看起来您只需要 ajax 调用，因此您可以阻止表单提交）。