<form action="" method="post">
<select id="selector" name="selector">
<option value="1">Seleccione...</option>
<option value="2">Quiero ser el numero1 </option>
<option value="3"> Quiero ser el numero 2</option>
</select>
</form>
<p id="respuestaAjax"></p>
<script src="scriptPrueba.js"></script>
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
var_dump($_POST); //entra al IF pero devuelve array vacio
}
var select = document.querySelector("#selector");
var obj;
select.addEventListener("change",cargarContenidoSeleccionado);
function cargarContenidoSeleccionado() {
var idLista = select.value; //selecciono el id seleccionado (viene por el listener change del select^^^^
// var url = "prueba.php";
obj = new XMLHttpRequest();
obj.addEventListener('load', respuestaAjax);
obj.addEventListener('error', errorAjax);
obj.open("POST", "prueba.php");
obj.send(idLista);
console.log(idLista); //esto esta bien, me devuelve el value del option seleccionado
console.log(obj.responseText); //si lo chekeo desde la consola me devuelve un renglon vacio
}
function errorAjax(){
alert("Hubo un error en Ajax");
}
function respuestaAjax() {
if (obj.status !== 200) {
errorAjax();
}
if (obj.status === 200){
setearRespuestaAjax(obj.responseText);
console.log(obj.responseText);
}
}
function setearRespuestaAjax(response) {
document.querySelector("#respuestaAjax").innerHTML = response; //Renovamos el contenido de la lista en la vista, en base
// a lo que nos trajimos del servidor.
}
function cargarSuperHeroes(){ // function del tipo callback
idSuperheroe = superheroe.value;
var url = "http://localhost:3000/"; // Url del servidor
obj = new XMLHttpRequest();
obj.addEventListener('load',responseFunction); // Listener para el evento load del Ajax
obj.addEventListener('error',errorFunction); //Listener para mostrar el error en Ajax
obj.open("POST",url);
obj.send(idSuperheroe);
}
clave=valor
clave=valor&otra_clave=valor
function encodeParams(data) {
let params = typeof data == 'string' ? data : Object.keys(data).map(
(k) => { return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }
).join('&');
return params;
}
function requestPOST(url, data, success, responseType) {
let params = encodeParams(data);
let request = new XMLHttpRequest();
request.open('POST', url);
request.responseType = responseType ? responseType : 'text';
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status == 200) {
success(request.responseText);
}
};
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(params);
}
// Esta función es la encargada de procesar la respuesta en caso satisfactorio
function proccessResponse(resp) {
console.log(resp);
}
const url = 'url';
const data = 'clave=valor'; // clave=valor Ejemplo => name=Jhon&email=jhondoe@mail.com
requestPOST(url, data, proccessResponse);