JQuery, Ajax और उपयोगकर्ता संचार

उपयोगकर्ताओं के साथ बातचीत करना वेब प्रोग्रामर के सबसे महत्वपूर्ण कार्यों में से एक है।
इस पोस्ट में, मैं "प्राधिकरण" ब्लॉक पर ध्यान देना चाहूंगा, लेकिन इस "विधि" का उपयोग कई अलग-अलग कार्यों के लिए किया जा सकता है।
विचार प्रत्येक कीस्ट्रोक के साथ डेटाबेस में संग्रहीत लॉगिन के साथ लॉगिन (उपयोगकर्ता द्वारा दर्ज किया गया) की जांच करना है। इस घटना में कि दर्ज किया गया लॉगिन डेटाबेस में संग्रहीत लॉगिन से मेल खाता है, इनपुट को हरे रंग में उजागर करें, अन्यथा - लाल रंग में।

यह कैसा दिखता है:




आप यहाँ खेल सकते हैं - nikitascr.ks8.ru/for_habr/authorization

तो, कोड पर एक नज़र डालें:

1) सीएसएस

input { outline:none; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; } input:focus { border: #40c0ff; box-shadow: 0 0 10px rgba(81, 203, 238, 1); -webkit-box-shadow: 0 0 10px rgba(81, 203, 238, 1); -moz-box-shadow: 0 0 10px rgba(81, 203, 238, 1); } 

कुछ भी जटिल और दिलचस्प नहीं है।

2) PHP स्क्रिप्ट जो यह सब प्रोसेस करती है

  <?php if(isset($_POST['login'])){ //     ,   $login = strtolower($_POST['login']); //      require_once('stores.php'); if (!$database = mysqli_connect($db_host, $db_user, $db_password, $db_db)){ echo '   !'; exit();} //  else{ if(!$res = mysqli_query($database, "SELECT `login` FROM `users`")) { echo '    !'; exit(); } else { while($all_login = mysqli_fetch_assoc($res)) if($all_login[login] == $login) //     ,   login_true = 1; $login_true = 1; if($login_true == 1) echo 'ok'; else echo 'error'; } } } ?> 

यह स्क्रिप्ट इस बात की तुलना करती है कि उपयोगकर्ता ने डेटाबेस में संग्रहीत डेटा के साथ क्या दर्ज किया है, और यदि उपयोगकर्ता ने सब कुछ दर्ज किया है तो सही ढंग से "ओके" को अजाक्स स्क्रिप्ट में लौटाता है, अन्यथा यह "त्रुटि" देता है।

और वास्तविक अजाक्स स्क्रिप्ट (JQuery फ्रेमवर्क का उपयोग करके)

 <sript type="text/javascript" src="jquery-1.6.2.min.js"> </sript> <sript type="text/javascript"> //     input  $('#a_login').keyup(function() { //   input  login_user = $('#a_login').val(); $.ajax({ url : 'authorization.php', type : 'POST', //  //     PHP  data : {login : login_user}, // PHP   success : function(xhr, data, textStatus){ if(xhr == 'ok'){ //    $('#a_login').css('box-shadow','0 0 10px rgba(0, 255, 0, 1)'); $('#a_login').css('-webkit-box-shadow','0 0 10px rgba(0, 255, 0, 1)'); $('#a_login').css('-moz-box-shadow','0 0 10px rgba(0, 255, 0, 1)'); } else if(xhr == 'error') { //     $('#a_login').css('box-shadow','0 0 10px rgba(255, 0, 0, 1)'); $('#a_login').css('-webkit-box-shadow','0 0 10px rgba(255, 0, 0, 1)'); $('#a_login').css('-moz-box-shadow','0 0 10px rgba(255, 0, 0, 1)'); } //    else alert(' !'); }, // ,  PHP     error : function(xhr, textStatus, errorObj){ alert('  !'); }, }); }); <sript> 

और जैसा कि मैंने ऊपर लिखा है, परीक्षण स्थल nikitascr.ks8.ru/for_habr/authorization है