Rumah  >  Artikel  >  hujung hadapan web  >  Keutamaan pelaksanaan ajax dalam jquery_jquery

Keutamaan pelaksanaan ajax dalam jquery_jquery

WBOY
WBOYasal
2016-05-16 15:53:331600semak imbas

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&#63;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&#63;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

Salin kod Kod adalah seperti berikut:

--Laksanakan panggilan fungsi--Pengesahan biasa--Mulakan ajax--Fungsi kembalikan panggilan balik ajax
                                                                                                        Permintaan penyemak imbas--pemprosesan php--pelayar menerima hasilnya


Jika anda mahu fungsi kembali selepas panggilan balik ajax, anda boleh menukar model di atas, sebagai contoh:

--Laksanakan panggilan fungsi--Pengesahan biasa--Mulakan ajax        Panggil balik Ajax—Fungsi kembali
                                                                                                        Permintaan penyemak imbas--pemprosesan php--pelayar menerima hasilnya



Ini boleh dicapai dengan mengubah suai sama ada jquery memulakan ajax secara tak segerak atau serentak!

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn