Simple Ajax/codeigniter Request

May 28, 2023 Post a Comment

I'm having some issues with ajax and codeigniter. I've already posted another question (link to question) and I thought I solved it, but I did not so I`m asking someone to write si

Solution 1:

You must submit the CSRF token from cookies otherwise the request will be invalid, if you have CSRF enabled in config.php.

You can use this plugin to retrieve cookies in javascript. And simply pass it to CI.

ci_token

and

ci_cookie

keys may be different and can be found in config.php

I would also suggest setting up a route for the request and using

site_url()

over

base_url()

var SITE = "<?php echo site_url();?>" // GLOBAL variable so your javascripts can be external

var data = { 'ci_token' : $.cookies.get('ci_cookie'), 'increase' : parseInt(number)}
$.ajax({
    url : SITE + "/link/to/controller/method",
    data : data,
});

Solution 2:

use site_url() of codeigniter

 function increase(){
   var number = parseInt($('#number').html()) + 1;  
   $.ajax({
     type: 'POST',
     url: '<?php echo site_url("welcome/increase")?>',
     data: { increse:number }, //<--- here should be increase
     success:function(response){
        $('#number').html(response);
     }
  });

}

however, adding http:// in front of localhost should work

 url: 'http://localhost/test/welcome/increase',

but it is always better and recommended to use site_url() if you are calling a controller in CI...so that this won't give you errors while when you upload it to live server.

Baca Juga

Solution 3:

In your ajax, don't use external link for your JS just use internal.

Make sure that you set your $config['base_url'] = http://localhost/test/ in config.php

function increase(){
    var number = parseInt($('#number').html()) + 1;
    $.ajax({
        type: 'POST',
        url: '<?php echo base_url()?>welcome/increase',
        data: { increase:number },
        success:function(response){
           $('#number').html(response);
        }
   });

}

Solution 4:

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery_v1.9.1.js"> </script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/script.js">            </script>
<style type="text/css">
  #number {
    display: block;
    text-align: center;
    width: 100px;
    height: 30px;
    margin: auto auto;
    line-height: 30px;
    border: 1px solid #999999;
    border-radius: 5px;
  }

</style>
</head>
<script>
function increase(){
  var number = parseInt($('#number').html()) + 1;
  $.ajax({
      type: 'POST',
      url: '<?php echo base_url()?>welcome/increase',
      data: { increase:number },
      success:function(response){
         $('#number').html(response);
      }
  });

}
</script>
<body>
<span id="number" onclick="increase()">0</span>
</body>
</html>

Solution 5:

First You should define your site base_url in application/config file then use this base_url with your ajax page call from where your call goes. Suppose your base_url is http://localhost/test/

function increase(){
   var number = parseInt($('#number').html()) + 1;
   $.post('<?php echo base_url()?>welcome/increase',{number :number},function(response){
          $('#number').html(response);
   });    
}

then change your increase function in controller like this

function increase(){
   $increase = $_POST['number'];
echo increase++;

}

JavaScript Free