codeigniter ajax 表单验证与提交

Question

i have this ajax form validation code igniter. my view is something like this

    <?php

      echo form_open('Provinces/create',array('id' => 'form-user'));
    ?>

                <label for="PROVINCE" class="col-sm-2 control-label col-sm-offset-2">Province Name:</label>
                  <div class="col-sm-5">
                    <input type="text" class="form-control" id="PROVINCE" name="PROVINCE" value = "<?= set_value("PROVINCE"); ?>">
                  </div>
                <button class="btn btn-info fa fa-save" type="submit">&nbsp Save</button>
                <a href = '<?php echo base_url().'Provinces/index'; ?>' class = 'btn btn-danger fa fa-times-circle'>&nbsp Cancel</a>
     <?php

      echo form_close();
    ?>

and i have this javascript

<script>

    $('#form-user').submit(function(e){
        e.preventDefault();

        var me = $(this);

        // perform ajax
        $.ajax({
            url: me.attr('action'),
            type: 'post',
            data: me.serialize(),
            dataType: 'json',
            success: function(response){
                if (response.success == true) {
                    // if success we would show message
                    // and also remove the error class
                    $('#the-message').append('<div class="alert alert-success">' +
                        '<span class="glyphicon glyphicon-ok"></span>' +
                        ' Data has been saved' +
                        '</div>');
                    $('.form-group').removeClass('has-error')
                                    .removeClass('has-success');
                    $('.text-danger').remove();

                    // reset the form
                    me[0].reset();

                    url = "<?php echo site_url('Provinces/ajax_add')?>";
                           // ajax adding data to database
                      $.ajax({
                        url : url,
                        type: "POST",
                        data: $('#form').serialize(),
                        dataType: "JSON",
                        success: function(data)
                        {
                           alert('success');
                        },
                        error: function (jqXHR, textStatus, errorThrown)
                        {
                            alert('Error adding / update data');
                        }
                    });

                }else{
                    $.each(response.messages, function(key, value) {
                        var element = $('#' + key);
                        element.closest('div.form-group')
                        .removeClass('has-error')
                        .addClass(value.length > 0 ? 'has-error' : 'has-success')
                        .find('.text-danger')
                        .remove();
                        element.after(value)
                    });
                }
            }
        });
    });

</script>

i have found this code on google and just customized it. but the problem is, i am not that familiar with ajax, the part where the form validation fails, work perfectly fine, but when it is succes, even though it shows alert('success'); it doesnt add the value in the database. i need to finish this projects in a few weeks. please help.

here is where i get the validations,

public function create(){


    $data = array('success' => false, 'messages' => array());

    $this->form_validation->set_rules('PROVINCE','Province Name','trim|required|max_length[30]|callback_if_exist');
    $this->form_validation->set_error_delimiters('<p class="text-danger"','</p>');

    if($this->form_validation->run($this)){

        $data['success'] = true;
    }else{
        foreach ($_POST as $key => $value) {
            # code...
            $data['messages'][$key] = form_error($key);
        }
    }

    echo json_encode($data);
}

also here is my ajax_add

public function ajax_add()
{
    $data = array(
            'PROVINCE' => $this->input->post('PROVINCE'),
        );
    $insert = $this->Provinces_Model->save($data);
    echo json_encode(array("status" => TRUE));
}

and here is my model,

public function save($data)
{
    $this->db->insert($this->table, $data);
    return $this->db->insert_id();
}

Answer 1

1. You dont't need to use uppercase when accessing your controller

just use

 url = "<?php echo site_url('provinces/ajax_add')?>";

2. Validation the request data before inserting

try

public function ajax_add()
{
   $response = array(
       'success' => false 
    ) ;

   $this->load->library('form_validation');
   // add your validation
   $this->form_validation->set_rules('PROVINCE', 'PROVINCE', 'required');

   if ($this->form_validation->run() == FALSE)
   {

       $data = array(
        'PROVINCE' => $this->input->post('PROVINCE')
        );

        $insert = $this->Provinces_Model->save($data);
        if($insert){
            $response['success'] = TRUE ;
            $response['message'] = 'Record created successfully' ;
         }
         else{
           $response['message'] = 'Unable to create record' ;
         }
   }
   else
   {
       $response['message'] = 'Invalid data' ;
   }

    echo json_encode($response);
}

Then check for the 'message' index in your ajax response in the javascript code

This will give an idea of where there is problem, whether its from the

1. view or
2. controller or'
3. Model

Answer 2

i have solved it. just did put

        $data = array(
                'PROVINCE' => $this->input->post('PROVINCE'),
            );
        $insert = $this->Provinces_Model->save($data);
        echo json_encode(array("status" => TRUE));

into my controller, which makes my controller

public function create(){


    $data = array('success' => false, 'messages' => array());

    $this->form_validation->set_rules('PROVINCE','Province Name','trim|required|max_length[30]|callback_if_exist');
    $this->form_validation->set_error_delimiters('<p class="text-danger"','</p>');

    if($this->form_validation->run($this)){


        $data['success'] = true;
        $data = array(
                'PROVINCE' => $this->input->post('PROVINCE'),
            );
        $insert = $this->Provinces_Model->save($data);
        echo json_encode(array("status" => TRUE));

    }else{
        foreach ($_POST as $key => $value) {
            # code...
            $data['messages'][$key] = form_error($key);
        }
    }

    echo json_encode($data);
}

and my javascript

$('#form-user').submit(function(e){
    e.preventDefault();

    var me = $(this);

    // perform ajax
    $.ajax({
        url: me.attr('action'),
        type: 'post',
        data: me.serialize(),
        dataType: 'json',
        success: function(response){
            if (response.success == true) {
                // if success we would show message
                // and also remove the error class
                $('#the-message').append('<div class="alert alert-success">' +
                    '<span class="glyphicon glyphicon-ok"></span>' +
                    ' Data has been saved' +
                    '</div>');
                $('.form-group').removeClass('has-error')
                                .removeClass('has-success');
                $('.text-danger').remove();

                // reset the form
                me[0].reset();
                $('.alert-success').delay(500).show(10, function() {
                    $(this).delay(3000).hide(10, function() {
                        $(this).remove();
                    });
                })

            }else{
                $.each(response.messages, function(key, value) {
                    var element = $('#' + key);
                    element.closest('div.form-group')
                    .removeClass('has-error')
                    .addClass(value.length > 0 ? 'has-error' : 'has-success')
                    .find('.text-danger')
                    .remove();
                    element.after(value)
                });
            }
        }
    });
});