Jquery and scope issues with $.post
I am having one small problem with my code. I am sending a POST request to my page, after I am done it should return "OK" meaning it worked. From inside my handler function I call set_var(data) to set my global variables text, but the problem is my print_info() returns undefined.
I've spent a lot of time on this and realize my problem has to do with scoping somehow but I am not sure how to go about fixing it. If anyone can provide any pointers, that would be great.
<?
if($_REQUEST['action'] == 'test')
{
echo "OK";
die;
}
?>
<script type="text/javascript" src="jquery-1.6.1.js" ></script>
<script type="text/javascript">
var ajax_post_result;
function set_var(data)
{
//PRINTS MY TEXT OK
alert("SET:: " + data);
//SET TO MY GLOBAL VARIABLE
ajax_post_result = data;
//ALSO PRINTS OK
alert("SET2:: " + ajax_post_result);
}
function return_handler(data, textStatus)
{
开发者_C百科 //THESE BOTH WORK ... BUT ONLY HERE AND WITHIN set_var()
//alert("1: " + data); //PRINTS WHAT I NEED
//CALL FUNCTION TO SET GLOBAL VARIABLE
set_var(data);
}
function print_info()
{
return ajax_post_result;
}
function ajax_post(file, data )
{
$.post( file, data, return_handler);
//PRINTS UNDEFINED
alert("RETURN:: " + print_info() );
}
</script>
<form id=newform name='testform'>
<input type="hidden" name="newexample" value="1">
Enter Something: <input name="something" id='something1' value="" type="text">
<input type="button" value="Submit" name="Submit" onclick="ajax_post('index.php?action=test', $('#newform').serialize() ); return false;">
</form>
AJAX requests are, as evidenced by the first A in the acronym, asynchronous. So, when you call $.post()
, execution of the ajax_post
function continues on its merry way more or less immediately, without waiting for the request to finish. You get to your "RETURN" alert before your return_handler
has run to set the global variable.
You can use jQuery.ajax
and set the async
option to false
, which will get you a synchronous request.
Or, and I recommend this strategy, move all the things that need to happen only after the request is done to the success handler.
Your problem is due to the asynchronous nature of AJAX.
You should do all your post AJAX processing in the callback function. Something like this (using your current functions)
$.post(file, data, function(data, textstatus) {
return_handler(data, textstatus);
alert("RETURN:: " + print_info());
});
Though you could easily combine your functions into the one closure (minus the alerts), eg
$.post(file, data, function(data, textstatus) {
ajax_post_result = data;
});
精彩评论