¿Cómo implementar AJAX en conjunto con el patrón MVC?[Resuelta]

Respuestas:

•  

    2  

   

   

  Ernesto Peimbert Karma: 5332

   
  Fecha: 13-03-2017 07:20:00 Uff el tema de arquitectura de software siempre sale a relucir con esto jajajaja
  
  En un framework con arquitectura MVC y FrontController la solución más común es tener un controlador que responda a todas las peticiones de tus llamadas AJAX.
  
  En la vista tendrías el código JS con todo el código para hacer las diferentes peticiones, luego podrías tener un controlador llamado Ajax que se encargaría de manejar todos los endpoints y te devolvería un JSON.
  
  Respecto a lo de las consultas SQL, como bien dices, no está bien colocarlas en la vista o controlador pues eso sería trabajo del/los modelo(s) correspondiente(s).
  
  Si usas un framework MVC recuerda siempre seguir las buenas prácticas:
  Modelos: Acceso a tus origenes de datos
  Vistas: Lo que se despliega al cliente
  Controlador: Pasarela entre vistas y modelos.
  
  La lógica de tu aplicación la puedes colocar en el controlador o modelo.
  
  Mucha gente coloca la lógica en los modelos para fomentar la práctica de thin controllers y evitar los God Controllers. Si la lógica es mucha entonces se agrega una capa adicional de servicios (MVCS) y voilá! asunto arreglado :D
  
  Una pregunta que me surge es:
  Estás utilizando algún framework en particular o estás creando uno desde cero?   Votos: 2 - Link respuesta
   
•  

    0  

   

   

  Omar Andrade Karma: 64

   
  Fecha: 13-03-2017 20:43:56 Hola Ernesto muy buena respuesta la que me dio aprendi algo nuevo pero dudo que conozca que sea un MVCS S de servicos supongo jamas la habia oido interesante, y respondiendo a su pregunta no uso ningun tipo de framework soy de los que piensa que hacer uno propio siempre es mejor x que lo entenderias mas y bien que he usado Codeigniter pero solo por puro estudio no para un proyecto personal.
  
  Ahora bien no soy muy experto en MVC y dejo en claro que seria la primera vez que trato de hacer un MVC usando clases , autoload y ajax, ahora sobre tu idea esta:
  
  En la vista tendrías el código JS con todo el código para hacer las diferentes peticiones, luego podrías tener un controlador llamado Ajax que se encargaría de manejar todos los endpoints y te devolvería un JSON
  
  mas sin embargo me podria dar una idea con un codigo solo con esto uno rapido y simple, se lo agradeceria mucho, otra pregunta ouo y disculpe mi ignorancia que seria un endpoint?   Votos: 0 - Link respuesta
   
•  

    2  

   

   

  Ernesto Peimbert Karma: 5332

   
  Fecha: 14-03-2017 07:24:08 Hola Omar,
  Uff es muy emocionante hacer algo por cuante propia sin embargo antes de comenzar un MVC desde cero te sugiero que te familiarices con uno para empaparte de buenas prácticas y del conocimiento técnico que un desarrollo así conlleva.
  
  
  Clarificando tus dudas:
  1. Un endpoint es la URL exacta a la que se dirigen las peticiones. Por ejemplo en un webservice tienes una sola URL para los diferentes verbos del protocolo HTTP. En tu caso cada action de tu AJAX controller sería considerado un endpoint.
  
  2. Respecto a un ejemplo corto de una petición Ajax en un MVC no tengo uno a la mano pero casualmente encontré uno muy sencillo, aunque básico aquí. Te repito que es básico (muchos no están familiarizados con xmlhttprequest :P) pero te va a ayudar bastante.
  
  3. Si entendi bien tienes una carpeta ajax que es donde pondrías todos los controladores que se encargarían de responder a las peticiones pero puede ser confuso pues puedes caer en el caso de que tengas múltiples clases para una entidad:
  
  ajax/UserController.php
  UserController.php
  
  Dejando esto de lado un ejemplo sencillo de controlador para manejas las peticiones AJAX sería:
  
  

  <?php
  /**
    * Controlador para administrar los usuarios
    */
  class UserController {
      /**
        * Action para listar los usuarios en un lightbox a través de AJAX
        *
        * @param int $page         Pagina que queremos desplegar
        * @param int $numItems Numero de elementso que queremos desplegar
        *
        * @returns string JSON con la respuesta
        */
      public function listUsersAction($page, $numItems) {
          //Obetenemos los datos del modelo paginados según los parámetros
          $resultados = $this->model->getPaginated($page, $numItems);
  
          return json_encode($resultados);
      }
  
      //Declaración de métodos adicionales
  }
  

  
  
  Espero te sirva   Votos: 2 - Link respuesta
   
