This time I will bring you the adjustment of the ajax execution order in jquery. What are the precautions for adjusting the ajax execution order in jquery? The following is a practical case, let's take a look.
When doinguser registration today: I found a strange problem, please look at the code:
$('input[name="username"]').blur(function(){ //验证格式 var pattern = /^[a-z][\w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12个字符,必须以字母开头,只能输入数字,字母和下划线</font>'); return false; } //验证用户名是否被注册 $.post('register.php?act=checkUser',{username:$(this).val()},function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>'); return false; } },'json'); //成功 alert('成功'); //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />'); });
2. If the format is correct, then AJAX determines whether the username is occupied.
3. If successful, the correct icon will be displayed.
if($_GET['act'] == 'checkUser') { if($_SERVER['HTTP_X_REQUESTED_WITH'] !== 'XMLHttpRequest') exit('非法操作!!!'); $sql = "SELECT id FROM {$sys_vars['db_pre']}user WHERE username='{$_POST['username']}'"; $result = mysql_query($sql); $data = mysql_fetch_assoc($result); if ($data) { exit(json_encode(array('status'=>'error','info'=>'该用户名已被注册!!!'))); }else{ exit(json_encode(array('status'=>'success'))); } }
The analysis is as follows
ajax is an asynchronous operation. When executing ajax-related functions, the system returns the function first, Make a request again, and when the request result is received, it will be returned to the user by calling thecallback function.
$('input[name="username"]').blur(function(){ //验证格式 var pattern = /^[a-z][\w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12个字符,必须以字母开头,只能输入数字,字母和下划线</font>'); return false; } //验证用户名是否被注册 $.post('register.php?act=checkUser',{username:$(this).val()},function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>'); return false; } }, function(data){ //对于post函数,第三个参数为回调函数 alert('成功'); } ,'json'); //成功 //alert('成功'); //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />'); });
Different ajax functions have slightly different usage methods of their callback functions. Please refer to the w3school tutorial or the jQuery official website.
Copy code The code is as follows:
--Execute function call--regular verification--initiate ajax--function return
|
#If you want the function to return after the ajax callback, you can change the above model, for example:
The code is as follows:
-- Execute function call--regular verification--initiate ajax callback--function return | |
Browser request--php processing--browser receives result
This can be achieved by modifying whether jquery initiates ajax asynchronously or synchronously!
$('input[name="username"]').blur(function(){ //验证格式 var pattern = /^[a-z][\w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12个字符,必须以字母开头,只能输入数字,字母和下划线</font>'); return false; } //验证用户名是否被注册 var ajaxCheckUser = false; $.ajax({ type: "POST", url: "register.php?act=checkUser", data: {username:$(this).val()}, // 注意这里 async:false success: function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>'); //return false; } else { ajaxCheckUser = true; } },'json'); if(ajaxCheckUser) { //成功 alert('成功'); //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />'); } });
Summary of the advantages and disadvantages of Ajax
##What are the steps to easily upload files with ajax html
The above is the detailed content of Ajax execution order adjustment in jquery. For more information, please follow other related articles on the PHP Chinese website!