2008-11-21 6 views
10

Il est embarassant genre de que je trouve si difficile d'apprendre JavaScript, mais ..Apprendre à utiliser AJAX avec CodeIgniter

Disons que j'ai un contrôleur très simple comme ceci:

class front extends Controller { 

    public function __construct() 
    { 
     parent::Controller(); 
    } 

    public function index() 
    { 
     //nothing! 
    } 

    public function test() { 

     $someNumber = $this->input->post('someNumber'); 

     if ($someNumber == 12) { return TRUE; } 

    } 

} 

Oui , cela pourrait probablement être mieux écrit, haha. Qu'est-ce que je veux savoir est - comment pourrais-je utiliser JavaScript pour soumettre un nombre dans un formulaire (je vais me soucier de la validation et des modèles plus tard), comment dois-je écrire ma fonction test() afin qu'il renvoie quelque chose de lisible par le JavaScript (je suppose que le retour vrai ne fonctionnerait probablement pas, peut-être XML ou JSON ou quelque chose comme ça?), et comment puis-je accéder aux données avec le JavaScript? Je sais qu'il existe des frameworks comme jQuery qui peuvent vous aider, mais pour l'instant je voudrais juste le comprendre au niveau le plus simple et tous les tutoriels et les guides que j'ai trouvés jusqu'ici sont beaucoup trop détaillés pour moi. Un exemple dans jQuery ou quoi que ce soit serait bien aussi.

Merci beaucoup :)

+2

pas besoin de s'inquiéter aucun corps n'est parfait –

+0

+1 Je trouve aussi JavaScript un peu difficile mais vous y arriverez avec beaucoup de pratique. – Anthony

Répondre

14

vous simplement imprimer au fond, et re-capture cette information via javascript:

public function test() { 
    $somenumber = $this->input->post('someNumber'); 
    if ($somenumber == 12) { 
     print "Number is 12"; 
    } else { 
     print "Number is not 12"; 
    } 
} 

votre javascript pourrait ressembler à ceci:

var xhr; 
xhr = new XMLHTTPRequest(); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     // this is where the return information is 
     alert('Status: '+xhr.status+' Response: '+xhr.responseText); 
    } 
} 

xhr.open('POST', '/front/test'); 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
xhr.send('someNumber=12'); 

le code ci-dessus ne prend pas en compte les problèmes spécifiques du navigateur, mais devrait fonctionner sur firefox/IE7 au moins je crois.

est ici un exemple jQuery de tout ce qui précède:

var options = { 
    'someNumber' : 12 
} 

$.post('/front/test', options, function(data) { 
    alert(data); // should print "Number is 12" 
}); 
+0

Le premier avec XMLHTTPRequest ne fonctionne pas pour moi et donner une erreur comme XMLHTTPRequest n'est pas identifié .... ou quelque chose. Mais le deuxième avec Jquery fonctionne bien. Merci beaucoup. –

+0

+1 Merci beaucoup! J'apprécie vraiment cette réponse claire! – Anthony

3

J'ai trouvé aussi dans CodeIgniter que « XMLHttpRequest » n'est pas retourné dans les en-têtes de réponse, lorsque vous utilisez l'appel standard Javascript AJAX comme mentionné ci-dessus . L'aide à la saisie ne renvoie jamais vrai à moins que vous n'utilisiez jQuery pour gérer la requête AJAX POST.

J'ai essayé aussi la méthode dans cet article qui ne fonctionne pas: http://developer.practicalecommerce.com/articles/1810-The-Benefit-of-Putting-AJAX-and-CodeIgniter-PHP-Together

C'est ce que je à la fin:

var query_params = $('#data-form').serialize(); 
    $.ajax({ 
     type: 'POST',  
     url: 'process_this.php", 
     data: queryParams, 
     context: document.body, 

    success: function(){ 
     alert('complete'); // or whatever here 
    } 

Peut-être dû à un problème de configuration pour faire avec mon CI installer, n'ont pas eu le temps d'enquêter encore.

Questions connexes