es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Lit2.0 cómo enviar datos de formulario al backend

11 Jul, 2023 Programación

Estoy usando Lit2.0, componentes web de Material, Django (backend).

Una referencia: https://www.thinktecture.com/en/web-components/flaws/

No entiendo cómo enviar los datos del formulario desde el componente Lit al backend (Django)

{% csrf_token %}


El archivo “form.html” contiene el componente Lit (basic-form)

import { LitElement, html } from “lit”;

export class BasicForm extends LitElement {

static properties = {
    form: '',
};

constructor() {
    super();
}

render() {
    return html`
        <mwc-textfield name="first_name"></mwc-textfield>
    `;
}

}
customElements.define(‘basic-form’, BasicForm);

¿Alguien podría guiarme en la dirección correcta?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para enviar los datos del formulario desde el componente Lit al backend de Django, es necesario agregar un event listener al formulario que se encargue del envío. Aquí tienes un ejemplo de cómo hacerlo:

    1. En el componente basic-form, agrega un event listener submit al elemento del formulario: 
      render() {
 return html`
   <form id="my-form">
     <mwc-textfield name="first_name"></mwc-textfield>
   </form>
 `;
}

connectedCallback() {
 super.connectedCallback();
 const form = this.shadowRoot.querySelector('#my-form');
 form.addEventListener('submit', (e) => {
   e.preventDefault();
   const formData = new FormData(form);
   const url = '/submit-form'; // reemplaza con tu endpoint de Django
   fetch(url, {
     method: 'POST',
     body: formData,
   })
     .then((response) => {
       console.log('¡Envío exitoso!');
     })
     .catch((error) => {
       console.error('Error al enviar el formulario:', error);
     });
 });
}
    2. En tu vista de Django, debes manejar el envío del formulario. Aquí tienes un ejemplo de una vista que simplemente muestra los datos del formulario en la consola: 
      from django.http import JsonResponse

def submit_form(request):
   if request.method == 'POST':
       print(request.POST)
       return JsonResponse({'success': True})
   return JsonResponse({'success': False})
    3. Finalmente, actualiza el atributo action del formulario en form.html para que apunte al endpoint de Django: 
      <form id="id_demo" method="post" action="/submit-form">

    Con estos cambios, al enviar el formulario se enviará una solicitud POST al backend de Django con los datos del formulario en el cuerpo de la solicitud. Luego podrás procesar estos datos en tu vista de Django según sea necesario.

Comments are closed.