2008-11-21 9 views
10

Es una especie de embarazoso que me resulta tan difícil de aprender JavaScript, pero ..aprender a usar AJAX con CodeIgniter

Digamos que tengo un controlador realmente simple como esto:

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

    } 

} 

Sí , eso probablemente podría escribirse mejor, jaja.

Lo que quiero saber es cómo podría usar JavaScript para enviar un número en un formulario (me preocuparé por la validación y los modelos más adelante), cómo debería escribir mi función test() para que devuelva algo legible por el JavaScript (supongo que el retorno VERDADERO probablemente no funcionaría, tal vez XML o JSON o algo así?), y ¿cómo puedo acceder a los datos con el JavaScript?

Sé que hay marcos como jQuery que ayudarán con esto, pero en este momento solo me gustaría entenderlo en el nivel más simple y todos los tutoriales y guías que he encontrado hasta ahora son demasiado profundos para yo. Un ejemplo en jQuery o lo que sea también sería bueno.

Muchas gracias :)

+2

sin necesidad de preocuparse, ningún cuerpo es perfecto –

+0

+1 También encuentro que JavaScript es un poco desafiante, pero lo conseguirás con mucha práctica. – Anthony

Respuesta

14

usted acaba de imprimirlo, básicamente, y volver a capturar esa información a través de JavaScript:

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

javascript podría ser algo como esto:

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'); 

el código anterior no tiene en cuenta los problemas específicos del navegador, pero debe ejecutarse en firefox/ie7 al menos yo creo.

aquí hay un ejemplo de jQuery de todo lo anterior:

var options = { 
    'someNumber' : 12 
} 

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

El primero con XMLHTTPRequest no funciona para mí y da error ya que XMLHTTPRequest no está identificado ... o algo así. Pero el segundo con Jquery está funcionando bien. Muchas gracias. –

+0

+1 ¡Muchas gracias! ¡Realmente aprecio esta respuesta clara! – Anthony

3

También he encontrado en CodeIgniter que 'XMLHTTPRequest' no es devuelto en las cabeceras de respuesta, cuando se utiliza la llamada norma Javascript AJAX como se mencionó anteriormente .

$this->input->is_ajax_request(); 

El ayudante de entrada no vuelve nunca verdad a menos que utilice jQuery para manejar la petición AJAX POST.

También probé el método en este artículo, que no funcionaba: http://developer.practicalecommerce.com/articles/1810-The-Benefit-of-Putting-AJAX-and-CodeIgniter-PHP-Together

Esto es lo que he usado en el final:

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 
    } 

Posiblemente causado por un problema de configuración que ver con mi CI instalar, no he tenido tiempo de investigar aún.