Código de PHP - CRUD con FETCH AWAIT ASYNC

sin imagen de perfil
Val: 282
Ha aumentado su posición en 2 puestos en PHP (en relación al último mes)
Gráfica de PHP

CRUD con FETCH AWAIT ASYNCgráfica de visualizaciones


PHP

Publicado el 28 de Enero del 2021 por Jefferson (5 códigos)
439 visualizaciones desde el 28 de Enero del 2021
Como hacer un crud sin usar Jquery (que en lo particular me encanta esa libreria)

Solo usaremos Vanilla Javascript.

Aclaro que fetch trabaja mas cómodo con json, pero para los que estamos acostumbrados a trabajar con ajax de jquery y solemos enviar POST sencillamente, adentrarnos a trabajar con json puede ser complejo.

ojo: si lo desean puedo subir ejemplos trabajando solo con json

Requerimientos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
//--------------------------------------------------------------------------
// ## ESTA FUNCION ES IGUAL A load() de Jquery                             |
// ## IGUAL QUE Jquery LA CARGA EN UN DIV                                  |
/*                                                                         |
                                                                           |
   para llamarla ==>  Carga('url',divID);                                  |
                                                                           |
*///                                                                       |
//-------------------------------------------------------------------------|
function Carga(pag, divID) {
    fetch(pag).then(response => response.text()).then(response => {
        divID.innerHTML = response;
    })
}
//##########################################################################
 
 
 
 
 
 
 
 
 
 
//--------------------------------------------------------------------------
// ## ESTA FUNCION ME LEE LOS TD DE UNA TABLA EN EL DOM Y                  |
// ## ME DEVUELVE EL VALOR SEGUN SU ID                                     |
/*                                                                         |
                                                                           |
   para llamarla ==>  valornode(este,'elID');                              |
                                                                           |
*///                                                                       |
//-------------------------------------------------------------------------|
function valornode(este, elID) {
    var dev;
    var nodelist = este.parentNode.parentNode.childNodes;
    for (var i = 0; i < nodelist.length; i++) {
        var nodeItem = nodelist.item(i);
        if (nodeItem.nodeName == "TD" && nodeItem.id == elID) {
            dev = nodeItem.innerHTML;
        }
    }
    return dev;
}
//###########################################################################
 
 
 
 
 
 
 
 
 
 
 
//-------------------------------------------------------------------------------|
// ### ENVIO UN FORMULARIO Y DEVUELVE LA RESPUESTA ### //                        |
/*                                                                               |
  para llamarla ==>  FrmJson('carpeta/archvo.php',formID).then((retorna) => {    |
                         console.log(retorna);                                   |
                     })                                                          |
*///                                                                             |
//-------------------------------------------------------------------------------|
async function FrmJson(pag, frm) {
    const opciones = {
        method: 'POST',
        body: new FormData(frm)
    };
    try {
        const fetchResp = await fetch(pag, opciones);
        const retorna = await fetchResp.text();
        return retorna;
    } catch (e) {
        return e;
    }
}
//################################################################################
 
 
 
 
 
 
 
 
 
 
//---------------------------------------------------------------------------------------------------------------|
// ### ENVIO UN JSON Y DEVUELVE LA RESPUESTA ### //                                                              |
/*                                                                                                               |
   para llamarla ==>  QryFecth('carpeta/archvo.php',{'valor1': 'uno','valor2': 'dos'}).then((retorna) => {       |
                         console.log(retorna);                                                                   |
                      })                                                                                         |
*///                                                                                                             |
//---------------------------------------------------------------------------------------------------------------|
async function QryFecth(pag, dataJson) {
    var i = -1; var jsdata = new FormData();
    Object.keys(dataJson).forEach(e => {
        i++; jsdata.append(Object.keys(dataJson)[i], dataJson[e])
    });
    const opciones = {
        method: 'POST',
        body: jsdata
    };
    try {
        const fetchResp = await fetch(pag, opciones);
        const retorna = await fetchResp.text();
        return retorna;
    } catch (e) {
        return e;
    }
}
//################################################################################################################
 
 
 
 
 
 
 
 
 
//--------------------------------------------------------------------------------------------------------|
// ### ENVIO UN JSON Y LA RESPUESTA LA PINTO EN UN DIV ### //                                             |
/*                                                                                                        |
                                                                                                          |
  para llamarla ==>  QryFecthDiv('carpeta/archvo.php',{'valor1': 'uno','valor2': 'dos'},'divID')          |
                                                                                                          |
*///                                                                                                      |
//--------------------------------------------------------------------------------------------------------|
function QryFecthDiv(pag, dataJson, div) {
    var i = -1; var jsdata = new FormData();
    Object.keys(dataJson).forEach(e => {
        i++; jsdata.append(Object.keys(dataJson)[i], dataJson[e])
    });
    fetch(pag, {
        method: "POST",
        body: jsdata
    })
        .then(response => response.text()).then(response => {
            div.innerHTML = response;
        })
}
//########################################################################################################

1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 28 de Enero del 2021gráfica de visualizaciones de la versión: 1
441 visualizaciones desde el 28 de Enero del 2021
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

fetch3

fetch1

fetch2

Si alguno de los archivos de descarga no funciona, comentanos aquí el error.




Comentarios sobre la versión: 1 (1)

Jonathan
1 de Abril del 2021
estrellaestrellaestrellaestrellaestrella
Es muy bueno este código te felicito
Responder

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s6846