You are on page 1of 15

Aprende a desarrollar aplicaciones para web y mvil con los cursos deX

Uso de cookies
cursosdesarrolloweb.es
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si contina navegando est dando su
consentimiento para la aceptacin de las mencionadas cookies y la aceptacin de nuestra poltica de cookies, pinche el
enlace para mayor informacin.

Uno de piera

ACEPTAR

Qu ests buscando?

PHP

JAVASCRIPT

RUBY ON RAILS

JAVA

FOROS

CURSOS

CONTACTO

PYTHON

ACCEDER

Home Ajax Pasando variables con ajax y jQuery

Ajax, jQuery, Programacin Web

Pasando variables con


ajax y jQuery
Israel965

FACEBOOK

4 Aos Ago

DESARROLLO
PROFESIONAL
PHP

24 Comentarios

ANTERIOR

SIGUIENTE

CURSO DE
ANGULAR 2.0

CURSO DE

LARAVEL 5.3

NUEVO CURSO
DE TOTAL.JS
Hola a todos que tal, vamos a ver de forma rpida como
podemos pasar datos utlizando ajax y jQuery en codeigniter
aunque es fcil modificarlo para utlizarlo en php, veremos
como se serializan los datos de un formulario, como
pasarlos con el mtodo $load, con el mtodo $post, tambin
veremos como pasarlos usando funciones javascritpt, lo
mejor ser ver unos sencillos ejemplos, veamos

$load de jQuery utilizado


en una funcin

CURSO
COMPLETO DE
WORDPRESS

Con el mtodo load de jQuery podemos hacer que cierto


selector de nuestro html sea cargado con algunos datos
segn ocurran ciertos eventos, en el onclick, el hover o
utilizando setInterval para decir cada cuanto tiempo
queremos que refresque ese selector.

CURSO DE
CODEIGNITER 3

En el caso que vemos a continuacin tenemos la funcin


cargar que en el selector con id miselector cargar los datos
de la funcin llamada mifuncion que est en el controlador
llamado micontrolador.
JavaScript

CURSO
1 function cargar(id){
2 $("#miselector").load("http://localhost/nombre_proyecto/micontrolador/mifuncio
EXPRESS DE
3 }
LUMEN 5.3

Como vemos pasamos una variable que ser la que pasemos


como parmetro a la funcin donde queramos utilizarla,
ejemplo.
XHTML

1 <input onclick="cargar(<?=$id?>)" type="button"

El mtodo $load con


setInterval

CURSO DE
JQUERY
COMPLETO

Lo mismo que la anterior pero sin tener que esperar a que


suceda ningn evento, sino que se haga automticamente
cada x tiempo con la funcin setInterval de javascript, en este

CURSO DE
PHALCON 3

caso cada 2 segundos, veamos.


JavaScript

1
2
3
4
5
6
7

$(document).ready(function(){
setInterval(function() {
var id = $("#id").val();
$("#miselector").load("http://localhost/nombre_proyecto/micontrolador/mifunci
});
}, 2000);
});

La id que obtenemos puede ser un campo oculto de nuestro


html o cualquier otro dato que nos interese, un segmento de

CURSO DE
SOCKETIO CON
NODEJS

la url etc.

El mtodo $post de jQuery


Para este caso podramos querer hacer por ejemplo un
sistema de votaciones guardando la id de lo que est votando
para darle una mejor experiencia al usuario en nuestra web
con ajax, as que lo mejor sera hacer uso de $post con una
funcin como la que sigue.
JavaScript

CURSO DE PHP
7 AVANZADO

1
2
3
4
5

