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下检查时，我发现在请求标题部分中形成请求网址的方式有所不同：

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

注意：

我正在寻找 Pure JS 解决方案。我知道怎么做 jQuery的。
我实际上并不想要提交表单，只有应触发onSubmit事件。

这是 JSFiddle

Answer 1

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

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

您只需添加

即可阻止表单提交

return false;

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

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

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

使用普通JavaScript调用XHR

1 个答案: