codeigniter ajax错误用户电子邮件检查

Question

I have created a simple code ajax request for checking email availability in codeigniter framework. but, I get everytime error. and don't know how to resolve it. below is my footer js script(after jquery and other external scripts).

<script>

    $(document).ready(function() {
        $("#loading").hide();
        $("#email").blur(function() {
            var email_val = $("#email").val();
            var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
            if (filter.test(email_val)) {
                // show loader
                $('#loading').show();
                jQuery.ajax({
                    type: "POST",
                    url: "<?php echo site_url()?>users/check_email_ajax",
                    dataType: 'json',
                    data: {
                        '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>',
                        'email': 'email_val'
            },

                success: function (response) {
                    if(response){
                        $('#loading').hide();
                        console.log(response.message);
                        $('#msg').html(response.message)
                        $('#msg').show().delay(10000).fadeOut();
                    }
                },
                    error: function(error){
                        $('#loading').hide();
                        console.log("There is some errors on server : " + error.error);
                    }
                })
            }
        });
    });

and this is my User Controller function to check email in db

    public function check_email_ajax(){
    // allow only Ajax request
    if($this->input->is_ajax_request()) {
        // grab the email value from the post variable.
        $email = $this->input->post('email');
        // check in database - table name : users  , Field name in the table : email
        if(!$this->form_validation->is_unique($email, 'users.email')) {
            // set the json object as output
            $this->output->set_content_type('application/json')->set_output(json_encode(array('message' => 'The email is already taken, choose another one')));
        }else{
            $this->output->set_content_type('application/json')->set_output(json_encode(array('message' => 'you can use this email')));
        }
    }
}

and in the registration form I have this field for email input:

<div class="col-sm-5">
                <input type="email" id="email" name="email" class="form-control">
                <span id="loading"><img src="<?php echo base_url(); ?>ajax-loader.gif" alt="Ajax Indicator" /></span>
            <div id="msg"></div>
            </div>

but now every time I change the value of input. I get error on console.log

There is some errors on server : function (){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this}

anyone knows how to fix it ?

Answer 1

What's standing between you and a successful debug is this part:

error: function (error) {
    $('#loading').hide();
    console.log("There is some errors on server : " + error.error);
}

From the jQuery documentation :

error
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown ) A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." As of jQuery 1.5, the error setting can accept an array of functions. Each function will be called in turn. Note: This handler is not called for cross-domain script and cross-domain JSONP requests. This is an Ajax Event.

What you're logging with console.log is the jqXHR parameter. This should work:

error: function (jqXHR, errorType, error) {
    $('#loading').hide();
    console.log(errorType + ": " + error);
}

Once you get the actual error message you can get to the root of the problem.

Answer 2

I have done this exercise before so Here is my Ajax script which i used. I have taken a different approach from you to get email availability. I haven't put the controller code because it seems slimier to your controller.

$(document).ready(function() {
        //Your Email on key press
       $("#email").keyup(function() {

       var email = $(this).val();
       if (email.length > 3) 
       {    
        $.ajax({
            type: 'POST',
            url: emailAvailability_url,
            data: {
                email: email
            }, success: function(data) {

                // Your Ajax Resonse Here

            } error: function (jqXHR, errorType, error) {
                 $('#loading').hide();
                 console.log(errorType + ": " + error);
            }
        });

        } 
    });
});

This is the controller code which i used:

public function check_email_availability(){

    $data = $this->input->post();

    $this->form_validation->set_error_delimiters('<span class="error">', '</div>');     

    if (($this->form_validation->run('email_verification') == FALSE)){          
        echo form_error('email');
    } else {            
        unset($_POST);
        echo '<span style="color:green;" id="emailIsValid">Available</span>';
    }

}

I have added the validation inside the config.

'email_verification' => array(
            array(
                    'field' => 'email',
                    'label' => 'Email',
                    'rules' => 'required|max_length[50]|valid_email|is_unique[table_name.email]',
                    'errors' => array(
                            'required' => 'Email  is required.',
                            'valid_email' => 'Plese Enter Valid Email',
                            'is_unique' => 'That Email is already taken. Try Again With New Email.'
                    )
            )
)

intention of answer is just try to help. So if you want to stick to your method it's totally your choice. Thanks

Answer 3

I'm so sorry, I have founded solution. it is because that I have used an Authentication in the constructor of User controller. I have changed form action to another controller and its done. now I get the email availability message but if its taken before I got nothing. no ajax-loading gif shown !