如何在代码点火器 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 的示例代码。(确保已为搜索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']);
}  
});