使用纯JavaScript的XHR调用

XHR call using plain JavaScript

本文关键字：XHR 调用 JavaScript      更新时间：2023-09-26

我遇到从本地主机对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" />

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

## 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. 我正在寻找一个纯JS解决方案。我知道该怎么做jQuery.
  2. 我实际上不希望提交表格，只希望提交 应触发onSubmit事件。

这是我的JSFiddle

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

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

您可以通过添加 

return false;

到getUser()提交处理程序函数的末尾。

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

阻止表单提交

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

相关文章：