javascript：在按钮单击时进行 POST 调用

Question

我想通过向其添加事件侦听器来在按钮单击时创建一个POST，但使用 ajax 我可以进行调用，但我没有任何数据或成功，相同的错误标准。

我发现的一种方法是使用表单提交事件，但我想这不是正确的方法，我应该在按钮单击时进行 POST 调用。

<div id="googleSignInDiv" class="cols-row ">
   <form id="googleSignInform" action="/connect/google" method="post"
      target="google-auth-window">
      <button type="submit" class="btn-primary btn-sub-action  gss-col-12 type-300 social-button google" 
         id="signin-login-google-button" >
      <span class="icon social-icon"></span>
      <span class="btn-label">
      {{[loc-signin-google]}}
      </span>
      </button>
   </form>
</div>

如果我在 onclick 函数中执行此类操作，它不会按预期工作，也不会出现任何错误。

$.ajax({
    url: '/connect/google',
    type: 'POST'
});

在此之后，我有我的代码来打开新窗口。如何进行 post call 并将其目标标记为我在代码中定义的google-auth-window？还是使用表格是正确的方式？

Answer 1

表单中submit 类型按钮的默认行为是提交它，因此您必须首先使用event.preventDefault() 来防止默认行为，然后是单击按钮时想要执行的操作（例如：验证等）。在您的情况下，您可以调用进行 AJAX 调用的函数 (makeAjaxRequest)。您的代码将如下所示：

$("#signin-login-google-button").click(function(event){
  event.preventDefault();
  makeAjaxRequest();
});
function makeAjaxRequest() {
  $.ajax({
      url: '/connect/google',
      type: 'POST',
      success: function(data){
        //code to open in new window comes here
      }
  });
}

在 ajax 调用成功后，您可以编写代码在新窗口中打开它。你也可以参考这个answer。

Answer 2

我想你的问题不在于如何处理Ajax 调用，而是如何将谷歌用户登录与用户集成，而不是通过提交表单来完成，但应该异步完成。 （纠正我我错了:)）

我认为，如果您关注 google 文档 here，您可能会看到 google 已经在 (platform.js) 中提供了一个库，用于通过 ajax 处理它并以单独的形式打开它。

有了它，您就可以拥有一个只有

的 google 登录按钮

<div class="g-signin2" data-onsuccess="onSignIn"></div>

它会打开一个登录窗口并返回到您在 Google API 上的配置中提供的回调 url。

如果您遇到任何问题，请告诉我。 :)