Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at XMLHttpRequest.xhr.onload (app.js:138)
No he podido avanzar, necesito borrar un contacto de la base de datos pero me sale el error de arriba. Lo hago tal cual como dice la clase y me sale ese error.
Alguien me puede ayudar por favor? Muchas gracias.
este es el código de js.
const formularioContactos = document.querySelector('#contacto'), //Nueva sintaxis de Javascript. Se coge el id de contacto que esta en editar.php listadoContactos = document.querySelector('#listado-contactos tbody');
eventListeners(); //Funcion que se usa para llamar una vez que se ejecute el codigo//
function eventListeners() { //cuando el formulario de editar o crear se ejecuta formularioContactos.addEventListener('submit', leerFormulario); //cuando alguien de click en añadir o en editar, se ejecutala funcion leer formulario. ES UNA FUNCION
//listener para eliminar boton listadoContactos.addEventListener('click', eliminarContacto); }
function leerFormulario(e){ //prevenir la accion por default es añadir una e detro del parentesis e.preventDefault(); // console.log('presionaste'); Revisa si sirve el boton //Leer los datos de los inputs const nombre = document.querySelector('#nombre').value, //lee los datos del ID que estan en formulario. Para poder que funcione traigo el valor del input que se llama value. Compruebo si los valores tienen algo empresa = document.querySelector('#empresa').value, telefono = document.querySelector('#telefono').value, accion = document.querySelector('#accion').value; //Esta accion viene de la parte de formulario y con el boton añadir. //console.log(nombre); compruebo si los valores tienen algo if(nombre === '' || empresa === '' || telefono === ''){ //2 parametros texto y clase mostrarNotificacion('Todos los campos son obligatorios', 'error'); // Se crea el parametro y va a la parte de la function mostrarNotificacion con una clase 'error' //Esta notificacion se muestra gracias a lo que se creo abajo NOTIFICACION PANTALLA //console.log('Los campos estan vacios'); //forma sencilla de validar para ver si hay algo en el formulario } else { //pasa la validacion y crear el llamado a AJAX //console.log('Tienen algo'); const infoContacto = new FormData(); //Forma para leer los datos de un formulario infoContacto.append('nombre', nombre); //se utiliza la funcion append y se pasa la llave 'nombre' y el valor seria la variable de nombre y viene de la parte de arriba. infoContacto.append('empresa', empresa); infoContacto.append('telefono', telefono); infoContacto.append('accion', accion); //me va a decir si es editar o crear
//console.log(...infoContacto); //aparece que esta vacio
if(accion === 'crear'){ //este crear sale del boton de añadir que esta en el hiiden
//crearemos un nuevo contacto
insertarBD(infoContacto); //se crea una funcion que se llama insertarBD y va a tomar el form data
} else {
//editar contacto
}
} } //inserta en la base de datos via AJAX function insertarBD(datos) { //se ejecuta una funcion y toma como parametro unos datos puede ser INFOCONTACTO o solo datos //llamado a AJAX
//crear el objeto const xhr = new XMLHttpRequest();
//abrir la conexion xhr.open('POST', 'inc/modelos/modelo-contactos.php', true); //primero el tipo de peticion que es: POST.Se utiliza cuando insertas algo a la BD en un formulario y GET es para obtener algo que esta en el servidor
//pasar los datos xhr.onload = function() { //leer la respuesta if(this.status === 200) { //quiere decir que la conexion fue exitosa console.log(JSON.parse( xhr.responseText) ); //convierte el string a json los () para acceder a los valores individualmente //leemos la respuesta de PHP const respuesta = JSON.parse( xhr.responseText); //creo una variable con nombre respueta. En este caso se muestra un objeto.
//inserta un nuevo elemento a la tabla //console.log(respuesta.empresa); //el .empresa.nombre.telefono porque lo que viene siendo JSON parse lo convierte a objeto de JS
const nuevoContacto = document.createElement('tr');
nuevoContacto.innerHTML =`
<td>${respuesta.datos.nombre}</td>
<td>${respuesta.datos.empresa}</td>
<td>${respuesta.datos.telefono}</td>
`; // los template strings son la nueva forma de cocatenar valores
//crear contenedor botones
const contenedorAcciones = document.createElement('td');
//crear el icono de editar
const iconoEditar = document.createElement('i');
iconoEditar.classList.add('fas', 'fa-pen-square');
//crea el enlace para editar
const btnEditar = document.createElement('a');
btnEditar.appendChild(iconoEditar);
btnEditar.href = `editar.php?id=${respuesta.datos.id_insertado}`;
btnEditar.classList.add('btn', 'btn-editar');
//agregarlo al padre
contenedorAcciones.appendChild(btnEditar);
//crear el icono de eliminar
const iconoEliminar = document.createElement('i');
iconoEliminar.classList.add('fas', 'fa-trash-alt');
//crear el boton de eliminar
const btnEliminar = document.createElement('button');
btnEliminar.appendChild(iconoEliminar);
btnEliminar.setAttribute('data_id', respuesta.datos.id_insertado);
btnEliminar.classList.add('btn', 'btn-borrar');
//agregarlo al padre
contenedorAcciones.appendChild(btnEliminar);
//agregarlo al tr
nuevoContacto.appendChild(contenedorAcciones);
//agregarlo con los contactos
listadoContactos.appendChild(nuevoContacto);
//resetear el formulario
document.querySelector('form').reset(); //quiero que me retorne un formulario y metodo de js para restear el formulario
//mostrar Notificacion
mostrarNotificacion('Contacto Creado Correctamente', 'correcto'); //Primero toma el mensaje y despues la clase
}
}
//enviar los datos xhr.send(datos); //le paso los datos que quiero enviar. POST agregar nuevos datos a lo que ya existe }
//eliminar el contacto function eliminarContacto(e) { if(e.target.parentElement.classList.contains('btn-borrar')) {
//tomar el id
const id = e.target.parentElement.getAttribute('data_id');
//console.log(id);
//preguntar al usuario
const respuesta = confirm('Estas seguro?');
if(respuesta) {
//llamado a AJAX
//crear el obejto
const xhr = new XMLHttpRequest();
//abrir la conexion
xhr.open('GET', `inc/modelos/modelo-contactos.php?id=${id}&accion=borrar`, true);
//leer la respuesta
xhr.onload = function() {
if(this.status === 200) {
**const resultado = JSON.parse(xhr.responseText);**
console.log(resultado);
}
}
//enviar la peticion
xhr.send(); //cuando se envia por POST se agrega la variable
}
} }
//Notificacion en pantalla function mostrarNotificacion(mensaje, clase) { //Todos los campos son obligatorios pasa a ser un mensaje con la clase //crear la funcion y se le pone mostrarNotificacion const notificacion = document.createElement('div'); //se crea una variable con nombre notificacion notificacion.classList.add(clase, 'notificacion', 'sombra'); //creo una nueva clase llamado notificacion, le doy un nombre y genero un div, una clase y un contenido. Esto ayuda para que desaparezca ya que se creo en css. Es clase genera error o exito notificacion.textContent = mensaje; //y ese mensaje pasa a ser parte del text content. Se reemplaza hubo un error //se crea una notificacion conel texto
//Formulario
formularioContactos.insertBefore(notificacion, document.querySelector('form legend')); //este formulario contiene el form. 1.Toma lo QUE se va a insertar. 2. y DONDE se va a insertar. ENTONCES voy a insertar la notificacion y DESPUES en el lado que quiero. va antes de nombre, empresa, telefono
//Ocultar y mostrar la notificacion
setTimeout(() => { //Es una funcion que va a esperar cierto tiempo en ejecutar un codigo
notificacion.classList.add('visible'); //le va a agregar una clase visible. forma de javascript para escribir
setTimeout(() => {
notificacion.classList.remove('visible');
setTimeout(() => {
notificacion.remove(); //hace que JS remueva la notificacion cuando ya no se usa
}, 500);
}, 3000); //3000 a partir de 3 segundos desaparece
}, 100); //100 es una decima parte de un segundo
}