function sumarvoto(id)
{
var id = id;
$.post('http://localhost/mi_proyecto/mi_controlador/mi_funcion'
}

La id como con el mtodo $load se la pasamos a la funcin

CURSO DE
ADONISJS

donde hagamos uso de ella, pongo el mismo ejemplo a


continuacin.
XHTML

1 <input onclick="sumarvoto($id)" type="button"

Al pulsar el botn se hara una peticin a la funcin


mi_funcion del controlador mi_controlador y podramos
obtener con post la variable id de la siguiente forma.
PHP

1 $id = $this->input->post('id');

Y despus daremos la lgica que necesitemos a nuestra


funcin.

Serializando formularios
con $ajax de jQuery
Finalmente veremos como procesar un formulario completo
con ajax gracias a la funcin $ajax que nos serializa los datos
y permite hacer varias cosas, veamos.
JavaScript

1
2
3
4
5
6
7
8
9

$(document).ready(function(){
//cuando hagamos submit al formulario con id id_del_formulario
//se procesara este script javascript
$("#id_del_formulario").submit(function(e){
e.preventDefault();
$.ajax({
url: $(this).attr("action"),//action del formulario, ej:
//http://localhost/mi_proyecto/mi_controlador/mi_funcion
type: $(this).attr("method"),//el mtodo post o get del formulario

10
11
12
13
14
15
16
17
18
19

data: $(this).serialize(),//obtenemos todos los datos del formulario


error: function(){
//si hay un error mostramos un mensaje
},
success:function(data){
//hacemos algo cuando finalice todo correctamente
}
});
});
});

De esta forma si tenemos campos con el atributo name


nombre, apellidos, email, telefono, accederemos desde la
funcin del controlador de la siguiente forma.
PHP

1
2
3
4

$nombre = $this->input->post('nombre');
$apellidos= $this->input->post('apellidos');
$email= $this->input->post('email');
$telefono= $this->input->post('telefono');

Y de momento aqu nos quedamos, en otra ocasin


volveremos a ver ms sobre ajax y jQuery, espero que os
sirva.

FACEBOOK

ANTERIOR

SIGUIENTE

POSTS RELACIONADOS

La clase
Tag en
Phalcon,
generando

Subir
archivos
con
Nodejs y

Login con
el SDK de
Facebook
en

html

Express

AngularJS

Israel965

Israel965

Israel965

22

11

12

Diciembre,

Noviembre,

Septiembre,

2013

2013

2013

Conversor
es en
Phalcon

Codeignite
r 3: Rutas
rest y
callbacks

Blog con
laravel 4

30 Mayo,

Israel965

2013

2015

14

Israel965

Israel965
21 Julio,

Diciembre,
2014

ACERCA DEL AUTOR


Israel965

Ms entradas de esta autor

Hola, soy Israel Parra, desarrollador de aplicaciones para


la web y mvil desde hace 7 aos utilizando los lenguajes
php y javascript. Me gusta conocer las ltimas novedades
que van apareciendo en el mundo de la programacin y
compartirlas con el resto de compaeros.

24 COMENTARIOS

Jesse

2 Agosto, 2013

Hola, muchas gracias por el aporte. La verdad me ayudo


mucho a resolver mi problema que por das estaba tratando
de solucionar, muy bien explicado.
Responder

israel965

Autor

2 Agosto, 2013

Me alegro mucho, gracias por comentar, un saludo.


Responder

Raul

1 Octubre, 2013

Hola Israel:
Muy buenos los tips que haz dado! Pero permiteme preguntar
lo siguiente:
Como podria enviar el contenido de un textarea a un
controlador con una funcion jquery, y ese controlador haga su
logica (sin necesitar devolver algo a la funcion?
Esto es en codeigniter, usted me podria guiar un poco en
esto?
Responder

ros

15 Julio, 2014

Hola un tema interesante, mi pregunta es la siguiente, estoy


realizando una consulta a mi base de datos enviando
informacion de un formulario mediante ajax, quiero mostrar
mis resultados de esa consulta en una tabla que tengo debajo
de mi formulario, la respuesta la obtengo mediante json en el
vento success, pero al momento de hacer el submit no me
muestra resultados, no se si es por la forma en que estoy
enviando mis datos para la consulta o la forma en que los
recibo mediante json, cual es la forma correcta de enviar los
resultados mediante json?

Responder

israel965

Autor

16 Julio, 2014

Hola Ros,
En la categora de jquery tienes dos tutoriales que te
pueden servir, jquery para programadores web y su
segunda parte.
Espero que te sean de ayuda.
Saludos.
Responder

mariana

1 Octubre, 2014

hola estoy haciendo un proyecto y tengo muchas dudas sobre


como refrescar un solo div o un input mediante una funcion
ajax que se encuentra en una pagina externa, el div o el input
estn en un archivo php y la funcion javascript esta en otra
pagina y desde esa pagina debe actualizar el div o el input a
traves de un boton, por favor me urge porq ya tengo q
entregar mi proyecto en unos dias
Responder

israel965

Autor

1 Octubre, 2014

Estos temas no van aqu, aqu se explica otra cosa,


aqu es donde debe ir tu tema.
Responder

Cristian

14 Octubre, 2014

Muy buena info, sobre todo el mtodo serialize.


Saludos desde Chile.
Responder

israel965

Autor

14 Octubre, 2014

La verdad que es genial si, muy til para trabajar con


formularios, saludos y gracias.
Responder

Wrqc

11 Noviembre, 2014

Saludos Israel, estoy haciendo uso de listas desplegables


dependientes de tres niveles, logre hacerlo usando unos
ejemplos que existen en internet, pero estoy modificando
todo y lo estoy llevando solo al uso de dos archivos uno
donde se ejecuta el formulario con los combos dependientes
llamando una clase donde se ejecutan las consultas a la base
de datos.
La duda o problema que tengo es como puedo pasar el
resultado de la consulta al id del segundo combo, hago uso
de un $.post(url, data), esto cuando hace un .change el id del
primer combo. Observo en la consola del depurador del
navegador que ejecuta la consulta y obtiene el resultado en el
segundo combo, pero no lo visualizo en el cliente final ya que
no estoy enviando el resultado al id del sugundo combo,
COMO PUEDO PASAR el resultado?.
Gracias
P.D: no soy experto estoy aprendiendo
Responder

israel965

Autor

11 Noviembre, 2014

Hola,
Aqu tienes el resultado del buscador del blog por la
palabra select, los 4 primeros resultados creo que te
pueden servir ya que hacemos exactamente lo que
necesitas.

Si no es as dmelo y miramos a ver.


Saludos.
Responder

wrqc

Autor

12 Noviembre, 2014

Saludos Israel, interesantes tus publicaciones


para los selects dependientes, terminen
modificando lo que yo ya haba hecho, solo
que no me convenca hasta que logre
mejorarlo, para mi gusto y como lo quera
tener y pienso que esta sencillo. Te los copio a
tu correo para que los veas.
Responder

Patrik Chex

26 Marzo, 2015

Que tal buen dia, con un apregunsta en la serializacion de


datos de un formulario, estoy tratando con un formualrio con
varios campos perto tambien incluye un campo de tipo file
es decir un upload, pero mi ocntrolador no me lo reconoce.
Podrias ayudarme con ello, Te lo agradeceria mucho.
Responder

israel965

Autor

26 Marzo, 2015

Hola,
Aqu tienes una entrada que te puede ayudar.
Si te interesa, aqu hay un curso completo sobre
jQuery.
Saludos.
Responder

Patrik

Autor

27 Marzo, 2015

Muchas Gracias. ahora mismo lo veo y te


comento como me va.!!
Responder

Elisabeth Autor

8 Junio, 2015

Hola Israel,
Ha habido algn problema con estos vdeos?
Es que me aparece como vdeo suprimido.
Hay alguna manera de poder acceder a ellos?
La verdad es que los suelo ir viendo a medida
que voy avanzando en mi web, porque me
ayudan bastante
Responder

israel965

Autor

8 Junio, 2015

Hola,
El curso de jQuery ha estado un tiempo
de forma gratuita en youtube, pero
volver a su versin de pago.
Saludos.
Responder

Osvaldo uriel

14 Abril, 2015

Excelente Tuto pero si quisier enviar un formulario y una


variable ms como se hace?
de antemano agradezco tu atencin.
Responder

israel965
Hola,

Autor

14 Abril, 2015

Aqu tienes un curso completo y gratuito sobre


jQuery.
Curso de jQuery Unodepiera
Saludos.
Responder

andres

20 Abril, 2015

Hola como obtengo un valor que no esta en la base de datos


si no que es producto de un calcula hecho con ajax con el
metodo post y lo muestro en un pdf?
Responder

Jasp402

18 Agosto, 2015

Coloco que todo lo que dice. pero tengo un problema, al


momento de cargar el php
Fatal error: Using $this when not in object context in
Responder

israel965

Autor

19 Agosto, 2015

Hola,
En este ejemplo lo he hecho con codeigniter, si
ests trabajando en un archivo php sin framework
simplemente accede a la variable post.
Responder

Carlos

26 Agosto, 2015

Buenos dias, tengo un fomulario donde cargo un input con


autocompletar (funciona bien), mi idea es que al cargar el
autocompletar que es una referencia de un producto hace un
select para recuperar unos datos mediante el Modelo en
codeigniter.

Bien lo que quiero es pasar por ajax una variable de un input


el qual no consigo pasar al controlador, tengo hecho esto
mediante un click en el imput, no es un submit, es un input
simple. En que estoy fallando, porque me dice que envia los
datos ajax correctamente al controlador.
Adjunto el codigo:
- js de autocompletar y peticion ajax.
$(function(){
$(.referencia).autocomplete({
serviceUrl:
http://gestion.enair.es/Gestion/Administracion/Ofertas/buscarProducto,
onSelect: function (suggestion) {
document.form1.nombre.value = suggestion.nombre;
document.form1.articulo.value = suggestion.articulo;
document.form1.costeunitario.value =
suggestion.costeunitario;
document.form1.pvp.value = suggestion.pvp;
document.form1.familiaprod.value = suggestion.familiaprod;
document.form1.dto.value = suggestion.descuento;
}
});
});
$(document).ready(function(){ //cuando hagamos click en el
campo del formulario con id id_del_formulario se procesa
este script
$(#referencia).click(function(e){
e.preventDefault();
$.ajax({
url:
$(this).attr(http://gestion.enair.es/Gestion/Administracion/Ofertas/buscarProducto),
//action del formulario, controlador y funcion
type: $(this).attr(POST), //el mtodo post o get del
formulario

data: $(this).serialize(), //obtenemos todos los datos del


formulario
error: function(){
alert(NO recibidos los datos por ajax);
},
success:function(data){
alert(recibidos los datos por ajax);
}
});
});
});
> codigo de funcion en el controlador Ofertas
public function buscarProducto()
{
$condicion = $this->input->post(referencia);
$productoBuscado = $this->uri->segment(5);
$data = $this->Ofertas_model>getProducto($productoBuscado,$condicion);
//$data = $this->db->query(select * from productos where
Referencia like %$keyword%');
foreach($data as $row)
{
$datosproducto[query] = $productoBuscado;
$datosproducto[suggestions][] = array(
value =>$row->Referencia,
nombre =>$row->Nombre,
articulo =>$row->Articulo_Desc,
costeunitario =>$row->Coste,
pvp =>$row->PVP_SI,
familiaprod =>$row->nombreFamilia,
descuento => $condicion
);

}
echo json_encode($datosproducto);
}
}
y estos los inputs html.
<input type="text" class="form-control" id="tipocond"
name="tipocond" value="cond_id ?>>
como podemos ver, en el campo descuento le paso la
variable condicion para ver si me pilla bien los datos post,
pero me muestra en blanco, cosa que me indica que no lo
hace.
Espero que me ayuden, gracias.
Responder

Juan

28 Agosto, 2015

Buenas
Muchas gracias me sirvio mucho
Responder

AADE UN COMENTARIO

b
ol

link
li

crayon

code

b-quote
more

del

ins

img

cerrar etiquetas

ul

You might also like