Question

这里我试图检查用户输入是否可供用户使用。我在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!"));

            }
        }
    }
}
?>

但我的代码无效，我出错了，请帮帮我..显示只有每个用户名都可用

已编辑：我已更改控制器代码...

Answer 1

使用div的id时，您没有使用#，因此请使用：

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

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

Answer 2

编辑：更新后的问题的更新答案。

这实际上是非常愚蠢的我们都没有看到它，但问题是这个字符串：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事件的问题在于，您的用户无论如何都可以填写用户名并点击该按钮，因为只有在用户离开元素后才会触发模糊事件。

希望这有帮助！

使用codeigniter中的ajax和jquery检查用户名的可用性

2 个答案: