Jump to content
FabianoSouza

AJAX - Enviar form e string

Recommended Posts

Quero saber se é possível enviar formData e string na mesma requisição AJAX.

 

$frmData = new FormData($form);
$xhr.open('post', $form.getAttribute('action'), true);
$xhr.setRequestHeader('content-type', 'text/plain;charset=utf-8');

$xhr.send($frmData); //******* quero saber se consigo enviar sting, além do objeto formData.

 

Share this post


Link to post
Share on other sites

Cara, precisei fazer parecido hoje, olha como consegui enviar um arquivo e minhas strings.

var fileData = new FormData();
var file_data = [];

fileData.append('id_conta', 10);

$('input[type="file"]').each(function(){
	file_data = $('input[type="file"]')[0].files;
	fileData.append('arquivo[]', file_data[0]);
});

let request = $.ajax({
  url: "minha_url.php",
  type: "POST",
  data: fileData,
  contentType: false,
  processData: false,
});
request.done(function (data) {
	// retorno data
});

Aí no PHP recebo o $_POST e o $_FILES.

Share this post


Link to post
Share on other sites

Deixa eu ver se entendi...

var fileData = new FormData();
var file_data = [];

fileData.append('id_conta', 10);

@marcosmarcolin

No trecho acima você está atachando (id_conta, 10)  ao objeto form, certo?

Não entendi isso... você atacha uma string direto ao "corpo" do objeto form? Quero entender só a lógica da coisa (pois não manjo de JQuery, uso JS puro).

Share this post


Link to post
Share on other sites

Olá Fabiano,

 

Bem acredito que você terá que tratar tudo dentro do formato de envio especifico seja 

$xhr.setRequestHeader('content-type', 'text/plain;charset=utf-8');

ou

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

 

Terá que tratar os parametros juntos, se precisa de uma string junto com o Form coloque o valor que precisa dentro de um hidden field, se for Json ou outro formato... adicione junto dos parametros. E dependendo você pode adicionar esse valor na url e recuperar via get do lado que receber.

 

Enfim... se entendi corretamente o que precisa... talvez o que falei acima possa lhe ajudar.


Até!

Share this post


Link to post
Share on other sites

Olá @Uerlen Santos. Obrigado pelas sugestões.

 

Estou enfrentando problemas com truncamento de caracteres acentuados no lado servidor.

Abri mão da abordagem de recuperar o valor dos campos (no lado servidor) da forma convencional pelo motivo acima.

 

Então estou pensando em outra abordagem: enviar o formData (que levará um arquivo anexo) e enviar texto "fora do objeto formData", mas no mesmo momento em que envio o formData por AJAX. Não sei se isso  dará certo...preciso testar.

 

Quanto a enviar o valor na URL eu também pensei. Fiz uns testes mas aí o texto chega mas form não vai. Vou explorar mais essa possibilidade.

 

Valew!

Share this post


Link to post
Share on other sites
5 horas atrás, FabianoSouza disse:

Deixa eu ver se entendi...


var fileData = new FormData();
var file_data = [];

fileData.append('id_conta', 10);

@marcosmarcolin

No trecho acima você está atachando (id_conta, 10)  ao objeto form, certo?

Não entendi isso... você atacha uma string direto ao "corpo" do objeto form? Quero entender só a lógica da coisa (pois não manjo de JQuery, uso JS puro).

 

Isso, o ('id_conta', 10) passei fixo apenas para o exemplo, mas eu envio os dados do meu formulário no lugar. Eu pego o valor do campo 'id_conta' e demais campos do meu formulário e adiciono no meu FormData(append), e depois por fim o anexo do campo 'File' do formulário, entendeu?

 

Na requisição eu envio apenas o FormData, que terá os campos que estou passando e o meu anexo. Aí lá no PHP recebo o anexo na global $_FILES e os demais valores em $_POST, que é o tipo da requisição Ajax.

 

Lá no PHP eu recebo $_POST['id_conta'] que será 10.

Share this post


Link to post
Share on other sites

@FabianoSouza os caracteres acentuados estão aparecendo como simbolos?

Se for... o problema é na codificação dos dados... Normalmente é utilizado UTF8... 

Não qual linguagem utiliza no lado do server... mas a maioria oferece um encoder/decoder para esses formatos.

Em php por exemplo é: 

https://www.php.net/manual/pt_BR/function.utf8-encode.php

 

Share this post


Link to post
Share on other sites

Olá @Uerlen Santos.
Meu amigo, fazendo uns testes aqui parece que enviado a string pela URL parece que resolve o meu problema de caracteres especiais truncados. Vou explorar mais para poder confirmar essa impressão.

 

