Rumah > Artikel > hujung hadapan web > Keutamaan pelaksanaan ajax dalam jquery_jquery
Apabila melakukan pendaftaran pengguna hari ini: Saya mendapati masalah pelik, sila lihat kod:
$('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" />'); });
Secara logiknya, format di atas ialah
1. Sahkan sama ada nama pengguna mematuhi format
2. Format adalah betul dan kemudian AJAX menentukan sama ada nama pengguna diduduki,
3. Jika kedua-duanya berjaya, ikon yang betul akan dipaparkan,
Tetapi masalahnya ialah selepas saya berjaya mengesahkan format pengguna, ia melaksanakan alert('success') secara langsung, dan kemudian melaksanakan ajax. Mengapa ini? Adakah ia masalah masa dengan pelaksanaan ajax? Atau sesuatu yang lain? ? ?
Ini ialah kod PHP:
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'))); } }
Analisis adalah seperti berikut
ajax ialah operasi asynchronous Apabila melaksanakan fungsi berkaitan ajax, sistem mula-mula mengembalikan fungsi dan kemudian membuat permintaan Apabila hasil permintaan diterima, ia akan dikembalikan kepada pengguna dengan memanggil fungsi panggil balik.
$('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" />'); });
Ubah suai seperti ini, cuba dan rasai perbezaannya.
Fungsi ajax yang berbeza mempunyai kaedah penggunaan yang sedikit berbeza bagi fungsi panggil baliknya Sila rujuk tutorial w3school atau laman web rasmi jQuery.
Ini sebenarnya masalah penyegerakan dan ketidaksegerakan js. Jika tidak segerak, anda boleh bayangkan dua baris
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.