Recently in a project to achieve the following functions:
When I register my account, when I enter the account after the input box is out of focus to execute an AJAX request, verify that the account is registered, not the input box Iscorrect property assignment, if not registered Iscorrect property value is "true", otherwise "false". The code is as follows:
Ajax:function(obj) {/*{elem://Validation element, Hintscontent://Cue box element, E Rrorcolor://color displayed on Error, URL://Background processing page address, Reqdata://Send past content (Save As Object) Correctbool://Return the correct value of data value name Errorbool://Return data error Value name result://Return Data key Name } */ varthat = This; varbool; varid = obj["elem"].id; Console.log (ID); obj["Elem"].iscorrect =false; varHintscontain = This. Findhintscontain (obj["Elem"],obj["Hintscontent"]); //organize as JSON strings varFormatedata = Json.stringify (obj["Reqdata"]); //Save the name of the background return key varResultCode = obj["Result"] $.ajax ({url:obj["url"], type:' GET ', Async:false, DataType:' JSON ', Data:formatedata, success:function(data) {/*the returned data format {"result": "True/false"}*/ //displays an error message if the returned result is false if(Data[resultcode] = = obj["Errorbool"]) {Hintscontain.innertext= that.hintsdata[id]["Ajaxerror"]; HintsContain.style.color= obj["Errorcolor"]; HintsContain.style.visibility= ' Visible '; obj["Elem"].iscorrect =false; BOOL=false; }Else{obj["Elem"].iscorrect =true; BOOL=true; } } }); returnbool; }
The code above is a method in a form validation class that encapsulates itself, roughly meaning that when an element needs to be validated, an AJAX request validation is sent, and the parameter is passed in as a JSON object.
The beginning of the method assigns the initial value "false" to the Iscorrect attribute of the element (the property mentioned at the beginning)
But the interesting thing is that you can't assign the correct value to the value in the callback function.
Successfunction(data) {/*the returned data format {"result": "True/false"}*/ //displays an error message if the returned result is false if(Data[resultcode] = = obj["Errorbool"]) {Hintscontain.innertext= that.hintsdata[id]["Ajaxerror"]; HintsContain.style.color= obj["Errorcolor"]; HintsContain.style.visibility= ' Visible '; obj["Elem"].iscorrect =false; BOOL=false; }Else{obj["Elem"].iscorrect =true; BOOL=true; } }
The above line of code is the value returned by the successful request, I can see the information sent through the background to determine whether the input box is correct, when initially the element's Iscorrect property has been returned "false" regardless of the background given what data.
---------------Focus---------------
So asked a Niang, only to know that the AJAX request in the asynchronous sending and receiving time because sometimes even the server did not return data on the execution of the request succeeded function, so failed to return the correct value, resulting in the specified variable can not be assigned the correct value.
The workaround is to change the asynchronous request to a synchronous request , which resolves the problem:
$.ajax ({ url:obj["url"], ' GET ', false, ' json ' , Data:formatedata,
The Ajax method property of JQ is changed to False
"Notes" questions about the JQ $.ajax function Success callback function cannot assign the correct value or return the correct value