检查用户名是否存在使用ajax

Question

我使用此代码来检查数据库中是否存在用户名。代码工作良好，并显示可用或用户名。现在我想提交按钮应该被禁用，当用户选择用户名被采取befor和启用时，用户名可用。请指导我如何。

$(document).ready(function() { 
    $('#username').keyup(function() { 
     $.post('adm/chk_uname_avail.php', { 
      uname : changeuser.username.value 
     }, function(result){ 
      $('#available').html(result); 
     }) 
    }) 
}) 

Answer 1

使用.attr() jQuery的方法在某些条件下禁用提交。

所以，你可以更新您的jQuery这样，

$.post('adm/chk_uname_avail.php', { 
     uname : changeuser.username.value 
    }, function(result){ 
     $('#available').html(result); 
     if(/* CHECK FOR CERTAIN CONDITION */) { 
      $('#submit_btn').attr('disabled','disabled'); 
     } 
    }); 

要删除disabled属性，你可以使用jQuery的方法。与此类似，

$('#submit_btn').removeAttr('disabled'); 

http://api.jquery.com/attr/

https://api.jquery.com/removeAttr/

Answer 2

我使用的旧$.ajax功能，并确保你有一个布尔类型数据键控taken（为例）在adm/chk_uname_avail.php并注意你应该从中返回JSON数据类型。实例的adm/chk_uname_avail.php

<?php 
//return response as JSON 
header('Content-type:application/json;charset=utf-8'); 

.... 
.... 
.... 

$data['taken'] = true; //show this response to ajax 
echo json_encode($data); 

?> 

阿贾克斯

$(document).ready(function() { 
    $('#username').on('keyup', function() { 
     $.ajax({ 
      type: 'POST', 
      url: 'adm/chk_uname_avail.php', 
      data: {uname : changeuser.username.value}, 
      success: function(result) { 
       var $btn = $('#submiButton'); 
       if (result.taken) { 
        $btn.prop('disabled', true); 
       } else { 
        $btn.prop('disabled', false); 
       } 
       //As @Mikey notice, You can just use this as simply as 
       //$('#submiButton').prop('disabled', result.taken); 
      }   
     }); 
    }); 
});