Así que estoy tratando de hacer una recuperación de API desde una entrada de formulario (la barra de búsqueda de mi sitio), quiero agregar texto a lo que se haya ingresado en el campo de texto y luego enviarlo para que lo extraiga.
<form id="SearchBoxMainNav" style="display: flex;"> <input class="nav-button" type="submit" name="search" value="" > <input id="SearchTerm" type="search" class="search" name="search" value="" placeholder="I Draw...!" autocomplete="off" /> </form>Escritura de Java
const apiUrl = 'https://db.ygoprodeck.com/api/v7/cardinfo.php'; SearchBoxMainNav.addEventListener('submit', async (event) => { event.preventDefault(); const formData = new FormData(SearchBoxMainNav); const formDataSerialized = Object.fromEntries(formData); const jsonObject = { ...formDataSerialized}; console.log(formDataSerialized, "formDataSerialized"); try { const response = await fetch(apiUrl, { method: 'POST', body: JSON.stringify("fname" + jsonObject), Headers: { 'Contnent-Type': 'application/json' }, }); const json = await response.json(); console.log(json); } catch(event) { console.error(event) alert("there was an Error") } });Entonces, lo que me gustaría hacer es cuando lo envían. El texto se agrega al frente y luego pasa por todo el proceso de JavaScript.
Concatene el texto con jsonObject.search , no con jsonObject .
Object.fromEntries() devuelve un nuevo objeto, no hay necesidad de duplicarlo con {...formDataSerialized}
const apiUrl = 'https://db.ygoprodeck.com/api/v7/cardinfo.php'; SearchBoxMainNav.addEventListener('submit', async(event) => { event.preventDefault(); const formData = new FormData(SearchBoxMainNav); const jsonObject = Object.fromEntries(formData); jsonObject.search = 'fname ' + jsonObject.search; try { const response = await fetch(apiUrl, { method: 'POST', body: JSON.stringify(jsonObject), Headers: { 'Content-Type': 'application/json' }, }); const json = await response.json(); console.log(json); } catch (event) { console.error(event) alert("there was an Error") } });