O que \u00e9 FormData em JavaScript?<\/title><br \/>\n <\/head><br \/>\n <body><\/p>\n<h1>O que \u00e9 FormData em JavaScript?<\/h1>\n<p>\n O FormData \u00e9 uma interface fornecida pelo JavaScript que permite a cria\u00e7\u00e3o e manipula\u00e7\u00e3o de objetos que representam dados de formul\u00e1rios HTML. Com o FormData, \u00e9 poss\u00edvel coletar os valores dos campos de um formul\u00e1rio e envi\u00e1-los para o servidor de forma f\u00e1cil e eficiente.\n <\/p>\n<h2>Como usar o FormData em JavaScript para enviar dados de formul\u00e1rios?<\/h2>\n<p>\n Para utilizar o FormData em JavaScript e enviar os dados de um formul\u00e1rio para o servidor, siga as etapas abaixo:\n <\/p>\n<ol>\n<li>Crie um objeto FormData vazio utilizando a palavra-chave <code>new<\/code>.<\/li>\n<pre><code>\n const formulario = new FormData();\n <\/code><\/pre>\n<li>Adicione os campos do formul\u00e1rio ao objeto FormData utilizando o m\u00e9todo <code>append()<\/code>. O primeiro argumento deve ser o nome do campo e o segundo argumento o valor que deseja atribuir a ele.<\/li>\n<pre><code>\n formulario.append(\"nome\", \"Jo\u00e3o Silva\");\n formulario.append(\"email\", \"joao@example.com\");\n formulario.append(\"mensagem\", \"Ol\u00e1, gostaria de mais informa\u00e7\u00f5es sobre o produto.\");\n <\/code><\/pre>\n<li>Envie os dados do formul\u00e1rio para o servidor utilizando uma requisi\u00e7\u00e3o AJAX ou o m\u00e9todo <code>fetch()<\/code>. Certifique-se de definir o m\u00e9todo HTTP como “POST” e o corpo da requisi\u00e7\u00e3o como o objeto FormData.<\/li>\n<pre><code>\n fetch(\"url-do-servidor\", {\n method: \"POST\",\n body: formulario\n })\n .then(response => response.json())\n .then(data => {\n console.log(data);\n })\n .catch(error => {\n console.error(error);\n });\n <\/code><\/pre>\n<li>Substitua “url-do-servidor” pela URL real onde os dados do formul\u00e1rio ser\u00e3o processados. Certifique-se tamb\u00e9m de tratar as respostas e poss\u00edveis erros retornados pela requisi\u00e7\u00e3o.<\/li>\n<\/ol>\n<h2>Como usar o FormData em JavaScript para recuperar dados de formul\u00e1rios?<\/h2>\n<p>\n Al\u00e9m de ser \u00fatil para enviar dados de formul\u00e1rios para o servidor, o FormData tamb\u00e9m pode ser utilizado para recuperar os dados de formul\u00e1rios preenchidos pelo usu\u00e1rio. Para isso, basta criar um objeto FormData a partir do elemento do formul\u00e1rio e acessar os valores dos campos atrav\u00e9s do m\u00e9todo <code>get()<\/code>.\n <\/p>\n<p>\n Vamos considerar o exemplo de um formul\u00e1rio com os campos nome, email e mensagem:\n <\/p>\n<pre><code>\n <form id=\"meu-formulario\">\n <input type=\"text\" name=\"nome\" value=\"Jo\u00e3o Silva\">\n <input type=\"email\" name=\"email\" value=\"joao@example.com\">\n <textarea name=\"mensagem\">Ol\u00e1, gostaria de mais informa\u00e7\u00f5es sobre o produto.<\/textarea>\n <button type=\"submit\">Enviar<\/button>\n <\/form>\n <\/code><\/pre>\n<p>\n No JavaScript, podemos recuperar os valores dos campos do formul\u00e1rio da seguinte maneira:\n <\/p>\n<pre><code>\n const formulario = document.getElementById(\"meu-formulario\");\n const formData = new FormData(formulario);\n\n const nome = formData.get(\"nome\");\n const email = formData.get(\"email\");\n const mensagem = formData.get(\"mensagem\");\n\n console.log(nome, email, mensagem);\n <\/code><\/pre>\n<p>\n No exemplo acima, utilizamos o m\u00e9todo <code>get()<\/code> do objeto FormData para recuperar os valores dos campos do formul\u00e1rio pelo seu nome. Esses valores podem ser ent\u00e3o utilizados para realizar alguma a\u00e7\u00e3o, como fazer uma requisi\u00e7\u00e3o AJAX ou valida\u00e7\u00f5es no pr\u00f3prio navegador.\n <\/p>\n<h2>Como usar o FormData em JavaScript para manipular formul\u00e1rios de maneira ass\u00edncrona?<\/h2>\n<p>\n O FormData em JavaScript tamb\u00e9m pode ser utilizado para realizar manipula\u00e7\u00f5es em formul\u00e1rios de maneira ass\u00edncrona, sem a necessidade de recarregar a p\u00e1gina inteira. Isso \u00e9 poss\u00edvel utilizando requisi\u00e7\u00f5es AJAX ou o m\u00e9todo <code>fetch()<\/code>.\n <\/p>\n<p>\n Para manipular formul\u00e1rios de forma ass\u00edncrona, podemos adicionar um ouvinte de eventos ao formul\u00e1rio para capturar o evento de envio (<code>submit<\/code>). Dessa forma, podemos interceptar o envio do formul\u00e1rio padr\u00e3o e realizar a manipula\u00e7\u00e3o dos dados utilizando o FormData.\n <\/p>\n<p>\n Vamos considerar o exemplo de um formul\u00e1rio que precisa ser enviado assincronamente para o servidor ao ser submetido:\n <\/p>\n<pre><code>\n <form id=\"meu-formulario\">\n <input type=\"text\" name=\"nome\">\n <input type=\"email\" name=\"email\">\n <textarea name=\"mensagem\"><\/textarea>\n <button type=\"submit\">Enviar<\/button>\n <\/form>\n <\/code><\/pre>\n<p>\n No JavaScript, podemos adicionar um ouvinte de eventos ao formul\u00e1rio e utilizar o FormData para enviar os dados de forma ass\u00edncrona:\n <\/p>\n<pre><code>\n const formulario = document.getElementById(\"meu-formulario\");\n\n formulario.addEventListener(\"submit\", function(event) {\n event.preventDefault(); \/\/ Evita a submiss\u00e3o do formul\u00e1rio padr\u00e3o\n\n const formData = new FormData(formulario);\n\n fetch(\"url-do-servidor\", {\n method: \"POST\",\n body: formData\n })\n .then(response => response.json())\n .then(data => {\n console.log(data);\n })\n .catch(error => {\n console.error(error);\n });\n });\n <\/code><\/pre>\n<p>\n No exemplo acima, adicionamos um ouvinte de eventos ao formul\u00e1rio que captura o evento de envio (<code>submit<\/code>). Utilizamos o m\u00e9todo <code>preventDefault()<\/code> para evitar que o formul\u00e1rio seja enviado da maneira padr\u00e3o.\n <\/p>\n<p>\n Em seguida, criamos um objeto FormData a partir do formul\u00e1rio e, utilizando o m\u00e9todo <code>fetch()<\/code>, enviando os dados do formul\u00e1rio para o servidor de forma ass\u00edncrona. Novamente, certifique-se de substituir a “url-do-servidor” pela URL real onde os dados ser\u00e3o processados. Lembre-se tamb\u00e9m de tratar as respostas e poss\u00edveis erros retornados pela requisi\u00e7\u00e3o.\n <\/p>\n<p>\n O FormData \u00e9 uma ferramenta poderosa do JavaScript que permite a manipula\u00e7\u00e3o e envio de dados de formul\u00e1rios de maneira f\u00e1cil e eficiente. Com o FormData, podemos enviar e receber dados de formul\u00e1rios de forma s\u00edncrona ou ass\u00edncrona, al\u00e9m de lidar com o envio de arquivos.\n <\/p>\n<p>\n Ao utilizar o FormData em JavaScript, podemos criar aplica\u00e7\u00f5es web mais interativas e responsivas, melhorando a experi\u00eancia do usu\u00e1rio. Atrav\u00e9s do uso de requisi\u00e7\u00f5es AJAX ou do m\u00e9todo <code>fetch()<\/code>, podemos enviar os dados capturados pelo FormData para o servidor de forma \u00e1gil e realizar as a\u00e7\u00f5es necess\u00e1rias com esses dados.\n <\/p>\n<p>\n Em resumo, saber como usar o FormData em JavaScript para manipular formul\u00e1rios \u00e9 essencial para desenvolvedores web que desejam criar aplica\u00e7\u00f5es din\u00e2micas e eficientes. Com o FormData, podemos simplificar o processo de envio e recupera\u00e7\u00e3o de dados de formul\u00e1rios, tornando nosso c\u00f3digo mais limpo, organizado e otimizado.\n <\/p>\n<p> <\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objeto FormData, adicionar campos a ele e envi\u00e1-lo para o servidor utilizando o m\u00e9todo fetch(). Al\u00e9m disso, aprenderemos como utilizar o FormData para recuperar dados de formul\u00e1rios preenchidos pelo usu\u00e1rio e realizar manipula\u00e7\u00f5es ass\u00edncronas. Com o FormData em JavaScript, podemos simplificar o processo de envio e recupera\u00e7\u00e3o de dados de formul\u00e1rios, tornando nosso c\u00f3digo mais limpo, organizado e otimizado.<\/p>\n","protected":false},"author":9,"featured_media":27859,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-114816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"\n<title>Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-08T22:19:58+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/\",\"url\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/\",\"name\":\"Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2023-08-08T22:19:58+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...\",\"breadcrumb\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\",\"width\":1027,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como usar o FormData em JavaScript para manipular formul\u00e1rios\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency Academy\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"}}]}<\/script>\n","yoast_head_json":{"title":"Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil","description":"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/","og_locale":"pt_BR","og_type":"article","og_title":"Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil","og_description":"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...","og_url":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-08-08T22:19:58+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/","url":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/","name":"Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage"},"image":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage"},"thumbnailUrl":"","datePublished":"2023-08-08T22:19:58+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...","breadcrumb":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage","url":"","contentUrl":"","width":1027,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Como usar o FormData em JavaScript para manipular formul\u00e1rios"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency Academy","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"}}]}},"_links":{"self":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts\/114816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/comments?post=114816"}],"version-history":[{"count":0,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts\/114816\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/media?parent=114816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/categories?post=114816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/tags?post=114816"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/format?post=114816"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=114816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":114816,"date":"2023-08-08T19:19:58","date_gmt":"2023-08-08T22:19:58","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/"},"modified":"2023-08-08T19:19:58","modified_gmt":"2023-08-08T22:19:58","slug":"como-usar-o-formdata-em-javascript-para-manipular-formularios","status":"publish","type":"post","link":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/","title":{"rendered":"Como usar o FormData em JavaScript para manipular formul\u00e1rios"},"content":{"rendered":"

\n
\n
\n O que \u00e9 FormData em JavaScript?<\/title><br \/>\n <\/head><br \/>\n <body><\/p>\n<h1>O que \u00e9 FormData em JavaScript?<\/h1>\n<p>\n O FormData \u00e9 uma interface fornecida pelo JavaScript que permite a cria\u00e7\u00e3o e manipula\u00e7\u00e3o de objetos que representam dados de formul\u00e1rios HTML. Com o FormData, \u00e9 poss\u00edvel coletar os valores dos campos de um formul\u00e1rio e envi\u00e1-los para o servidor de forma f\u00e1cil e eficiente.\n <\/p>\n<h2>Como usar o FormData em JavaScript para enviar dados de formul\u00e1rios?<\/h2>\n<p>\n Para utilizar o FormData em JavaScript e enviar os dados de um formul\u00e1rio para o servidor, siga as etapas abaixo:\n <\/p>\n<ol>\n<li>Crie um objeto FormData vazio utilizando a palavra-chave <code>new<\/code>.<\/li>\n<pre><code>\n const formulario = new FormData();\n <\/code><\/pre>\n<li>Adicione os campos do formul\u00e1rio ao objeto FormData utilizando o m\u00e9todo <code>append()<\/code>. O primeiro argumento deve ser o nome do campo e o segundo argumento o valor que deseja atribuir a ele.<\/li>\n<pre><code>\n formulario.append(\"nome\", \"Jo\u00e3o Silva\");\n formulario.append(\"email\", \"joao@example.com\");\n formulario.append(\"mensagem\", \"Ol\u00e1, gostaria de mais informa\u00e7\u00f5es sobre o produto.\");\n <\/code><\/pre>\n<li>Envie os dados do formul\u00e1rio para o servidor utilizando uma requisi\u00e7\u00e3o AJAX ou o m\u00e9todo <code>fetch()<\/code>. Certifique-se de definir o m\u00e9todo HTTP como “POST” e o corpo da requisi\u00e7\u00e3o como o objeto FormData.<\/li>\n<pre><code>\n fetch(\"url-do-servidor\", {\n method: \"POST\",\n body: formulario\n })\n .then(response => response.json())\n .then(data => {\n console.log(data);\n })\n .catch(error => {\n console.error(error);\n });\n <\/code><\/pre>\n<li>Substitua “url-do-servidor” pela URL real onde os dados do formul\u00e1rio ser\u00e3o processados. Certifique-se tamb\u00e9m de tratar as respostas e poss\u00edveis erros retornados pela requisi\u00e7\u00e3o.<\/li>\n<\/ol>\n<h2>Como usar o FormData em JavaScript para recuperar dados de formul\u00e1rios?<\/h2>\n<p>\n Al\u00e9m de ser \u00fatil para enviar dados de formul\u00e1rios para o servidor, o FormData tamb\u00e9m pode ser utilizado para recuperar os dados de formul\u00e1rios preenchidos pelo usu\u00e1rio. Para isso, basta criar um objeto FormData a partir do elemento do formul\u00e1rio e acessar os valores dos campos atrav\u00e9s do m\u00e9todo <code>get()<\/code>.\n <\/p>\n<p>\n Vamos considerar o exemplo de um formul\u00e1rio com os campos nome, email e mensagem:\n <\/p>\n<pre><code>\n <form id=\"meu-formulario\">\n <input type=\"text\" name=\"nome\" value=\"Jo\u00e3o Silva\">\n <input type=\"email\" name=\"email\" value=\"joao@example.com\">\n <textarea name=\"mensagem\">Ol\u00e1, gostaria de mais informa\u00e7\u00f5es sobre o produto.<\/textarea>\n <button type=\"submit\">Enviar<\/button>\n <\/form>\n <\/code><\/pre>\n<p>\n No JavaScript, podemos recuperar os valores dos campos do formul\u00e1rio da seguinte maneira:\n <\/p>\n<pre><code>\n const formulario = document.getElementById(\"meu-formulario\");\n const formData = new FormData(formulario);\n\n const nome = formData.get(\"nome\");\n const email = formData.get(\"email\");\n const mensagem = formData.get(\"mensagem\");\n\n console.log(nome, email, mensagem);\n <\/code><\/pre>\n<p>\n No exemplo acima, utilizamos o m\u00e9todo <code>get()<\/code> do objeto FormData para recuperar os valores dos campos do formul\u00e1rio pelo seu nome. Esses valores podem ser ent\u00e3o utilizados para realizar alguma a\u00e7\u00e3o, como fazer uma requisi\u00e7\u00e3o AJAX ou valida\u00e7\u00f5es no pr\u00f3prio navegador.\n <\/p>\n<h2>Como usar o FormData em JavaScript para manipular formul\u00e1rios de maneira ass\u00edncrona?<\/h2>\n<p>\n O FormData em JavaScript tamb\u00e9m pode ser utilizado para realizar manipula\u00e7\u00f5es em formul\u00e1rios de maneira ass\u00edncrona, sem a necessidade de recarregar a p\u00e1gina inteira. Isso \u00e9 poss\u00edvel utilizando requisi\u00e7\u00f5es AJAX ou o m\u00e9todo <code>fetch()<\/code>.\n <\/p>\n<p>\n Para manipular formul\u00e1rios de forma ass\u00edncrona, podemos adicionar um ouvinte de eventos ao formul\u00e1rio para capturar o evento de envio (<code>submit<\/code>). Dessa forma, podemos interceptar o envio do formul\u00e1rio padr\u00e3o e realizar a manipula\u00e7\u00e3o dos dados utilizando o FormData.\n <\/p>\n<p>\n Vamos considerar o exemplo de um formul\u00e1rio que precisa ser enviado assincronamente para o servidor ao ser submetido:\n <\/p>\n<pre><code>\n <form id=\"meu-formulario\">\n <input type=\"text\" name=\"nome\">\n <input type=\"email\" name=\"email\">\n <textarea name=\"mensagem\"><\/textarea>\n <button type=\"submit\">Enviar<\/button>\n <\/form>\n <\/code><\/pre>\n<p>\n No JavaScript, podemos adicionar um ouvinte de eventos ao formul\u00e1rio e utilizar o FormData para enviar os dados de forma ass\u00edncrona:\n <\/p>\n<pre><code>\n const formulario = document.getElementById(\"meu-formulario\");\n\n formulario.addEventListener(\"submit\", function(event) {\n event.preventDefault(); \/\/ Evita a submiss\u00e3o do formul\u00e1rio padr\u00e3o\n\n const formData = new FormData(formulario);\n\n fetch(\"url-do-servidor\", {\n method: \"POST\",\n body: formData\n })\n .then(response => response.json())\n .then(data => {\n console.log(data);\n })\n .catch(error => {\n console.error(error);\n });\n });\n <\/code><\/pre>\n<p>\n No exemplo acima, adicionamos um ouvinte de eventos ao formul\u00e1rio que captura o evento de envio (<code>submit<\/code>). Utilizamos o m\u00e9todo <code>preventDefault()<\/code> para evitar que o formul\u00e1rio seja enviado da maneira padr\u00e3o.\n <\/p>\n<p>\n Em seguida, criamos um objeto FormData a partir do formul\u00e1rio e, utilizando o m\u00e9todo <code>fetch()<\/code>, enviando os dados do formul\u00e1rio para o servidor de forma ass\u00edncrona. Novamente, certifique-se de substituir a “url-do-servidor” pela URL real onde os dados ser\u00e3o processados. Lembre-se tamb\u00e9m de tratar as respostas e poss\u00edveis erros retornados pela requisi\u00e7\u00e3o.\n <\/p>\n<p>\n O FormData \u00e9 uma ferramenta poderosa do JavaScript que permite a manipula\u00e7\u00e3o e envio de dados de formul\u00e1rios de maneira f\u00e1cil e eficiente. Com o FormData, podemos enviar e receber dados de formul\u00e1rios de forma s\u00edncrona ou ass\u00edncrona, al\u00e9m de lidar com o envio de arquivos.\n <\/p>\n<p>\n Ao utilizar o FormData em JavaScript, podemos criar aplica\u00e7\u00f5es web mais interativas e responsivas, melhorando a experi\u00eancia do usu\u00e1rio. Atrav\u00e9s do uso de requisi\u00e7\u00f5es AJAX ou do m\u00e9todo <code>fetch()<\/code>, podemos enviar os dados capturados pelo FormData para o servidor de forma \u00e1gil e realizar as a\u00e7\u00f5es necess\u00e1rias com esses dados.\n <\/p>\n<p>\n Em resumo, saber como usar o FormData em JavaScript para manipular formul\u00e1rios \u00e9 essencial para desenvolvedores web que desejam criar aplica\u00e7\u00f5es din\u00e2micas e eficientes. Com o FormData, podemos simplificar o processo de envio e recupera\u00e7\u00e3o de dados de formul\u00e1rios, tornando nosso c\u00f3digo mais limpo, organizado e otimizado.\n <\/p>\n<p> <\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objeto FormData, adicionar campos a ele e envi\u00e1-lo para o servidor utilizando o m\u00e9todo fetch(). Al\u00e9m disso, aprenderemos como utilizar o FormData para recuperar dados de formul\u00e1rios preenchidos pelo usu\u00e1rio e realizar manipula\u00e7\u00f5es ass\u00edncronas. Com o FormData em JavaScript, podemos simplificar o processo de envio e recupera\u00e7\u00e3o de dados de formul\u00e1rios, tornando nosso c\u00f3digo mais limpo, organizado e otimizado.<\/p>\n","protected":false},"author":9,"featured_media":27859,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-114816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"\n<title>Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-08T22:19:58+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/\",\"url\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/\",\"name\":\"Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2023-08-08T22:19:58+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...\",\"breadcrumb\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\",\"width\":1027,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como usar o FormData em JavaScript para manipular formul\u00e1rios\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency Academy\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"}}]}<\/script>\n","yoast_head_json":{"title":"Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil","description":"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/","og_locale":"pt_BR","og_type":"article","og_title":"Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil","og_description":"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...","og_url":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-08-08T22:19:58+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/","url":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/","name":"Como usar o FormData em JavaScript para manipular formul\u00e1rios | Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage"},"image":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage"},"thumbnailUrl":"","datePublished":"2023-08-08T22:19:58+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"Neste artigo, vamos explorar o uso do FormData em JavaScript para enviar e manipular dados de formul\u00e1rios de maneira eficiente. Veremos como criar um objet...","breadcrumb":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#primaryimage","url":"","contentUrl":"","width":1027,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-formdata-em-javascript-para-manipular-formularios\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Como usar o FormData em JavaScript para manipular formul\u00e1rios"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency Academy","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"}}]}},"_links":{"self":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts\/114816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/comments?post=114816"}],"version-history":[{"count":0,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/posts\/114816\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/media?parent=114816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/categories?post=114816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/tags?post=114816"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/format?post=114816"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=114816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}