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 调用并将其目标标记为我在代码中定义的 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对于同样的。