Quanto ao problema de codificação é o seguinte. Uso ASP Clássico, já defini como UTF8 todos os manipuladores de cabeçalho suportados pela linguagem mas não resolveu.

 

  Response.AddHeader "Content-Type", "text/html;charset=UTF-8"
  Response.Charset = "UTF-8"

 

Uma pergunta quanto a enviar dados pela URL. Sabe dizer se há algum tipo de limite de caracteres?

Pergunto isso porque em meu formulário há um campo para comentários...para até 1.000 caracteres.

Share this post


Link to post
Share on other sites

Olá @FabianoSouza

Existe alguma necessidade do arquivo que está enviando possuir o mesmo nome de quando é enviado?

 

Porque eu vejo a seguinte situação:

  • Usuário A envia um arquivo com o nome iMasters.jpg
  • Usuário B também envia um arquivo iMaster.jpg mas a imagem é diferente da anterior

Logo o usuário B vai substituir o arquivo do usuário A no servidor.

 

5 horas atrás, FabianoSouza disse:

Uma pergunta quanto a enviar dados pela URL. Sabe dizer se há algum tipo de limite de caracteres?

Pergunto isso porque em meu formulário há um campo para comentários...para até 1.000 caracteres.

Isso eu não sei dizer até fiquei curioso a respeito. Mas já enviei post com muito mais de 1.000 caracteres.

Share this post


Link to post
Share on other sites
Em 26/06/2019 at 06:14, Omar~ disse:

Olá @FabianoSouza

Existe alguma necessidade do arquivo que está enviando possuir o mesmo nome de quando é enviado?

 

Porque eu vejo a seguinte situação:

  • Usuário A envia um arquivo com o nome iMasters.jpg
  • Usuário B também envia um arquivo iMaster.jpg mas a imagem é diferente da anterior

Logo o usuário B vai substituir o arquivo do usuário A no servidor.

 

Isso eu não sei dizer até fiquei curioso a respeito. Mas já enviei post com muito mais de 1.000 caracteres.

Respondendo a sua pergunta.

Os arquivos serão renomeados (com o id do registro salvo no banco de dados).

Share this post


Link to post
Share on other sites
Em 24/06/2019 at 20:09, marcosmarcolin disse:

 

Isso, o ('id_conta', 10) passei fixo apenas para o exemplo, mas eu envio os dados do meu formulário no lugar. Eu pego o valor do campo 'id_conta' e demais campos do meu formulário e adiciono no meu FormData(append), e depois por fim o anexo do campo 'File' do formulário, entendeu?

 

Na requisição eu envio apenas o FormData, que terá os campos que estou passando e o meu anexo. Aí lá no PHP recebo o anexo na global $_FILES e os demais valores em $_POST, que é o tipo da requisição Ajax.

 

Lá no PHP eu recebo $_POST['id_conta'] que será 10.

@marcosmarcolin sua dica foi ótima! Entendi o conceito e apliquei.

 

