在Codeigniter中使用Ajax和jQuery检查用户名的可用性


check availability of the username using ajax and jquery in codeigniter

在这里,我正在尝试检查用户名输入是否可供用户使用。我正在编码点火器中执行此操作。这是我的视图页面:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    <style type="text/css">
        .no{color:red;}
        .yes{color:green;}
    </style>
    <script>
        $(document).ready(function(){
                // unique user name checking ------------- starts here----------------
                $("#username").blur(function(){
                        var form_data= {
                            action : 'check_username',
                            username : $(this).val
                        };
                        $.ajax({
                                type: "POST",
                                url : "check_unique_username",
                                data : form_data,
                                success : function(result) {
                                    $("#message").html(result.message);
                                    alert(result);
                                }
                        });
                });
                // unique username checking -------------- ends here-----------------
        });  
    </script>
</head>
<body>
    <form class="RegistrationForm" id="RegistrationForm" method="POST" action="">
        <label for="username">User Name</label>
        <div>
            <input id="username" name="username" size="25" class="required" />
        </div>
        <input type="button" id="button1" name="button1" value="check availability" />
        <div id="message"></div>
    </form>
</body>

这是我的控制器代码:

<?php
class Registration extends MX_controller {
    function index(){
        $this->load->view('registrationPage');  // this will load the registration page.
    }
    function unique_username() {
        $action = $_POST['action'];
        if($action=='check_username'){
            $u = $this->input->post('username');
            $users=array("jhon","neo","margo","hacker","user123");
            if(in_array($u,$user)) {
                echo json_encode(array('message' => "It is not available!"));
            }
            else {
                echo json_encode(array('message' => "It is available!"));
            }
        }
    }
}
?>

但是我的代码不起作用,我出错的地方,请帮助我。仅显示它可用于每个用户名

编辑:我更改了我的控制器代码...

在使用div 的 id 时,您没有使用#,因此请使用:

$("#message").html(result);

而不是$("message").html(result);

编辑:更新问题的更新答案。

实际上我们谁都看不到它很愚蠢,但问题是这个字符串:username : $(this).val .原因是.val不是获取文本字段值的jQuery方法,它应该是username : $(this).val()的(带括号)。

这涵盖了第一个JS部分,下一个问题是拼写错误,你有url : "check_unique_username",,但它应该是url : "registration/unique_username",的(没有控制器名称,并且在控制器中没有方法时有不必要的check_前缀)。

下一个错别字在 PHP 中 - if(in_array($u,$user)) { ,但我们有一个数组$users,所以把它改成if(in_array($u,$users)) {,所以 PHP 不会抛出通知。

下一个问题是 AJAX 请求中缺少行dataType: 'json',。我们必须放置它,以便JS可以知道我们正在接收的数据类型并以正确的方式解析它。

之后它应该可以工作。但我有一些建议给你。更改 PHP,以便它返回的不是字符串,而是布尔值。例如 - 如果可用,则为 true,如果不可用,则为 false。

if(in_array($u,$users)) {
    echo json_encode(array('message' => false));
} else {
    echo json_encode(array('message' => true));
}
这样,在

JS代码中操作这些数据会更容易。例如,您可以将以下代码添加到 AJAX 请求的成功部分:

success : function(result) {
    if(result.message) { 
        $("#message").html("It's available!");
        $("#button1").removeAttr('disabled');
    } else {
        $("#message").html("It's not available!");
        $("#button1").attr('disabled','disabled');
    }
}

您将启用/禁用提交按钮。这将确保普通用户在输入用户名时无法提交表单。

此外,我会将事件blur更改为keyup,这样您将获得更快的更新,但服务器上的更新会更重一些。blur事件的问题在于,您的用户无论如何都可以填写用户名并单击按钮,因为模糊事件仅在用户离开元素后触发。

希望这有帮助!