在codeigniter中使用ajax和jquery檢查用戶名的可用性

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，則為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 個解決方案

解決方案1
1

解決方案2
0 2012-07-05 09:46:18

在codeigniter中使用ajax和jquery檢查用戶名的可用性

問題描述

2 個解決方案

解決方案1 1

解決方案2 0 2012-07-05 09:46:18

解決方案1
1

解決方案2
0 2012-07-05 09:46:18