Question

我有以下main ajax function，我希望稍后用于multiple posts，这就是为什么它有callback function as an argument。但是，此代码中的某些内容必须是错误的，因为它does not post any data到文本文件但我在控制台中没有得到any error。我click the button时没有任何反应。

  function postAjax( sUrl , frmData, callback ){
              var ajax = new XMLHttpRequest();
              ajax.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var ajDataFromServer = JSON.parse(this.responseText);
                    callback( ajDataFromServer );
                }
            }           
              ajax.open( "POST", sUrl , true );
              var jFrm = new FormData( frmData );
              ajax.send( jFrm )                 
            }

  // DO the SIGNUP, POST data to the SERVER with AJAX

  // GLOBAL ARRAY for storing any USER DATA from the SERVER
  var ajDataFromServer = [];

  btnSignupForm.addEventListener("click", postAjax("api_signup_users.php", frmSignup, signupUser));

  function signupUser(ajDataFromServer) {

              if ( ajDataFromServer.status == "ok" ) {

                  //console.log( "SIGNUP SUCCESFULL" );
                  pageLogin.style.display = "flex";
                  pageSignup.style.display = "none";
                  lblLoginErrorMessage.innerHTML = "";
                  var sSignupSuccesMessage = "Account succesfully created - Signup please";
                  var sSignupSuccesMessage = sSignupSuccesMessage.fontcolor( "#549839" );
                  lblLoginErrorMessage.insertAdjacentHTML('beforeend', sSignupSuccesMessage);

              } else {

                  //console.log( "SIGNUP FAIL - TRY AGAIN" );
                  pageViewProducts.style.display = "none";
                  pageSignup.style.display = "flex";
                  lblSignupErrorMessage.innerHTML = "";
                  var sSignupErrorMessage = "Signup Failed - Try again";
                  lblSignupErrorMessage.insertAdjacentHTML( 'beforeend', sSignupErrorMessage );

              }
          }

Answer 1

绑定按钮单击的方式不正确。有关示例，请参阅https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener。

基本上，当前的方式会立即调用该函数，然后返回结果以便在点击时绑定。你想要的是绑定到函数的引用，以便每次单击按钮时都可以调用它。

我在这里整理了一个简化的jsfiddle以证明其不同之处 https://jsfiddle.net/fdhtmj65/

您会注意到，因为函数是在绑定到失败按钮时立即执行的，所以您在页面加载时会立即收到警报，因为该函数是在addEventListener期间执行的。

你的addEventListener行看起来应该更像这样

btnSignupForm.addEventListener("click", function()
    {
        postAjax("api_signup_users.php", frmSignup, signupUser)
    });

带函数回调的ajax不起作用

1 个答案: