PUT y DELETE: ¿Cómo llamar estas peticiones desde mi html?
Estoy creando una aplicación web para mantener los elementos en una lista. Antes de reiniciar mi front-end para ser ejecutado en un servidor y tener el contenido almacenado y mantenido en memoria en el servidor, estaba usando botones para editar y eliminar elementos. Estos botones entonces tenían oyentes de eventos que al ser clicado, funciones de javascript hicieron su cosa.
Ahora lo estoy desarrollando en un spa RESTful y no tengo idea de cómo llamar al PUT y eliminar métodos. Leí que los formularios/botones no soportan PUT y DELETE, y usar POST es mala práctica ya que no es idempotente.
¿Cómo voy por esto? ¿Necesito usar algún tipo de plug-in para poder lograr esto? ¿Es posible lograr esto sin funciones de javascript?
Así se estructura un artículo en una lista en mi html:
<%= item %>
Conozco el formmethod
las etiquetas son incorrectas allí - les dejó para explicar lo que estoy tratando de lograr
Pregunta hecha hace 3 años, 4 meses, 29 días - Por syntaxsculptor
3 Respuestas:
-
Un formulario no puede hacer
DELETE
oPUT
operaciones porqueDELETE
operación que no necesita formas, y paraPUT
la forma no puede entender la semántica de esta operación. ElEl elemento sólo se utiliza para crear datos (bien, técnicamente para transportar los datos de la interfaz de usuario al destino). Así que si desea implementar acciones de borrado y actualización, que semánticamente corresponden a
DELETE
yPUT
operaciones en la arquitectura REST, entonces usted tiene que hacerlo manualmente. ElPUT
la operación es bastante simple. En reposo significa sustituir un recurso existente por cualquier forma que tenga. Puede reunir los valores manualmente en JavaScript y enviarlos al servidor usandofetch
. ElDELETE
la operación es incluso más simple porque no necesita cuerpo (normalmente, aunque está permitido). Sólo toma el identificador de recursos (el enlace con el recurso) y utiliza fetch API para enviar la solicitud.Tenga en cuenta aquí, no puede hacer actualización y eliminar con formulario y mantener semántica de operaciones REST. Sin embargo, puede ir RPC (Remote Procedure Call) y crear un punto final para actualizar sus datos a través de la operación POST. THe endpoint sería algo como
https://api.domain.com/path/to/resource/id/put
, y el punto final acepta la operación POST que de facto hace la operación PUT.Respondida el Dec 17, 2020 a las 20:46 - por codecrusaderx
Votos positivos: 0 | Votos negativos: 0 -
Para realizar peticiones PUT y DELETE desde un archivo HTML, puedes hacerlo utilizando JavaScript y AJAX. Aquí te dejo un ejemplo de cómo podrías modificar tus botones para que envíen una petición PUT y DELETE respectivamente:
Primero, necesitas cambiar tus botones para que llamen a funciones JavaScript al hacer clic en ellos. Por ejemplo:
html
- <%= item %>
Luego, puedes definir las funciones
deleteItem
yupdateItem
en tu archivo JavaScript para realizar las peticiones DELETE y PUT respectivamente utilizando AJAX. Aquí tienes un ejemplo para cada una:``
javascript function deleteItem(item) { fetch(
/items/${item}`, { method: 'DELETE' }) .then(response => { if (response.ok) { // Hacer algo si la petición DELETE fue exitosa } else { // Hacer algo si la petición DELETE falló } }) .catch(error => { console.error('Error al procesar la solicitud:', error); }); }function updateItem(item) { fetch(
/items/${item}
, { method: 'PUT', body: JSON.stringify({ // Datos a enviar en la solicitud PUT si es necesario }), headers: { 'Content-Type': 'application/json' } }) .then(response => { if (response.ok) { // Hacer algo si la petición PUT fue exitosa } else { // Hacer algo si la petición PUT falló } }) .catch(error => { console.error('Error al procesar la solicitud:', error); }); } ```Recuerda que estas funciones utilizan la función
fetch
de JavaScript para realizar las peticiones. Puedes personalizar el manejo de las respuestas según tus necesidades.Espero que esta información te sea de ayuda. ¡Déjame saber si tienes alguna otra pregunta!
Respondida el Dec 18, 2020 a las 20:45 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
Cómo realizar solicitudes PUT y DELETE desde HTML
Los métodos HTTP PUT y DELETE no son compatibles de forma nativa con los elementos
<form>
HTML. Sin embargo, hay varias formas de implementar estas solicitudes:1. Usar una biblioteca de JavaScript:
Puedes utilizar bibliotecas como Axios o Fetch para realizar solicitudes HTTP desde JavaScript. Estas bibliotecas proporcionan una interfaz fácil de usar para enviar PUT y DELETE solicitudes.
Ejemplo con Axios:
javascript const axios = require('axios'); // Enviar una solicitud PUT axios.put('/items/item-id', { description: 'Nueva descripción' }); // Enviar una solicitud DELETE axios.delete('/items/item-id');
2. Usar enlaces personalizados:
Puedes crear enlaces personalizados que, cuando se hagan clic, envíen una solicitud PUT o DELETE.
Ejemplo:
html Actualizar Eliminar
El atributo
_method
indica al servidor que use el método PUT o DELETE.3. Usar un formulario con un campo oculto:
Puedes utilizar un formulario con un campo oculto que contenga el método de solicitud.
Ejemplo:
html
No es posible lograr esto sin funciones de JavaScript sin utilizar plugins o ajustes personalizados del servidor.
Plugins:
Hay plugins disponibles, como el plugin jQuery Form, que te permiten enviar solicitudes PUT y DELETE desde formularios HTML.
Ajustes del servidor:
Algunos servidores web, como Apache y Nginx, se pueden configurar para aceptar solicitudes PUT y DELETE a través de formularios POST. Sin embargo, esto no es una solución estándar y puede no ser compatible con todos los servidores.
Respondida el Dec 18, 2020 a las 20:47 - por Gemini
Votos positivos: 0 | Votos negativos: 0