•  

    0  

   

   

  Omar Andrade Karma: 64

   
  Fecha: 14-03-2017 17:56:05 pero puede ser confuso pues puedes caer en el caso de que tengas múltiples clases para una entidad:
  
  ajax/UserController.php
  UserController.php
  
  Supongo que eso se soluciona con un namespace, no?
  
  Que interesante con que eso es un endpoint :) agradezco la explicacion de hecho muy buena explicacion en todo Ernesto solo que no entiendo algo eso es en esta linea del la peticion ajax con respecto a que si conozco como hacer ajax en javascript pues si tengo conocimiento:
  
  

  let peticionAJAX = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  

  
  
  :P pero aun me falta
  
  Ahora por ultimo lo que decia que no entendia, esta parte javascript ir en la vista? cierto? osea el ajax en el javascript
  
  

  peticionAJAX.open("POST", "UserController.php", true);
  

  
  
  si bueno lo que no entiendo arriba es la URL: UserController.php
  pero UserController.php no se encuentra en la vista como la encontraria? esa es la parte donde me confundo realmente .-. pondria la url absoluta pero para mi esto seria una falta de seguridad faltal, o no? o.o   Votos: 0 - Link respuesta
   
•  

    1  

   

   

  Ernesto Peimbert Karma: 5332

   
  Fecha: 15-03-2017 08:18:23 Sí, el javascript puede ir en la vista directamente.
  
  Encontrar el controlador y acción adecuada sería responsabilidad de tu front controller.   Votos: 1 - Link respuesta
   
•  

    -1  

   

   

  Javier Alejandro Karma: 0

   
  Fecha: 27-06-2017 11:15:56 Buen dia tengo una duda relacionado con el tema
  
  como podria implementar ajax a un proyecto que ya esta hecho con modelo-vista-controlador
  por ejemplo tengo mi modelo ColoniaData donde tengo las funciones que conectan ala base de datos mysql donde guardo,edito y busco el listado de la tabla, en Colonia-view muestro la tabla de las colonias
  haciendo un llamado a la clase $colonia = ColoniaData::getAll(); despues recorro con un for para llenar mi tabla, si quiero editar datos de algun registro los envio a un editColonia-view donde busco los datos en base al id <?php $user = ColoniaData::getById($_GET["id"]);?>
  punto de partida para implementar ajax ?   Votos: -1 - Link respuesta
   
•  

    0  

   

   

  Pedro Rojas Karma: 3

   
  Fecha: 07-12-2017 17:11:14 Saludos a toda la comunidad, soy auto didacta en el tema de la programacion y gracias a sitios como estos es que he podido aprender un poco, tengo la misma duda de Omar y de aunque me han dado algunas ideas no he podido resolver mis dudas de commo implementar ajax en un proyecto MVC usando Autoload, ya estaba muy familiarizado en usar ajax para las diferentes consultas pero en la programacion tradicional o estructurada pero este cambio realmente me ha generado mucha confusion.
  
  mi otra pregunta y espero me ayuden es, si es posible usar sesiones para guardar variables y usar en varias paginas, tomando en cuenta que estoy usando un Autoload en mi proyecto MVC.
  
  Desde ya agradecer si pueden responder y aclarar mis dudas.
  Muchas Gracias!!!   Votos: 0 - Link respuesta
   
