如何在codeigniter 4中使用ajax

Question

我正在使用codeigniter-4版本，并试图在导航栏中自动搜索。我正在尝试使用ajax将post方法中的数据发送到控制器中。但这并不管用。和codeigniter 4没有描述ajax的细节。在我的代码示例输入框下面是-

<input class="form-control mr-sm-2" type="search" placeholder="<?= lang('nav.search'); ?>" aria-label="Search" name='s' id="seachBox">

ajax代码是-

     $.ajax({  
       url:<?= base_url('search'); ?>,
       headers:{'X-Requested-With':'XMLHttpRequest'},
       data:{query:query},
       success:function(data){
             alert(data);
       }  
    });

我的控制者是-

<?php
class Search extends BaseController
{
    public function __construct()
    { 
        helper(['common_helper','aws_helper']);
    }

    public function index(){

        echo 'string';
    }
}
?>

路线是-

<?php 

$routes->get('/search', 'Search::index');

?>

Answer 1

下面是ajax的示例代码。(确保已为search url定义路由/控制器方法)

$.ajax({  
    url:<?php echo base_url('search'); ?>,
    type: 'post',
    dataType:'json',
    data:{query:query},
    success:function(data){
        alert(data);
    }  
});

获取请求数据的CI4代码

if ($this->request->isAJAX()) {
    $query = service('request')->getPost('query');
    var_dump($this->request->getPost('query'));
}

此外，如果您没有在成功时重新加载页面，请确保在每次请求时都更新csrf token。此外，您还需要在方法中返回csrf令牌。因此，在这种情况下，您的方法将如下所示-

if ($this->request->isAJAX()) {
        $query = service('request')->getPost('query');
        //var_dump($this->request->getPost('query'));
        return json_encode(['success'=> 'success', 'csrf' => csrf_hash(), 'query ' => $query ]);
    }

因此在这种情况下，您的ajax代码将如下所示-

$.ajax({  
        url:<?php echo base_url('search'); ?>,
        type: 'post',
        dataType:'json',
        data:{query:query},
        success:function(data){
           var result = JSON.parse(data);
            $("input[name='csrf_test_name']").val(result['csrf']);
        }  
    });