A tu preguntas le faltan detalles y se encuentra un poco desorganizada... tuve que acomodar un poco a fin de poder visualizarlo bien, ahora bien, para tu proposito he realizado el siguiente codigo:
window.onload = ()=>{
function $ajax(body){
return new Promise((res, rej)=>{
const xhttp = new XMLHttpRequest();
const data = new FormData();
for(let prop in body){
if(prop.toLowerCase() != 'url') data.append(prop, body[prop]);
}
xhttp.onload = ()=> res(xhttp.responseText);
xhttp.onerror = e => rej(e.message);
xhttp.open('POST', body.url, true);
xhttp.send(data);
});
}
$ajax({
url: 'tu url aqui' //debajo ira el cuerpo que deseas enviar al backend
}).then(data =>{
Array.from(document.querySelectorAll(data)).forEach(el =>{
if(el.classList.contains("geojson")){
let text = el.textContent;
document.getElementById("valores").innerHTML += `<option value="${text}">${text}</option>`
}
});
}).catch(e => console.error(e))
}
<html>
<body>
<div id="fileNames"></div>
<select name="valores" id="valores">
</select>
</body>
</html>
La verdad es mucho por explicar, asi que lo explicare de manera rapida, primero tenemos el objeto Promise
, que nos permite manejar codigo asincrono para obtener ya sea una respuesta o un error atravez de sus metodos then
o catch
.
El objeto XMLHttpRequest
es principalmente nuestra peticion ajax
, sin este objeto ajax
no existiria.
A XMLHttpRequest
se le pueden añadir cabeceras o incluso eventos, concretamente los mas importantes son el evento load
, y el evento error
, el evento load
no necesariamente dicta que todo haya ido bien, simplemente que la peticion cargo, para comprobar que efectivamente la peticion se ha realizado de manera correcta tenemos a las propiedades readyState
y status de XMLHttpRequest
.
Para el caso del evento error
, es buena idea tenerlo por si ocurre algun error rechazar la promesa con el mensaje de error.
Tenemos el objeto FormData
que permite crear un objeto por pares de valores, una key
y un value
, algo parecido a un Object
en javascript.
for(let prop in body){
if(prop.toLowerCase() != 'url') data.append(prop, body[prop]);
}
Simplemente estamos recorriendo el objeto que se requiere como parametros y le estamos asignando tanto la clave como el valor a nuestro FormData
por cada llave o valor que le hayamos pasado a body
.
Tenemos tambien al metodo open, que sirve para indicarle a ajax
qué metodo vamos a usar, hacia donde vamos hacer la peticion y si deseamos que la peticion sea sincrona o asincrona.
por ultimo:
xhttp.send(data);
Que envia los datos del FormData
que teniamos.
$ajax({
url: 'tu url aqui' //debajo ira el cuerpo que deseas enviar al backend
}).then(data =>{
Array.from(document.querySelectorAll(data)).forEach(el =>{
if(el.classList.contains("geojson")){
let text = el.textContent;
document.getElementById("valores").innerHTML += `<option value="${text}">${text}</option>`
}
});
}).catch(e => console.error(e))
Acerca de esa parte de ahi, simplemente invocamos a nuestro $ajax
, pasandole como parametro la url
, hay que tener en cuenta que como no estamos usando jQuery
, pasarle cabeceras o hacer otro tipo de cosas simplemente no funcionara como lo esperas, a menos que implementes las cabeceras en tu $ajax
.
Array.from
Lo usamos porque document.querySelectorAll
devuelve un HTMLCollection y NO un Array
, por lo tanto debemos transformar ese HTMLCollection
en un Array
usando Array.from
, para poder que podamos usar forEach
.
if(el.classList.contains("geojson")){
Miramos si el actual objeto recorrido contiene la clase geojson
, en cuyo caso:
let text = el.textContent;
document.getElementById("valores").innerHTML += `<option value="${text}">${text}</option>`
Obtenemos el texto
dentro del elemento actual recorrido y lo almacenamos en text
, luego obtenemos al elemento con id valores
y le añadimos al final un <option>
con ciertos valores dinamicos.
NOTA: esto de aqui:
`<option value="${text}">${text}</option>`
NO es propio de jQuery
se llaman template strings
y permiten renderizar javascript dentro de ${}
.