Demande simple d'Ajax / Codeigniter

J'ai des problèmes avec ajax et le codeur. J'ai déjà posté une autre question ( lien vers la question ) et j'ai pensé que je l'ai résolu, mais je ne l'ai pas fait, je demande à quelqu'un d'écrire un code simple avec ajax / codeigniter qui augmentera le nombre à l'intérieur de div / span sur le clic.

Je tente ces derniers jours pour faire cela, mais constamment des erreurs … Mon paramètre CI est:
Base_url: localhost/test/
Index: index.php
Autoload: url
Contrôleur par défaut: bienvenue (je l'ai laissé juste pour ce test)

Je serais plus qu'heureux d'avoir un exemple simple pour le faire. J'ai également essayé, encore une fois, mais sans chance. Voici ce que j'ai essayé cette fois:

Contrôleur (welcome.php)

 <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Welcome extends CI_Controller { function __construct() { parent::__construct(); } public function index() { $this->load->view('welcome_message'); } function increase(){ $increase = $this->input->post('increase'); echo increase++; } } 

JS (Ajax)

 function increase(){ var number = parseInt($('#number').html()) + 1; $.ajax({ type: 'POST', url: 'localhost/test/welcome/increase', data: { increase:number }, success:function(response){ $('#number').html(response); } }); } 

Afficher (HTML / CSS)

 <!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> <body> <span id="number" onclick="increase()">0</span> </body> </html> 

J'utilise le dernier xampp sur windows 7. Erreur que je reçois lorsque je clique sur span – POST http://localhost/test/localhost/test/welcome/increase 404 (Not Found)

Vous devez soumettre le jeton CSRF des cookies, sinon la demande sera invalide, si vous avez activé CSRF dans config.php.

Vous pouvez utiliser ce plugin pour récupérer des cookies sous javascript. Et simplement passer à CI.

Ci_token

et

Ci_cookie

Les clés peuvent être différentes et peuvent être trouvées dans config.php

Je suggère également de configurer un itinéraire pour la demande et d'utiliser

URL du site()

plus de

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, }); 

Utiliser site_url() de 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); } }); 

}

Cependant, ajouter http:// en face de localhost devrait fonctionner

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

Mais c'est toujours mieux et recommandé d'utiliser site_url() si vous appelez un contrôleur dans CI … de sorte que cela ne vous donnera pas d'erreurs lorsque vous le téléchargez sur un serveur en direct.

Dans votre ajax, n'utilisez pas de lien externe pour votre JS, utilisez simplement interne.

Assurez-vous de configurer votre $ 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); } }); } 
 <!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> 

Tout d'abord, vous devez définir votre site base_url dans le fichier d'application / config, puis utilisez cette base_url avec votre appel de page ajax d'où votre appel va. Supposons que votre base_url soit 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); }); } 

Puis changez votre fonction d'augmentation dans le contrôleur comme celui-ci

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

}

essaye ça :

 function increase(){ var number = parseInt($('#number').html()) + 1; $.ajax({ type: 'POST', url: 'localhost/test/Welcome/increase/', data: "increase=" + number, dataType: "text", success:function(response){ $('#number').html(response); } }); } 

Si vous utilisez cet ajax dans un fichier .php que vous ne devriez faire quelque chose comme ça dans votre URL:

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

OU si vous faites cela dans un fichier .js que vous devez ajouter cette ligne dans votre balise de tête

 <script> var base_url = "<?php echo base_url();?>";</script> 

Et qu'utiliser ceci:

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

J'espère qu'il résout le problème. Cependant, c'est toujours une bonne idée lors du développement dans l'environnement local pour configurer le base_url dans config.php comme ceci:

 $root = "http://".$_SERVER['HTTP_HOST']; $root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']); $config['base_url'] = $root; 
 View:::::: <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="<?php echo base_url();?>css/jquery.js"> </script> <style type="text/css"> #number { display: block; text-align: center; width: 100px; height: 30px; margin: 50px auto; line-height: 30px; border: 1px solid #999; border-radius: 5px; } body{ cursor: default; } </style> </head> <script> function increase(){ var number = parseInt($('#number').html()); $.ajax({ type: 'POST', url: '<?php echo base_url()?>main/samp_data', data: { increase:number }, success:function(response){ $('#number').html(response); } }); } </script> <body> <span id="number" onclick="increase()">0</span> </body> </html> Controller:::::: <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Main extends CI_Controller { public function index(){ $this -> load -> view('sample_view'); } public function samp_data(){ $increase = $this->input->post('increase'); echo ++$increase; } }