Estoy usando este formulario.
<form action="http://localhost:3000/"> <input type="text" id="url" name="url" v-model="url" placeholder="http://"> <input type="text" id="message" name="message" value="888"> <button @click="submit" :disabled="disabled">Go</button> </form> Hasta ahora, al presionar un botón se obtenía la página http:localhost:300?url=...&message=...
Ahora estoy tratando de anular esto manualmente, así que agregué e.preventDefault(); a la función submit() . Ahora puedo llamar a Fetch API para obtener esta URL manualmente, pero ¿cómo construyo la URL desde el formulario?
Todas las fuentes en línea muestran cómo hacerlo con POST, nadie parece cubrir GET. No estoy seguro de por qué, porque necesito una solicitud idempotente. ¿Hay una forma estándar de hacer esto?
Estás usando Vue, por lo que normalmente usarías algo como esto
<template> <form @submit.prevent="submit"> <input type="text" v-model="url" placeholder="http://" /> <input type="text" v-model="message" /> <button type="submit" :disabled="disabled">Go</button> </form> </template>Notas:
<button> es un botón de envío sin un controlador de clics . Esto le permite escuchar los eventos de envío en el <form> que se pueden activar con un clic del mouse o con el teclado.@submit.prevent maneja el evento de envío en el <form> y evita la acción predeterminada automáticamente<input> tienen un v-model asociado que respalda una propiedad data Aquí hay un ejemplo de la parte <script>
const target = "http://localhost:3000/"; export default { data: () => ({ url: "", message: "888", }), computed: { // just an example disabled: ({ url, message }) => url.length === 0 || message.length === 0, }, methods: { async submit() { const params = new URLSearchParams({ url: this.url, message: this.message }); const res = await fetch(`${target}?${params}`); }, }, }; En JS normal, aún puede escuchar eventos de envío en el formulario, capturar todos los campos usando FormData y convertir eso en una cadena de consulta con URLSearchParams
document.querySelector("form").addEventListener("submit", async (e) => { e.preventDefault(); const data = new FormData(e.target); const params = new URLSearchParams(data); const res = await fetch(`${e.target.action}?${params}`) });