Fiz dessa forma e resolveu o meu problema.

	$frmData.append('id',$idItem)

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By CharlieAldrin
      Estou tentando fazer um chat, e nele é necessário saber se um usuário continua na página do chat, para caso ele saia informar o outro usuário.
      Encontrei em alguns lugares como solução fazer um ajax conferindo se o usuário está "dando sinal de vida" de 10 em 10 segundos (por exemplo), porém não entendi como fazer isso e nem como colocar no código. Alguém pode me ajudar por favor? 
      Ou me informar se existe alguma forma melhor de conferir isso?
       
      Valeu desde já :) 
    • By Aureo Almeida
      Não tenho domínio do uso de Ajax e estou com problema para chamar uma função PHP de um arquivo. Num arquivo chamado atualiza.php possuo uma função para atualizar tabelas de um Banco de Dados com dois insert into, chamada function atualizaPdIt().
      Eu desejo que esta função seja chamada para dentro de um arquivo chamado finaliza_compra.php através do evento onclick de um imput button, que está assim:
      <button onclick=" atualizaCompra ()" class='imput-concluir'>Finalizar</button> O Script que coloquei no Head da página é este:
      <script> function atualizaCompra () { $.ajax({ url:'atualiza.php', complete: function (atualizaPdIt) { alert(atualizaPdIt.responseText); }, error: function () { alert('Erro'); } }); return false; } </script> Porém, a função não é executada. O que está errado? Para constar, o script de atualização do arquivo atualiza.php funciona perfeitamente bem quanto deixado dentro de um bloco de código da página finalizar_compra.php, portanto, não é nele que está o problema, mas na forma como estou chamando.
    • By andre2654
      Boa tarde, eu preciso de ajuda de vocês, estou com um problema que é o seguinte, eu preciso que quando a pessoa clicar na lixeira, exclua essa linha do banco de dados, mas como posso fazer? perdoem a minha inexperiência, mas já busquei bastante a respeito e nada.
    • By kriskastro
      Oi, pessoal. Preciso de uma ajuda de vocês. 
      Tenho esse código de formulário de contato em um dos sites que gerencio e preciso colocar um redirecionamento de URL ao submeter o envio do formulário com sucesso. Atualmente ele só exibe "Mensagem enviada com sucesso!". Já tentei injetar essa função direto pelo javascript, porém as tentativas que fiz foram todas sem sucesso. Podem me ajudar com isso?
       
      A ideia seria enviar as pessoas para uma página de resposta que já desenvolvi.
      <form class="avia_ajax_form av-form-labels-visible avia-builder-el-123 el_after_av_hr avia-builder-el-last av-custom-form-color av-light-form" method="post" name="formhouse"> <fieldset> <p id="element_avia_1_1" class=" first_form form_element form_element_third"><label for="avia_1_1">Nome <abbr class="required" title="required">*</abbr></label> <input id="avia_1_1" class="text_input is_empty" name="nome" type="text" value="" /></p> <p id="element_avia_2_1" class=" form_element form_element_third"><label for="avia_2_1">E-Mail <abbr class="required" title="required">*</abbr></label> <input id="avia_2_1" class="text_input is_empty" name="email" type="text" value="" /></p> <p id="element_avia_3_1" class=" form_element form_element_third"><label for="avia_3_1">Telefone <abbr class="required" title="required">*</abbr></label> <input id="avia_3_1" class="text_input is_phone" name="telefone" type="text" value="" /></p> <p id="element_avia_4_1" class=" first_form form_element form_fullwidth av-last-visible-form-element"><label class="textare_label hidden textare_label_avia_4_1" for="avia_4_1">Mensagem <abbr class="required" title="required">*</abbr></label> <textarea id="avia_4_1" class="text_area is_empty" cols="40" name="mensagem" rows="7"></textarea></p> <p class="hidden"><input id="avia_5_1" class="hidden " name="avia_5_1" type="text" value="" /></p> <center id="msgErroHouse" style="color: red; display: none;">Erro ao enviar a mensagem, preencha todos os campos para continuar</center>&nbsp; <center id="msgShowHouse" style="display: none;">Mensagem enviada com sucesso!</center> <p class="form_element "><input name="avia_generated_form1" type="hidden" value="1" /> <input id="clica-botao-house" class="button" type="button" value="Enviar" /></p> </fieldset> </form> <script language="javascript"> function chama(){ var ret = hc_envia_mensagem(2923, document.formhouse.nome.value, document.formhouse.email.value, '', document.formhouse.telefone.value, document.formhouse.mensagem.value); if(document.formhouse.email.value.trim() != '' && document.formhouse.nome.value.trim() != ''){ jQuery('#msgErroHouse').hide(); jQuery('#msgShowHouse').show(); document.formhouse.nome.value = ''; document.formhouse.email.value = ''; document.formhouse.ddd.value = ''; document.formhouse.telefone.value = ''; document.formhouse.mensagem.value = ''; }else{ jQuery('#msgShowHouse').hide(); jQuery('#msgErroHouse').show(); } } setTimeout(function(){ jQuery('#clica-botao-house').on('click', function(){chama ()}); jQuery('[data-avia-form-id]').hide(); },100) </script>  
    • By HigorCrds
      Bom, o que eu consegui até agora foi fazer com que, ao usuário clicar em algum dos botões de paginação (1, 2, 3...) o PHP guarde uma SESSION com o número da página correspondente.
      Segue o código:
       
      <!-- BOTÃO COM O NÚMERO DA PÁGINA --> <button onclick="mudaVar(<?php echo $i; ?>);"> <?php echo $i; ?> </button> <!-- FUNÇÃO PARA GUARDAR SESSION PG --> function mudaVar(valor) { $.ajax({ url:'sessions.php?valor='+valor }); } // GUARDA SESSION PG if(isset($_GET['valor'])){ $_SESSION['pg'] = $_GET['valor']; } Até aí tudo bem, só que o problema é que a SESSION não é alterada naquele momento, só quando eu atualizo a página.
      Como corrigir isso?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.