Применение Ajax (Codeigniter)

Question

У меня есть этот скрипт, и мне нужно применить к нему ajax.Может кто-нибудь дать мне представление о том, как применять ajax к этим кодам?Мне нужно передать эти переменные на контроллере.Это работает просто отлично, но мне нужно изменить его в AJAX.Просто мне трудно понять, как я могу собрать Ajax.Спасибо ♥

function saveData(){
    var id = $('#id').val()
    var name = $('#nm').val()
    var slug = $('#em').val()
    var books = $('#hp').val()
    var address = $('#ad').val()
    $.post('<?php echo site_url("welcome/add") ?>', {id:id, nm:name, em:slug, hp:books, ad:address}, function(data){
        viewData()
        $('#id').val(' ')
        $('#nm').val(' ')
        $('#em').val(' ')
        $('#hp').val(' ')
        $('#ad').val(' ')
    })
}

function editData(id, nm, em, hp, ad) {
    $('#id').val(id)
    $('#nm').val(nm)
    $('#em').val(em)
    $('#hp').val(hp)
    $('#ad').val(ad)
    $('#id').prop("readonly",true);
    $('#save').prop("disabled",true);
    $('#update').prop("disabled",false);
}

function updateData(){
    var id = $('#id').val()
    var name = $('#nm').val()
    var slug = $('#em').val()
    var books = $('#hp').val()
    var address = $('#ad').val()
    $.post('<?php echo site_url("welcome/update") ?>', {id:id, nm:name, em:slug, hp:books, ad:address}, function(data){
        viewData()
        $('#id').val(' ')
        $('#nm').val(' ')
        $('#em').val(' ')
        $('#hp').val(' ')
        $('#ad').val(' ')
        $('#id').prop("readonly",false);
        $('#save').prop("disabled",false);
        $('#update').prop("disabled",true);
    })
}

function deleteData(id){
    $.post('<?php echo site_url("welcome/remove") ?>', {id:id}, function(data){
        viewData()
    })
}

function removeConfirm(id){
    var con = confirm('Are you sure to delete this data? HUHHHHH?!');
    if(con=='1'){
        deleteData(id);
    }
}
 $(".clicker").on("click", function(){

$(this).siblings().slideToggle('normal');

})

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});
</script>

Контроллер:

<?php
    header('Access-Control-Allow-Origin: *');
    defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {


public function __construct()
{
    parent::__construct();
    $this->load->helper('url');
    $this->load->model('crud_model');
}

public function index()
{
    $data['books'] = $this->crud_model->getBooks();
    $this->load->view('header');
    $this->load->view('welcome_message',$data);
    $this->load->view('footer');
}

public function view()
{
    $data['books'] = $this->crud_model->getBooks();
    $data['crud']=$this->crud_model->getView();
    $this->load->view('view_data',$data);
}

public function add()
{
    $data = array(
        'id' => $this->input->post('id'),
        'title' => $this->input->post('nm'),
        'slug' => $this->input->post('em'),
        'book_id'=>$this->input->post('hp'),


    );


    // $insert = $this->crud_model->postNew($data);

    $data2 = array(
        'book_id'=>$this->input->post('hp'),
        'faqs_id' =>$this->crud_model->postNew($data),

    );
    $insert1 = $this->crud_model->postNewBridge($data2);
}

public function update()
{   
    $data = array(
            'title' => $this->input->post('nm'),
            'slug' => $this->input->post('em'),
            'book_id'=>$this->input->post('hp'),

        );
    $this->crud_model->postUpdate(array('id' => $this->input->post('id')), $data);
}

public function remove()
{
    $id = $this->input->post('id');
    $this->crud_model->getDelete($id);
}
}

Модель:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Crud_model extends CI_Model{

public function __construct()
{
    parent::__construct();
    $this->load->database();
}
public function getBooks()
{
     $this->db->select('*');
    $this->db->from('book');
    $query=$this->db->get();
    return $query->result();


}

public function getView()
{   
     $this->db->select('*');
    $this->db->from('book');
    $this->db->join('faqs', 'book.id = faqs.book_id','inner');
    $query=$this->db->get();
    return $query->result();

}

public function postNew($data)
{
    $this->db->insert('faqs', $data);
    return $this->db->insert_id();
}
public function postNewBridge($data2)
{       

        $this->db->insert('book_faqs', $data2);
        return $this->db->insert_id();

}
public function postUpdate($where, $data)
{
    $this->db->update('faqs', $data, $where);

    return $this->db->affected_rows();
}

public function getDelete($id)
{
    $this->db->where('id', $id);
    $this->db->delete('faqs');
}

}

Answer 1

Попробуйте, здесь я даю вам только saveData () в ajax

function saveData(){
    var id = $('#id').val()
    var name = $('#nm').val()
    var slug = $('#em').val()
    var books = $('#hp').val()
    var address = $('#ad').val()
    $.ajax({
        beforeSend: function () {
            //do something before ajax call
        },
        complete: function () {
            //do something after ajax call done
        },
        type: "POST",
        url: '<?php echo site_url('your_contoller/your_function'); ?>/',
        data: ({id: id, nm: nm, em: em,hp: hp,ad: ad}),
        success: function (data) {
            setTimeout(function () {
                //do something after a second
            }, 1000);
        }, error: function (data) {

        }
    });
}

Надеюсь, это поможет

Answer 2

Вам просто нужно получить () с вашим текущим кодом.Просто используйте эту функцию для вызова страницы и загрузите ее в контейнер с результатом класса с помощью ajax.

$('#buttonId').click(function() {
$.get( "controller/function", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});
});