0

estoy usando Fetch y quiero pasar los valores GET y POST exactamente como lo hace JQuery, les tengo imágenes ilustrativas:

Mis datos a enviar:

introducir la descripción de la imagen aquí

y usando Jquery GET envía el Object como texto plano usando encodeURIComponent:

$.ajax({
data: obj,
url: 'ajax.php',
method: "get",
success: function(r) {
}
});
http://localhost/index/Fede/ajax.php?obj%5B0%5D=4123&obj1%5Bv1%5D=1&obj1%5Bv2%5D=4&obj1%5Bv3%5D%5B%5D=123&obj1%5Bv3%5D%5B1%5D%5Bv11%5D=v11&obj2%5Bvv1%5D=2&obj2%5Barr%5D%5B0%5D%5Barrv%5D=123&obj2%5Barr%5D%5B%5D=312

¿Como puedo enviar dicho objeto con fetch al estilo Jquery Ajax en forma de texto plano? De esta manera (usé el mismo String del GET de ajax para mostrarles como quiero enviar los datos):

fetch('ajax.php?obj[0]=4123&obj1[v1]=1&obj1[v2]=4&obj1[v3][]=123&obj1[v3][1][v11]=v11&obj2[vv1]=2&obj2[arr][0][arrv]=123&obj2[arr][]=312')
.then(r => /text\/html/.test(r.headers.get('content-type')) ? r.text() : (/json/.test(r.headers.get('content-type')) ? r.json() : r.text()))
.then(r => console.log(r))
.catch(e => console.error(e));
http://localhost/index/Fede/ajax.php?obj%5B0%5D=4123&obj1%5Bv1%5D=1&obj1%5Bv2%5D=4&obj1%5Bv3%5D%5B%5D=123&obj1%5Bv3%5D%5B1%5D%5Bv11%5D=v11&obj2%5Bvv1%5D=2&obj2%5Barr%5D%5B0%5D%5Barrv%5D=123&obj2%5Barr%5D%5B%5D=312

En ambos casos el servidor lo recibe y da respuestas. La razón de esto es que estoy dejando de usar Jquery, quiero que todos mis scripts sean nativeJS.

7
  • 1
    JSON.stringify() es nativo de javascript. Commented el 20 feb. 2019 a las 22:31
  • Para usarlo solo pasas el objeto var stringObj = JSON.stringfy(objeto), developer.mozilla.org/es/docs/Web/JavaScript/Referencia/… Commented el 20 feb. 2019 a las 22:34
  • Sin usar JSON.Stringify(), es decir, JQuery envia objetos como texto plano, con las llaves e indices de arrays y objects dentro del dato. Commented el 20 feb. 2019 a las 22:43
  • Pues no estoy entendiendo bien tal vez quieres encodeURIComponent() Commented el 20 feb. 2019 a las 22:48
  • denifer santiago fernandez es transformar un dato Object en string sin usar JSON.stringify, es decir transformar el dato como lo hace Jquery en un string con los indices o llaves. Commented el 20 feb. 2019 a las 22:50

1 respuesta 1

0

Listo amigos, no me dí por vencido, diseñé un una function que convierte un object a texto plato sin necesidad de usar JSON.stringify y se los comparto por si acaso alguien lo necesita:

let obj = {
    obj: 1,
    obj1: 'sd',
    obj2: [1, 2, 3],
    obj3: {
        sval1: 1,
        sval2: 'sd',
        sval3: [1, 2, {
            ssval1: 1
        }, 'nuu', ['newArr', 14123]],
    },
};
function params(value,encoded=false) {
let res = [],
    typeval = val => Object.prototype.toString.call(val).replace(/\[object (.*)\]/, '$1'),
    param = {
        String: (s, p) => res.push((p ?encoded? encodeURIComponent(p):p + '=' + encodeURIComponent(s) : s.split('=')[0] + '=' + s.split('=')[1])),
        Number: (n, p) => res.push(encoded? encodeURIComponent(p):p + '=' + encodeURIComponent(n)),
        Array: (a, p) => a.forEach((v, i) => param[typeval(v)](v, !p ? `[${i}]` : p + `[${i}]`)),
        Object: (o, p) => Object.entries(o).forEach((o) => param[typeval(o[1])](o[1], !p ? o[0] : p + `[${o[0]}]`))
    };
param[typeval(value)](value);
return res.join('&');
}
document.write('sin codificar:\n'+params(obj));
document.write('<br><br>');
document.write('codificado:\n'+params(obj,true));

Solo se nececita usar Fetch y la URL donde recibirá los datos:

fetch('ajax.php?' + params(obj))
    .then(r => /text\/html/.test(r.headers.get('content-type')) ? r.text() : (/json/.test(r.headers.get('content-type')) ? r.json() : r.text()))
    .then(r => console.log(r))
    .catch(e => console.error(e));
2
  • No necesitas aclarar el resuelto. Con que aceptes una respuesta alcanza. Y decir que no sirvieron de nada las respuestas genera ruido y no es amistoso. Tal vez, nadie entendio que necesitabas.
    – gbianchi
    Commented el 22 feb. 2019 a las 22:48
  • Cierto, quizás no me expliqué bien ó muchos no han conocido la API Fetch para hacer AJAX, sin necesidad de usar Jquery, así que estoy haciendo mi propio Ajax, pero Fetch no es muy flexible con JSON.stringify, por eso realmente no me sirvieron las respuestas, porque no todo se resuelve con JSON.stringify, para eso hice mi propia function que convierte Objects en String y me functiona perfecto con Fetch tanto GET como POST, PHP lo recibe perfectamente todas las variables,"Objects dentro de Arrays de Objects dentro de un Object". Commented el 22 feb. 2019 a las 23:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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