Асинхронный поиск с JQuery, AJAX и JSON

Question

Я работаю над проектом для школы.В этом проекте мне нужно создать асинхронную строку поиска для поиска данных в таблице в CodeIgniter, и это нужно сделать с помощью JSON.Асинхронный поиск работает, но я не думаю, что я делаю это с JSON.Буду признателен за помощь в том, как сделать это с JSON.

Jquery на мой взгляд: `

$(document).ready(function(){

load_data();

function load_data(query)
{
    $.ajax({
        url:"<?php echo base_url(); ?>ajaxsearch/fetch",
        method:"POST",
        data:{query:query},
        success:function(json){
            $('#result').html(json);
        }
    })
}

$('#search_text').keyup(function(){
    var search = $(this).val();
    if(search != '')
    {
        load_data(search);
    }
    else
    {
        load_data();
    }
});
});

`

Контроллер: `

class Ajaxsearch extends CI_Controller {

function index()
{
    $this->load->view('ajaxsearch');
}

function fetch()
{
    $output = '';
    $query = '';
    $this->load->model('ajaxsearch_model');
    if($this->input->post('query'))
    {
        $query = $this->input->post('query');
    }
    $data = $this->ajaxsearch_model->fetch_data($query);
    $output .= '
    <div class="table-responsive">
                <table class="table table-striped">
                    <tr>
                        <th scope="row" >Channel Number</th>
                        <th scope="row">Channel Name</th>
                    </tr>
    ';
    if($data->num_rows() > 0)
    {
        foreach($data->result() as $row)
        {
            $output .= '
                    <tr>
                        <td>'.$row->nr.'</td>
                        <td>'.$row->naam.'</td>

                    </tr>
            ';
        }
    }
    else
    {
        $output .= '<tr>
                        <td colspan="5">No Data Found</td>
                    </tr>';
    }
    $output .= '</table>';
    echo $output;
}

}`

Модель:
`

 <?php
   class Ajaxsearch_model extends CI_Model
  {
     function fetch_data($query)
     {
       $this->db->distinct('nr');
       $this->db->select("*");
       $this->db->from("kanalen");
       if($query != '')
     {
       $this->db->like('naam', $query);

    }
       $this->db->order_by('nr', 'DESC');
       return $this->db->get();
}

}?> `

Ошибка в строке 51: Ошибка

Answer 1

Если вы создаете данные в виде массива в вашем контроллере, затем передаете их обратно с помощью json_encode () и визуализируете вывод на стороне клиента, я думаю, что это больше, чем вы ищете.Я исключил модель, потому что она не нуждается в изменении, а неизмененная часть вашего jquery опущена до / после ...

Javascript:

...

function load_data(query)
{
    $.ajax({
        url:"<?php echo base_url(); ?>ajaxsearch/fetch",
        method:"POST",
        data:{query:query},
        success:function(json){
            handleOutput(json);
        }
    });
}

function handleOutput(json) {
    var output = '<div class="table-responsive"><table class="table table-striped"><tr><th scope="row" >Channel Number</th><th scope="row">Channel Name</th></tr>';
    if (json.length == 0) { // if no data is returned
        output += '<tr><td colspan="5">No Data Found</td</tr>';
    } else {  // if data isn't returned
        json.forEach(function(row) {
            output += '<tr><td>'+row['nr']+'</td><td>'+row['naam']+'</td></tr>';
        }
    }
    output += '</table></div>';
    $('#result').html(output);
}

...

Контроллер:

class Ajaxsearch extends CI_Controller {

function index()
{
    $this->load->view('ajaxsearch');
}

function fetch()
{

    $query = '';
    $this->load->model('ajaxsearch_model');
    if($this->input->post('query'))
    {
        $query = $this->input->post('query');
    }
    $data = $this->ajaxsearch_model->fetch_data($query);
    $retval = array();
    if($data->num_rows() > 0)
    {
        $retval[] = array(
            "nr" => $row->nr,
            "naam" => $row->naam
        );
    }
    return json_encode($retval);
}

}

Примечание: Я немного сжал ваш код.Надеюсь, это все еще легко читается / понятно.