使用AJAX将项目插入数据库

Question

I'm trying to update my database using AJAX

This is my ajax function

$(document).ready(function() {
  $('#submit').click(function (event) {
    event.preventDefault();

    if($('#category').val()===''){
        alert('Please enter a category name.')
    }
    else{
        var category = $('#category').val();
        var subcategory = $('#subcategory').val();

        alert(category);
        alert(subcategory);

        $.ajax({
            type: "POST",
            url: "Admin_controller/insertCategory",
            data:{ category:category, subcategory:subcategory },
            success: function(data) {
                alert('You can now add items.');
            }
        });
    }
  });
});

Here is my Admin_controller

public function insertCategory(){
    $category = $this->input->post('category');
    $subcategory = $this->input->post('subcategory');

    $this->form_validation->set_rules('category', 'Category', 'required');
    $this->form_validation->set_rules('subcategory', 'Subcategory', 'required');

    if($this->form_validation->run() == FALSE){
        $this->load->view('ADMIN_ADDCategory');
    }
    else{
        $category_id = $this->admin_model->insertCategory($category);
        $this->admin_model->insertSubcategory($category_id, $subcategory);
    }
}

Here is my model

function insertCategory($category){
    $data = array(
        'category' => $category,
        'status' => 1
    );
    $this->db->insert('category', $data);
    $this->db->insert('category', $data);

    $id = $this->db->insert_id(): //assign the last inserted id to variable $id
    return $id;
}

function insertSubcategory($category_id, $subcategory){
    $data = array(
        'category_id' => $category_id,
        'subcategory' => $subcategory,
        'status' => 1
    );
    $this->db->insert('subcategory', $data);
}

When I click the button that is supposed to trigger the AJAX function it shows the alert('You can now add items.'); but it doesn't update my database with my required values.

I already tried doing

var category = $('#category').val();
var subcategory = $('#subcategory').val();

alert(category);
alert(subcategory);

to view if it gets my inputs and yes it does. After the alert it just refreshes my page.

What am i doing wrong? Thanks for the help.

Answer 1

Your ajax request is not having any POST data to send. Yes it is making a POST request to the controller, but no data is being sent. The category and subcategory variables in Admin controller will be false in that case, resulting in the issue.

You need to send category and subcategory as data in your AJAX request:

In your JS code, you haven't done validation if subcategory is there or not.

Also, before making the AJAX request, you will need to declare two variables category and subcategory. This is how the AJAX request will look like (I haven't done any validations).

var category = $('#category').val();
var subcategory = $('#subcategory').val();

$.ajax({
    type: "POST",
    data:{ category:category, subcategory:subcategory},
    url: "<?=base_url()?>index.php/Admin_controller/insertCategory",
    success: function(data) {
        alert('You can now add items.');
    }
});

Apart from that, you can also optimise your code by changing this in your model:

    $this->db->insert('category', $data);
    $this->db->select('id');
    $this->db->from('category');
    $this->db->where('category', $category);
    $this->db->limit(1);
    $query = $this->db->get();
    return $query->result();

into this:

    $this->db->insert('category', $data);

    return $this->db->insert_id();

If any doubts, let me know.