Actualizar datos con AJAX PHP y MySQL

zreep · #1 (**permalink**) 24/08/2019, 19:53

Hola a todos, estoy tratando de hacer un update sin tener que actualizar la pagina. Pero estoy tratando de aprender y entender como usar AJAX. Por el momento hice esto, no funciona y no se como terminarlo.

Archivo prueba.php

Código:

<script src="https://kit.fontawesome.com/cbec68f37d.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#change").keyup(function(){
    var parametros="change="+$(this).val()
    $.ajax({
        data: parametros,
        url: 'update.php',
        type:  'GET',
        beforeSend: function () {},
            success:  function (response) {    
            $(".salida").html(response);
        },
        error:function(){
            alert("error")
        }
    });
})
})
</script>

<div class="container w-75 p-5">
<h3 class="mb-4">Activar y desactivar</h3>
<?php
$list = $conn->query("SELECT * FROM proyectos");
while ($fila = $list->fetch()) {
if($fila['pestado'] == '0') {
?>
<p>
Activo <span class="text-primary" id="change"><a href="#"><i class="fas fa-toggle-on"></i></a></span>
</p>
<?php } else { ?>
<p>
Inactivo <span class="text-muted"><i class="fas fa-toggle-off"></i></span>
</p>
<?php } } ?>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Archivo update.php

Código PHP:

  <?php 
require_once 'connect.php'; 
 
$code = $_GET['@']; 
 
$sql = "UPDATE proyectos SET pestado = '1' WHERE idp = '".$code."'"; 
$stmt = $conn->prepare($sql);                                    
$stmt->execute(); 
 
//echo 'Bien!'; 
?>

En Activo <span class="text-primary" id="change"><a href="#"><i class="fas fa-toggle-on"></i></a></span> agrege el id="change", y se que falta algo que iria en href="#", pero no se que es por falta de conocimiento.

Me gustaria que me ayuden a entender como utilizar esto porque no lo entiendo, me refiero a que no se como funciona AJAX con Jquery aunque mi idea es usar solo JavaScript.

Agradezco de antemano.

zerpico_01 · #2 (**permalink**) 07/09/2019, 18:15

Pos es dificil ayudar cuando no se entiende que deseas hacer, o mejor dicho cuando no se sabe que estas haciendo.
Comienza con esto:

https://api.jquery.com/submit/

existen varios metodos usando jquery como quieres, debes usar

Código HTML:

$.get(....

por ejemplo lo logico seria hacer algo asi mira:

Código HTML:

$(document).ready(function(){
$("#change").click(function(){
  $.get("update.php", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
});

data es el valor que deseas enviar a tu php

puedes informarte mas en :

https://api.jquery.com/jQuery.get/

de todos modos tienes que pasarte por el manual php
para aprender a validar y esas cosas, pero en fin siempre hay un comienzo

RECOMENDACION
utiliza json es mucho mejor para trabajar tanto en php como javascript.
en tu archivo php usa esto:

Código HTML:

$code = $_GET['@']; 
if (isset($code)....
validas que seas el valor que esperas, antes de hacer la consulta a la base datos

en tu consulta a la base datos debes escapar la variable con mysqli_real_escape_string

en fin