0

estoy creando un sistema donde un usuario puede dar click a un boton e incrementar en 1 su votación. Tengo el codigo javascript de esta manera:

        var cont = 0;
        var sumar = document.getElementById('sumar');
        var restar = document.getElementById('restar');
        var contadorCaja = document.getElementById('contador');

        function cargarSumar() {
            cont++;
            contadorCaja.innerHTML = "Contador: "+cont;
            // var xhr = new XMLHttpRequest();
            // xhr.open("POST","cargar_perfil.php",true);
            // xhr.onreadystatechange = function() {
            //     console.log(xhr.readyState);
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         var jsonS = JSON.parse(xhr.responseText);
            //         contadorCaja.innerHTML = jsonS.respuesta;
            //     }
            // }
            // xhr.send(cont);
        }
        function cargarRestar() {
            cont--;
            contadorCaja.innerHTML = "Contador: "+cont;
        }

        sumar.addEventListener('click', function(event){
            event.preventDefault();
            cargarSumar();
        });
        restar.addEventListener('click', function(event){
            event.preventDefault();
            cargarRestar();
        });

El javascript funciona bien, realiza la votacion, en jquery cambio oculto el boton de incremento al dar click y muestro el de decremento. El problema es que no sé como puedo pasar este valor a php para que se guarde en la base de datos. Tengo entendido que es posible con ajax, lo intenté hacer en el codigo comentado pero no se envía nada.

No sé casi nada de ajax, si me pueden recomendar un tutorial o mostrar un ejemplo de cómo hacerlo se los agradecería. Necesito que se mande el valor de la variable cont incrementado o decrementado, segun sea el caso, guardarlo en la base de datos (eso puedo hacerlo perfectamente yo con php y mysql), realizar un select para revisar si el usuario ya votó y si es así que la pagina se quede con el boton de decremento activo hasta que elimine su voto.

el html del boton:

<div id="contador"></div>
  <form method="post" id="form" action="cargar_perfil.php">
    <button type="submit" id="sumar" name="sumar">incremento</button>
    <button type="submit" id="restar" name="restar" class="hidden">decremento</button>
  </form>

2 respuestas 2

2

Mira modifique un poco tu código pero ya esta como querías, espero y te sirva.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>

<div id="contador"></div>
  <form method="post" id="form" action="cargar_perfil.php">
    <button type="submit" id="sumar" name="sumar">incremento</button>
    <button type="submit" id="restar" name="restar" class="hidden">decremento</button>
  </form>

  <div id="respuesta"></div>
<script type="text/javascript">
	 var cont = 0;
        var sumar = document.getElementById('sumar');
        var restar = document.getElementById('restar');
        var contadorCaja = document.getElementById('contador');

        function cargarSumar() {
            cont++;
            contadorCaja.innerHTML = "Contador: "+cont;
            $('#contador').val(cont);
       
        }
        function cargarRestar() {
            cont--;
            contadorCaja.innerHTML = "Contador: "+cont;
            $('#contador').val(cont);
        }

        sumar.addEventListener('click', function(event){
            event.preventDefault();
            cargarSumar();
        });
        restar.addEventListener('click', function(event){
            event.preventDefault();
            cargarRestar();
        });

        $('#sumar').on('click',function(){
			
		    var valor=$("#contador").val();
		    var url="respuesta3.php";

	         $.ajax({

	           url:url,
	           type:"POST",
	           data:{valor:valor}

	         }).done(function(data){

	               $("#respuesta").html(data);
	         })    
	     });

        $('#restar').on('click',function(){
			
		    var valor=$("#contador").val();
		    var url="respuesta3.php";

	         $.ajax({

	           url:url,
	           type:"POST",
	           data:{valor:valor}

	         }).done(function(data){

	               $("#respuesta").html(data);
	         })    
	     });


</script>
</body>
</html>

respuesta3.php

<?php 
	$valor=$_POST["valor"];
	echo "Datos devueltos ".$valor;
?>

1
  • Muy bueno, gracias! Faltó lo de reconocer si el usuario ya dio click al botón para cambiarlo a decremento, pero creo es lo de menos y me las puedo arreglar. Saludos!
    – Kdisell Q
    el 25 feb. 2019 a las 22:42
0

puedes usar la fetch api.

Tu código quedaría algo así:

function actualizarContador(count){
  var formulario = new FormData();
  formulario.append('contador', count)
  return fetch('ruta/a/tu/programa.php', {
    method: 'post', 
    body: formulario, 
    credentials: 'include'
  });
}

A esta función la llamas en cada listener:

function cargarSumar() {
  cont++;
  contadorCaja.innerHTML = "Contador: "+cont;
  actualizarContador(cont)
    .then(function(res){ return res.json(); })
    .then(function(data){ console.log(data) });
}

function cargarRestar() {
  cont--;
  contadorCaja.innerHTML = "Contador: "+cont;
  actualizarContador(cont)
    .then(function(res){ return res.json(); })
    .then(function(data){ console.log(data) });
}

En tu programa PHP recibirás la información como si se tratase de un formulario común y corriente, la respuesta que entrega tu programa deberá ser en json, por ejemplo:

<?php
$contador = $_POST['contador'];
// realizas cualquier operación con esta información
// declaramos las cabeceras para que el javascript se entere que vamos a responder en json
header('Content-Type: application/json');
//Ahora se imprime la respuesta en formato json
echo json_encode(array(
  'error' => false, 
  'msg' => 'Contador actualizado con éxito'
));

Esta es una solución bastante sencilla. Tienes que considerar la compatibilidad de los navegadores.

Si trabajas en navegadores demasiado viejos te recomiendo que uses la api ajax de jquery.

Saludos!

4
  • 1
    Coloque el header luego de la variable y nada. No estoy seguro si hay que agregar en el PHP algo específico antes de convertir en json_encode
    – Kdisell Q
    el 25 feb. 2019 a las 20:46
  • @KdisellQ en el echo de PHP faltó agregar los corchetes para que JS lo interprete como un JSON quedaría así, echo json_encode(array([ 'error' => false, 'msg' => 'Contador actualizado con éxito' ]));, intenta modificando ésto, comenta el resultado. el 25 feb. 2019 a las 21:30
  • @vickmuñoz aparece igual, le quité la parte de PHP, dejé el arreglo así echo jason_encode(array([ 'resultado' => true ])); y me manda undefined a la consola
    – Kdisell Q
    el 25 feb. 2019 a las 21:37
  • @KdisellQ tienes razón, siempre te retornaría undefined el error se encuentra en la parte donde convierto la respuesta en JSON, solo la transforme pero no la retorne para que la promesa a continuación pueda manipular dicha respuesta. Disculpa! ya corregí el código. el 26 feb. 2019 a las 13:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.