Home / Questions / 435460
Accepted
C0D3BREAK3R
Asked: 2022-03-15 12:41:56 +0800 CST 2022-03-15 12:41:56 +0800 CST

Receive and process data through AJAX (Pure JavaScript) from queries made to MySQL with PHP

  • 772

I've tried all the ways I've found, I've seen several questions on Stack Overflow and searched the web but I can't get JavaScript to receive the data in a way that it can handle it. I'm getting a MySQL query in AJAX but it's like JavaScript treats it as plain text. I leave the codes:

javascript

/*=============================================
=                 Obtener Tests               =
=============================================*/

const select = document.getElementById("seleccionarTemario");

select.addEventListener("change", () => {
    let opcionSeleccionada = select.options[select.selectedIndex];
    let idTemarioSeleccionado = opcionSeleccionada.value;
    valueSelect = idTemarioSeleccionado;

    console.log(idTemarioSeleccionado);

    ajaxObtenerTests(valueSelect);
});

/*============  End of Obtener Tests  =============*/

/*=============================================
=              AJAX Obtener Tests             =
=============================================*/

let datosObtenidos;

ajaxObtenerTests = (idTemario) => {
    let peticion = new FormData();
    peticion.append("idTemario", idTemario);

    let xhr = new XMLHttpRequest();

    xhr.open("POST", "/src/admin/test/obtenerTests.php", true);

    xhr.onload = function () {
        if (this.status === 200) {
            let datos = this.responseText;
            datosObtenidos = datos;
            verDatos();
        }
    };

    xhr.send(peticion);
};

verDatos = () => {
    console.log(datosObtenidos);
    console.log(datosObtenidos[0].id_test);
};

PHP

<?php

session_start();

require_once($_SERVER["DOCUMENT_ROOT"] . "/src/admin/comprobarAdmin.php");
require_once($_SERVER["DOCUMENT_ROOT"] . "/src/conexionbd.php");

$idTemario = $_POST["idTemario"];

$sqlObtenerTests = "SELECT id_test, nombre_test, ruta_test FROM tests WHERE temario_perteneciente = $idTemario";
$obtenerTests = mysqli_query($conn, $sqlObtenerTests);

$datosTests = [];

while ($row = mysqli_fetch_array($obtenerTests))
{
    array_push($datosTests, $row);
}

echo json_encode($datosTests);

The data I receive in JS is this:

[{"id_test":"18","nombre_test":"Test","ruta_test":"C:\/xampp\/htdocs\/1PHP\/pages\/contenido temarios\/tests\/Test.php"},{"id_test":"19","nombre_test":"Test 2","ruta_test":"C:\/xampp\/htdocs\/1PHP\/pages\/contenido temarios\/tests\/Test 2.php"}] <script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>

enter image description here

It seems to me that something that may be giving me an error is that this string is added to the end of the json text:

<script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>

And I don't understand why that is added. I think it shouldn't happen.

I have eliminated the chain that I mentioned before but still I am still unable to process the response received, I add code where the change made is shown:

xhr.onload = function () {
        if (this.status === 200) {
            let cadena =
                ' <script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>';
            let datos = this.responseText.replace(cadena, "");
            datosObtenidos = datos;
            verDatos();
        }
    };

After that modification I get the following in the console.log to see the data of the variable datosObtenidos:

[{"id_test":"18","nombre_test":"Test","ruta_test":"C:\/xampp\/htdocs\/1PHP\/pages\/contenido temarios\/tests\/Test.php"},{"id_test":"19","nombre_test":"Test 2","ruta_test":"C:\/xampp\/htdocs\/1PHP\/pages\/contenido temarios\/tests\/Test 2.php"}]

enter image description here

Still as shown in the final console.log I can't access the values.

I want to treat the data in JS as an array or in any way that allows me to iterate through the values. If someone knows how to avoid sending me the indices 0,1 and 2, getting the indices to be only those with names, I would appreciate it.

If there is any other easier way to get the expected result and any suggestion is welcome. Thanks in advance.

php

2 Answers

  1. Best Answer

    I was able to solve my problem thanks to the help of @gaidyjg, since he did not publish an answer containing the solution, I write one, thank you very much.

    The problem was partly that because I use prepros I get this undesirable string at the end of the server response:<script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>

    In the first place I had to eliminate it, my function that receives the data was like this:

    xhr.onload = function () {
        if (this.status === 200) {
            let cadena =
                ' <script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>';
            let datos = this.responseText.replace(cadena, "");
            datosObtenidos = datos;
            verDatos();
        }
    };

    After that, you have to parse the data (excuse me if it's not called that or I'm inventing the term) so that javascript reads it as json, leaving the function as follows:

    xhr.onload = function () {
        if (this.status === 200) {
            let cadena =
                ' <script data-prepros-origin-host="localhost" src="http://localhost:300/__prepros-server__/prepros.js"> </script>';
            let datos = this.responseText.replace(cadena, "");
            datosObtenidos = JSON.parse(datos);
            mostrarTests();
        }
    };

    And once I do all that it is possible to access the data.

    • 1

  2. once you have the data in json format, you simply have to read it as follows:

    datos.forEach(function(elemento, indice){
    console.log("Estas leyendo el registro: " + indice);
    console.log("idtest = " + elemento['idtest']);
    console.log("nombre_test = " + elemento['nombre_test']);
    console.log("ruta_test = " + elemento['ruta_test']);
});
    • 0