¿Cómo enviar los datos que alamacena una variable en jQuery mediante AJAX a un PHP y guardar en la base de datos con MySQLi?

publicado por: Anonymous

Estoy realizando un contador en de cuántos usuarios en línea están viendo una pregunta. Ejemplo: Pedro y Juan y una persona más están viendo está pregunta. La variable user_online almacena los nombres de los usuarios en línea. Utilizo porque por medio AJAX quiero refrescar los usuarios online.

var user_online = ["Pedro", "Juan", "Carlos"];

Mi pregunta es cómo hago, al presionar un botón de la página, enviar el valor de esta variable, recogiendo los valores en PHP y guardándolo en la base de datos mediante , siguiendo esta estructura:

 id    User_Online
----  ---------------------
 1     Pedro, Juan, Carlos

solución

Para enviar un array de JavaScript, usando AJAX de jQuery, recibirla en PHP y grabarla en MySQL, se utilizan los siguientes pasos:

1. Supongamos un HTML así:

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="grabarbd.js"></script>
  </head>

  <body>
    <input type="button" value="Grabar en BD" onclick="grabarBD();">
  </body>
</html> 

2. En grabarbd.js, enviar el array por POST

function grabarBD() {
    // Datos como tiene el usuario
    var user_online = ["Pedro", "Juan", "Carlos"];
    var id = 1; //el id con el que quieras guardar

    // Convertir a objeto
    var data = {};
    data.user_online = user_online;
    data.id = id;

    // enviar por POST mediante AJAX
    var url = 'grabarbd.php';   //este es el PHP al que se llama por AJAX
    $.ajax({
        method: 'POST',
        url: url,
        data: data,   //acá están todos los parámetros (valores a enviar) del POST
        success: function(response){
            // Se ejecuta al finalizar
            //   mostrar si está OK en consola
            console.log(response);
        }
    });
}

3. En grabarbd.php, se recibe el valor y se graba en la base

if (isset($_POST['id']) && !empty($_POST['id']) && isset($_POST['user_online']) && !empty($_POST['user_online'])) {
    // Datos recibidos
    $id = $_POST['id'];
    $user_online = implode(', ', $_POST['user_online']);

    //Datos de conexión a la base
    $host = "localhost";
    $usuario = "usuario";
    $clave = "clave";
    $basedatos = "NombreBaseDeDatos";
    $tabla = "NombreDeTabla";

    // Conectar a la base
    //  la variable $myslqi contendrá el objeto con la conexión
    $mysqli = mysqli_connect($host, $usuario, $clave, $basedatos);
    if (mysqli_connect_errno($mysqli)) {
        die( "Error al conectar a MySQL: " . mysqli_connect_error() );
    }

    // insert en la base
    $sentencia = $mysqli->prepare("INSERT INTO $tabla (id, User_Online) VALUES (?, ?)");
    $sentencia->bind_param("is", $id, $user_online );
    $sentencia->execute();

    // Cerrar la conexión
    $sentencia = null;
    $mysqli = null;

    // Devolver una respuesta a JavaScript
    echo "Se grabó el id = $id, con User_Online = $user_online";
}

Nota: este es un ejemplo que muestra la funcionalidad básica. Se le debe agregar el tratamiento de posibles errores.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.