5

He encontrado bastantes preguntas sobre este tema por partes en StackOverflow un completo rompecabezas y al parecer cada día existe mucha demanda sobre estos temas aquí en StackOverflow preguntas sencillas pero que se desconoce.

Sería positivo que hubiera una referencia interna en SOes sobre el tema compactados en uno solo. Así que decidí escribir esta pregunta de seguro sera una buena guía y referencia para nuevos y futuros lectores.

Quisiera que me expliquen:

¿cual es la diferencia entre mezclar ajax / jquery, json y php?

Cómo se deben usar basándose en estos ejemplos sencillos pero de mucho interés.

¿Un ejemplo mezclando AJAX con JSON de cómo enviar datos que almacena una variable jQuery a php y guardar en la base de datos con MySQLi?

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

Podéis agregar más ejemplos en tus respuestas si deseas.

Mucho mejor si las respuesta se basan a su conocimiento para que expliquéis que función cumple en cada linea.

5
  • 2
    Iba a editar tu pregunta por errores ortográficos pero me he dado cuenta de que no entiendo algunas cosas de tu gramática así que no he editado nada. Cada vez que pones la combinación de letras os ¿a que te refieres? Commented el 21 sept. 2016 a las 7:10
  • 1
    En castellano todas la preguntas empiezan siempre con ¿ Commented el 21 sept. 2016 a las 7:22
  • 2
    Creo que la pregunta es buena, pero es muy amplia, por favor considera editarla para dejar solo el punto 1 aqui, y hacer dos publicaciones mas con el punto 2 y 3
    – jasilva
    Commented el 21 sept. 2016 a las 13:51
  • 1
    @Shaz Hola amigo sera que mi pregunta puede ser ya aceptada.
    – May
    Commented el 24 sept. 2016 a las 4:55
  • 1
    Buena pregunta, voto para reabrir, lo que si @May tal vez le falta mejorar un poco la redacción.
    – Alan
    Commented el 11 oct. 2016 a las 20:26

2 respuestas 2

5

Esta respuesta esta abierta a la comunidad cambios u sugerencia en ella es aceptada para una buena referencia para futuros lectores.

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

1. ¿cómo enviar datos que almacena una variable jQuery a php y guardar en la base de datos con MySQLi?

Esta variable var comunidad = []; se puede imaginar que es una variable global porqué menciona que almacena información u dato. A pesar que permanece así vacía:

var comunidad = [];

Supongamos que aquella variable contenga esta información almacenado.

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

La siguiente petición en ajax sería de esta forma:

function grabarBD() {
    // Datos almacenados nombres de usuarios
    var comunidad  = [];

    // Convertir a objeto
    var data = {};
    data.comunidad = comunidad;

    // 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);
        }
    });
}

grabarbd.php se recibe el valor y se graba en la base de datos.

<!-- language: lang-php -->

if (!empty($_POST['comunidad'])) {
    // Datos recibidos
    $comunidad = implode(', ', $_POST['comunidad']);

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

    // 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_comunidad) VALUES (?, ?)");
    $sentencia->bind_param("is", $id, $comunidad );
    $sentencia->execute();

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

    // Devolver una respuesta a JavaScript
    echo "Se grabó nuevo usuarios a la comunidad";
}

Como resultado almacenado en la base de datos:

 id    user_comunidad
----  ---------------------
 1     Pedro, Juan, Carlos

Referecia la siguinete fuente

Nota: La siguiente fuente solo permite añadir un registro en la base de datos en este ejemplo modificado almacena registros continuos a la base de datos tomando en cuenta que el id sea una id primary con el atributo AUTO_INCREMENT.

1

Lo primero comentar que los ejemplos de código que pones nada tienen que ver con Ajax.

IIFE (Immediately-invoked function expression)

$(function(){

});

Método de jQuery que se ejecuta cuando el Document Object Model (DOM) esté listo para ser manipulado

$(document).ready(function() { 

});

Comparar Ajax, JSON y PHP es como comparar la velocidad con el tocino. Ajax es una técnica, JSON es un formato y PHP es un lenguaje de programación.

Ajax: Acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Ejemplo llamada Ajax con jQuery:

$.ajax(this.href, {
      success: function(data) {
         $('#main').html($(data).find('#main *'));
         $('#notification-bar').text('The page has been successfully loaded');
      },
      error: function() {
         $('#notification-bar').text('An error occurred');
      }
   });

Ejemplo llamada Ajax con la nueva API fetch de JavaScript:

fetch('flowers.jpg')
.then(function(response) {
  return response.blob();
})
.then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

Fuente

JSON: Acrónimo de JavaScript Object Notation, es un formato de texto ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript aunque hoy, debido a su amplia adopción como alternativa a XML, se considera un formato de lenguaje independiente.

Ejemplo JSON:

{
    "menu": {
        "id": "file",
        "value": "File",
        "popup": {
            "menuitem": [
                {
                    "value": "New", "onclick": "CreateNewDoc()"
                },{
                    "value": "Open", "onclick": "OpenDoc()"
                },{
                    "value": "Close", "onclick": "CloseDoc()"
                }
            ]
        }
    }
}

Fuente

PHP: HP es un lenguaje de programación de uso general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico.

Fuente

6
  • 1
    Hola, si mencionas esto (Lo primero comentar que los ejemplos de código que pones nada tienen que ver con Ajax.) Entonces como es posible enviar los datos almacendados en una variable Esta respuesta se basa al primer ejemplo y funciono Saludos :)
    – May
    Commented el 21 sept. 2016 a las 7:27
  • 1
    A lo que me refiero con ese comentario es que el código JS que has puesto no tiene nada que ver con Ajax, son simples funciones JS. Y por otro lado, que las tres cosas trabajen juntas no implica que tengan que ver, son cosas muy diferentes.
    – eledgaar
    Commented el 21 sept. 2016 a las 7:30
  • 1
    Coincido con @eledgaar , parece ser que deberías repasar dichos conceptos por separado y aprender a diferenciarlos correctamente antes de meterte con ajax.
    – Hechi
    Commented el 21 sept. 2016 a las 7:31
  • 1
    @eledgaar Yo me basaba a realizar consulta correspondiente retornas a un json de esta manera $.ajax({ url: 'tags.php', success: function(result) { var returnedData = JSON.parse(result); var total = returnedData.length; for(var i = 0; i < total; i++){ arr_db.push(returnedData[i]); } } });
    – May
    Commented el 21 sept. 2016 a las 8:12
  • 1
    añadir código JSON en código ajax pero crear dos tipos de respuesta explicando la diferencia, si los ejemplos no tienen nada que ver, entonces de que otra forma se recogería los datos almacenado que contiene la variable supongamos que exista otra forma(la otra forma se podría comentar como adicional) pero la pregunta más se basa a utilizar ajax, json y enviar a php como esta respuesta enviar los datos almacenados por medio de ajax
    – May
    Commented el 21 sept. 2016 a las 8:21

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