遇到JavaScript调用约定的问题

Question

以下是代码的快照：

如果Line:3处的函数 testFields 返回false，则控件右转到Line:21并返回 false 。如果 testFields 返回 true ，则控件转到Line:4然后继续处理Line:5处的函数返回的响应，控件继续Line:21，其中 retVal 仍为 false 。也就是说，在函数向函数返回值后检查Line:6的条件：

<form method="POST" onsubmit="return validateInput()" />

在逻辑上，它应首先在Line:7测试条件，然后决定retVal是 true 还是默认 false 然后应通过Line:21返回值。

我的代码在逻辑上有什么问题？

Answer 1

有两种方法。

1. 您可以进行同步ajax请求。

   var retVal ;
   $.ajax({ 
       url: youUrl,
       async: false, // required to pause script until request is done
       success: function( ret ) { 
          retVal = ret; // ret is invisible outside this callback
   
       },
       error : function( err ) {
         // your error logic
       }
   
   });
   //We'll in this line if request is completed and either success or error callback  was called.  
   return retVal;
   

2. 但如果您不希望脚本停止。您可以阻止表单中的默认操作，并从回调中发送表单，例如：

   $( "form" ).submit( function( e, extra ) { 
   
     if( !extra )
       $.post( 
         url: "script.php",
         data: "yourdata",
         success: function( ) {  
           $( "form" ).trigger( "submit", [true] );         
         },
        error: function(){}
    );
   
      // extra parameter will be always undefined until we'll not pass it in an array which will be aplied to listener as  next ones arguments - take a look at success callback
     return !!extra  // doubled negate operator ensures that extra will be returned as boolean because if you return undefined  that means you didn't return anything 
   });
   

和没有onsubmit声明的html表单标签：

<form method="POST" />

Answer 2

您的代码没有任何问题：这是异步函数的工作方式。 Ajax旨在通过异步，这意味着$.post()函数调用之后的代码行 - 在您的情况下是if的结尾和第21行的return将立即执行。同时，浏览器发送ajax请求，当响应进入时，然后在第5行调用您的成功（或错误）回调函数。

虽然您可以设置一个标志来进行调用同步，也就是说，为了使代码执行在此时停止，直到响应回来，这几乎不是一个好主意，因为它也会停止浏览器重新绘制或以其他方式响应用户。最好习惯于以这样的方式构建代码，以便继续在回调函数中进行处理 - 这几乎是目前Web的标准方法。

Answer 3

除了@abuduba的解决方案之外，以下代码也可以使用。

此处 btnSubmit 不是“提交”类型的按钮，只是一个简单的按钮。

<input type="button" id="btnSubmit" value="Submit" />