I'm trying to make an AJAX request with csrf protection ON. This is my code:
View:
var csrfName = "<?php echo $this->security->get_csrf_token_name(); ?>";
var csrfHash = "<?php echo $this->security->get_csrf_hash(); ?>";
$.ajax({
url : url,
type : 'POST',
dataType : 'json',
data : {[csrfName]: csrfHash, param_val : combo_val, param_src : combo_function}
})
.done(function(data){
alert(JSON.stringify(data));
})
.fail(function(jqXHR, textStatus, errorThrown, data){
alert(JSON.stringify(jqXHR));
alert(JSON.stringify(textStatus));
alert(JSON.stringify(errorThrown));
alert(JSON.stringify(data));
});
Controller:
public function get_addr_by_par(){
$param_val = $this->input->post('param_val');
$param_src = $this->input->post('param_src');
if($param_src == "get_city_by_province_id"){
$data_domisili = $this->MAuth->get_city_by_par($param_val,$param_src);
}
else{
$data_domisili = NULL;
}
$data = array ('data_domisili' => $data_domisili,
'csrfName' => $this->security->get_csrf_token_name(),
'csrfHash' => $this->security->get_csrf_hash()
);
echo json_encode($data);
}
Model:
function get_city_by_par($param_val,$param_src){
$this->db->select(" addr_city.PROVINCE_ID AS 'source_id',
addr_city.CITY_ID AS 'val_id',
addr_city.CITY_NAME AS 'val_nama'
");
$this->db->from("addr_city");
return $this->db->get()->result_array();
}
Basically, I following this accepted answer, but I got this response from AJAX Fail :
{
"readyState": 4,
"responseText": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<!-- error-page27:33-->\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<title>BIGI Logistic</title>\r\n<!-- Stylesheets -->\r\n<link href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//css/bootstrap.css\" rel=\"stylesheet\">\r\n<link href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//css/style.css\" rel=\"stylesheet\">\r\n<link href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//css/responsive.css\" rel=\"stylesheet\"> \r\n<!--Color Switcher Mockup-->\r\n<link href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//css/color-switcher-design.css\" rel=\"stylesheet\">\r\n<!--Color Themes-->\r\n<link id=\"theme-color-file\" href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//css/color-themes/default-theme.css\" rel=\"stylesheet\">\r\n\r\n<link rel=\"shortcut icon\" href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//images/favicon.png\" type=\"image/x-icon\">\r\n<link rel=\"icon\" href=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//images/favicon.png\" type=\"image/x-icon\">\r\n<!-- Responsive -->\r\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\">\r\n</head>\r\n\r\n<body>\r\n\r\n<div class=\"page-wrapper\">\r\n <!--Error Section-->\r\n <section class=\"error-section\">\r\n <div class=\"auto-container\">\r\n <div class=\"error-title\">4<span>0</span>4</div>\r\n <h4>Page not found</h4>\r\n <div class=\"text\">Please try one of the following pages:</div>\r\n <a href=\"http://localhost:80/bigilogistic/\" class=\"theme-btn btn-style-one\">Home Page</a>\r\n </div>\r\n </section>\r\n <!--Error Section-->\r\n\r\n\r\n <!-- Main Footer -->\r\n <footer class=\"main-footer alternate\" style=\"background-image: url(http://localhost:80/bigilogistic/media/themes/cargo/asset//images/background/5.jpg);\">\r\n\r\n <!--Footer Bottom-->\r\n <div class=\"footer-bottom\">\r\n <div class=\"auto-container\">\r\n <div class=\"inner-container clearfix\">\r\n <div class=\"social-links\">\r\n <ul class=\"social-icon-two\">\r\n <li><a href=\"#\"><i class=\"fa fa-facebook\"></i></a></li>\r\n <li><a href=\"#\"><i class=\"fa fa-twitter\"></i></a></li>\r\n <li><a href=\"#\"><i class=\"fa fa-google-plus\"></i></a></li>\r\n <li><a href=\"#\"><i class=\"fa fa-instagram\"></i></a></li>\r\n <li><a href=\"#\"><i class=\"fa fa-whatsapp\"></i></a></li>\r\n </ul>\r\n </div>\r\n \r\n <div class=\"copyright-text\">\r\n <a href=\"https://www.jelajahweb.com/\" target=\"_blank\">Webdev</a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <!-- End Main Footer -->\r\n\r\n</div>\r\n\r\n\r\n\r\n<!--Scroll to top-->\r\n<div class=\"scroll-to-top scroll-to-target\" data-target=\"html\"><span class=\"fa fa-arrow-circle-o-up\"></span></div>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/jquery.js\"></script> \r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/popper.min.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/bootstrap.min.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/jquery.fancybox.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/owl.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/wow.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/appear.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/mixitup.js\"></script>\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/script.js\"></script>\r\n<!-- Color Setting -->\r\n<script src=\"http://localhost:80/bigilogistic/media/themes/cargo/asset//js/color-settings.js\"></script>\r\n</body></html>",
"status": 200,
"statusText": "OK"
}
Any suggestion to solve my issue? Disabling csrf protection is my last option which I don't want to do for obvious reasons.