•  

    1  

   

   

  Fernando Jimenez Karma: 599

   
  Fecha: 13-12-2017 07:22:20 Hola que tal en lo personal te recomiendo no tratar de reinventar la rueda (referente a ajax, ocupa jquery) Y en crear desde cero, bien por ti, pero para que trates de hacer uno, deber ver los "detalles" de otros... Pero bien por vos, también me gusta ocupar código completamente mio...
  En su momento tuve la misma duda que tu y lo "resolví" asi:
  Para todo lo que requiera ocupar ajax, es un archivo .js el cual tendrá las funciones necesarias, ejemplo basico:
  

  function damePaginado(queLlamo,dondePresento) {
  	  $.get(queLlamo, function(data) {
  	    $(dondePresento).html(data); 
  	  });
  }

  
  El ejemplo es en jquery y presenta información directamente... en donde le dices, se requiere de los parametros, queLlamo (el cual sera la liga a pedir/solicitar datos) y el de dondePresento (El cual es donde mostrara la información)
  Como dije es un ejemplo básico, ya que puedes crear como en mi caso una función que solicite datos json, y puedas crear la tabla de datos y la paginacion en la misma función, sirviendo para cualquier parte, desde la pagina donde estas hasta dentro de un modal.
  Ejemplo Basico:
  

  function creaInfoPaginado(dondeLlamo,presentoInfo,presentoPaginado,otraVariable) {
  
  $.getJSON( dondeLlamo, { variableExtra:otraVariable } ).done(function( data, textStatus, jqXHR ) {
  
   miJSON1=data['datosPaginacion'];
   miJSON2=data['datosInformacion'];
  var htmlPaginacion = '';
  var htmlInformacion = '';
  $.each(miJSON1, function(i,item){
      /** Aqui creo el html para la paginacion **/
  }
  $.each(miJSON2, function(i,item){
      /** Aqui creo el html para la informacion **/
  }
  $(presentoInfo).html(htmlInformacion);
  $(presentoPaginado).html(htmlPaginacion);
  
  $(presentoInfo).dblclick(function(){
     /* Aqui si quieres controlar el doble clic de lo que acabas de crear ya que no servira lo anterior que ayas puesto , pues se crea dinamicamente esta informacion */
  });
  
  otraFuncionLlamada();
  
  }).fail(function( jqxhr, textStatus, error ) {
      			var err = textStatus + ", " + error;
      			console.log( "Request Failed: " + err );
      			functionParaMensajes('Error',' Error: ' +err);
  
  		}); 
  
  
  }
  

  
  
  
  No es MCVS, pero es muy cercano, ya que en el mismo modulo puedes poner lo que requieres para presentar la información (los datos json)
  
  Saludos... :)   Votos: 1 - Link respuesta
   
•  

    0  

   

   

  Pedro Rojas Karma: 3

   
  Fecha: 14-12-2017 04:00:39 Agradezco el tiempo que tomaste para responder, he podido entender algunas cosas pero otras solo es cuestion de practica y de como dijiste "debes ver los "detalles" de otros..." y asi adaptarlo, la cosa es que el codigo que usaba para los diferentes tipos de consulttas es diferente o al menos yo lo aprecio asi.
  
  

  <script type="text/javascript">
  		$(document).ready(function() {
  			$('#guardar').click(function(event) {
  				event.preventDefault();
  					if ($('#nombre').val() !='' && $('#apellido').val() !='' && $('#cedula').val() != '' && $('#correo').val() != '' && $('#clave1').val() != '' && $('#clave2').val() != '' ){
  						$.ajax({
  							url: '<?php echo URL; ?>/login/registro',
  							type: 'POST',
  							data: 'nombre=' + $('#nombre').val() + 'apellido=' + $('#apellido').val() + 'cedula=' + $('#cedula').val() + 'correo=' + $('#correo').val() + 'clave=' + $('#clave2').val(),
  							beforeSend: function(){
  								$('#mensaje').html('<div class="alert alert-dismissible alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><img src="<?php echo URL; ?>Views/template/img/loader.gif"> Guardando usuario...</div>');
  							},
  							success: function(datos){
  								if (datos = 1) {
  									$('#mensaje').html('<div class="alert alert-dismissible alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><span class="icon-check_circle"></span> Usuario registrado.</div>');
  								}
  							}
  						});
  						
  						}else{
  							$('#mensaje').html('<div id="alert" class="alert alert-dismissible alert-danger"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Oh snap!</strong> Hay campos vacios, complete e intente nuevamente.</div>');
  						}
  			});	
  			
  		});
  	</script>

  
  
  de esto hablo, el codigo que me colocas arriba tendre que indagarlo y familiarizarme con el ya que si lo habia visto pero nunca he trabajado de esa forma.
  
  Con este codigo que he colocado aqui, solo he conseguido que me guarde todos los datos en un solo campo de la tabla en la BD, y me guarda ejemplo, en donde va nombre lo hace asi nombre=Pedroapellido=Rojascedula=18504688correo=pedro@gmail.comclave=1234, y esto lo guarda en el primer campo y los demas quedan vacios.
  
  
  
  Hermano muchas gracias por la ayuda..   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Pedro Rojas Karma: 3

   
  Fecha: 14-12-2017 04:33:30 Disculpa mi ignorancia, ahora que copie tu codigo y lo guarde en un archivo .js, me doy cuenta de lo que me presentaste y esta muy bien solo que en donde esta dondeLlamo,presentoInfo,presentoPaginado,otraVariable, no se que colocar ahi y tampoco en { variableExtra:otraVariable } y de verdad se que muchos veran mis preguntas y veran lo ignorante que soy pero como dije al principio soy autodidacta y en el pueblito donde vivo solo yo me dedico a esto y no cuento con mas nadie para preguntarle a cerca de esto.   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Fernando Jimenez Karma: 599

   
  Fecha: 14-12-2017 06:55:31 Pues esta bien que seas autodidacta, pero a lo que comentas... creo que no lo estas haciendo bien, o no estas leyendo los temas adecuados...
  Los ejemplos serian mas o menos asi:
  
  function creaInfoPaginado(dondeLlamo,presentoInfo,presentoPaginado,otraVariable)
  Seria =
  creaInfoPaginado('usuarios/listado/','.divClassAparecera','.divClassPaginadoAparecera','eliminados')
  o
  creaInfoPaginado('usuarios.php?accion=listado','#divIDAparecera','#divIDPaginadoAparecera','0')
  
  
  Los temas que debes leer para ello, seria las llamadas con jquery
  $.getJSON
  http://api.jquery.com/jquery.getjson/ (Su documentacion de la api esta demasiado bien)
  
  y de paso funciones con parametros... te ayudan mucho a minimizar el codigo javascript que requieres para realizar cosas...
  
  

  /* Igual doy clases (Sin costo), si gustas podemos apoyarnos :) mi correo cualquier cosa: */
  //stryfe.eme@gmail.com
  /* e igual para cualquier otra persona que lo desee ocupo el chat de gmail.*/
  

  
  Saludos...   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Felipe Martínez Karma: 2

   
  Fecha: 03-10-2019 09:46:02 Hola Omar, lograste solucionar este tema? agradecería un montón que pudieras orientarme ya que he estado meses trabado con el mismo problema de ajax con mvc...
  
  Saludos   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Leonardo Lindo Karma: 4

   
  Fecha: 05-10-2019 04:25:54 Saludos colegas(Omar, Felipe Martinez), si alguien ha lgrado solucionar el tema, por favor, expliquen, pues estoy empesando igual en MVC y me cuesta mucho el ajax..   Votos: 0 - Link respuesta
   
•  

    0  

   

   

  Felipe Martínez Karma: 2

   
  Fecha: 08-10-2019 07:11:50 Hola Leonardo, finalmente pude solucionar mi problema. Te comento un poco de que se trataba y te escribo la solución :D
  
  Estoy implementando un MVC desde cero que vi en un curso y todo iba bien hasta el momento que se me ocurrió implementar AJAX para anidar unos SELECTs, resulta que en este MVC uso autoload y rutas amigables y mi problema se originaba al definir la URL de mi petición AJAX. Cuento corto, mis URLs las defino así MIPROYECTO/CONTROLADOR/ACTION y todo esto se carga en mi index, entonces por darte un ejemplo sencillo al definir la URL del AJAX lo estaba haciendo así:
  
  url: '../sitio/obtenerProvincias', donde 'sitio' es mi controlador y 'obtenerProvincias' es una función del controlador que me devuelve un JSON para completar mis SELECTs.
  
  Al ejecutar el AJAX, la información me cargaba en una vista diferente que al parecer es debido al autoload y a las rutas amigables que defino en mi MVC.
  
  La solución que encontre, que quizás no es la más recomendada, pero que si fue efectiva fue la de crear un directorio donde guardo todas mis funciones AJAX que me devolverán un JSON, y en la URL del AJAX solo lo defino llamando directamente a esos archivos por ejemplo así:
  
  url: '../ajax/obtenerProvincias.php', donde 'ajax' es mi directorio y 'obtenerProvincias.php' mi archivo :)
  
  Espero que te pueda ayudar,
  
  Saludos :D   Votos: 0 - Link respuesta