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 jonathasouza
      Como eu poderia colocar um botão no para setar um valor na tabela do php?
      meu codigo php abaixo, eu gostaria que ele colocasse o valor onclick $nome na parte do analista da tabela via modal.
       
       
       

          <?php
      $nome = isset($_GET["nome"])? $_GET["nome"]:null;
      $matricula = isset($_GET["matricula"])? $_GET["matricula"]:null;
      $solicitacao = isset($_GET["solicitacao"])? $_GET["solicitacao"]:null;
      $prioridade = isset($_GET["prioridade"])? $_GET["prioridade"]:null;
      $orgao = isset($_GET["orgao"])? $_GET["orgao"]:null;
      $conexao = mysqli_connect('localhost', 'root', '', 'analistas');
      $query = "SELECT `solicitacao`,`prioridade`,`orgao`, `nome` from `analistas` WHERE `analistas`";
      if (mysqli_query($conexao, $query))
          { ?>
       
       
         <?php
      $conexao = mysqli_connect('localhost', 'root', '', 'analistas');
      if(mysqli_connect_errno($conexao)){
      echo 'Failed to connecto to database'.mysqli_connect_error();}

      $query= mysqli_query($conexao, "SELECT DISTINCT `solicitacao`, `prioridade`, `orgao` FROM ordem");
      ?>
                                  <?php while($rows = mysqli_fetch_array($query)): ?>
                                  <tr>
                                      <td><?php echo $rows['solicitacao']; ?></td>
                                      <td><?php echo $rows['prioridade']; ?></td>
                                      <td></td>
                                      <td></td>
                                      <td><?php echo $rows['orgao']; ?></td>
                                      <td></td>
                                      <td></td>
                                  </tr>
                                  <?php endwhile; ?>
       
       
       <!-- Modal -->
                          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                              <div class="modal-dialog" role="document">
                                  <div class="modal-content">
                                      <div class="modal-header">
                                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                          <h4 class="modal-title" id="myModalLabel"><strong>Solicitação</strong></h4>
                                      </div>
                                      <div class="modal-body">
                                          <div class="insertHere">
                                          </div>
                                      </div>
                                      <div class="modal-footer">
                                          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                          <button class="btn btn-success" data-dismiss="modal" value="Add Item" onClick="addRow('OrderTable')">Confirmar</button>
                                      </div>
                                  </div>
                              </div>
                          </div>
    • By kelvim
      Bom dia,
      estou fazendo varias requisições "simultaneas" via ajax para uma mesma página php. Cada requisição quando feito em separado demora cerca de 10s para terminar. O problema é que quando executo todos de uma vez o servidor PARECE ficar "esperando" a requisição anterior terminar. Na prática não está sendo assinc.
       

       
      Pode ver na imagem que na sequencia sempre demora +- 10 segundos a mais que o anterior.
       
      Alguém pode me dar uma luz de como resolver isso?
      Estou no lugar certo para essa pergunta?
      Edit: Abri no fórum de php por que acredito que o js estã fazendo a requisição de forma assinc corretamente (a julgar  pela 4° requisição que terminou antes da 3°)
    • By Artes Ussler
      Olá
       
      Utilizo um sistema de cadastro de notícias com campos para imagens. 
       
      Na parte de edição das notícias, existe um checkbox que, ao selecionado, exclui a imagem quando clicado no Atualizar e a página é recarregada e o PHP executado.
       

       
      Mas eu queria mudar isso. Gostaria que a imagem fosse excluída sem dar um refresh na página. Seria algo como na imagem abaixo: você clica no botão Excluir, aparece uma mensagem se deseja realmente excluir a imagem e você confirma sem recarregar a página.
       

       
      Tem como fazer? Fico grato por qualquer dica.
    • By Jefferson andre
      Saudações mestres,
       
      Como faço para ajustar o programa abaixo para calcular a diferença entre duas variaveis que armazenam horario no ajax quando ocorre um evento onblur?
       
      O programa funciona com numeros mas nao com tempo, depois que eu pegar a diferenca entre os horarios quero multiplicar por uma terceira variavel.
       
      <html> <body> <script> function calcular() { var num1 = Number(document.getElementById("hora_saida").value); var num2 = Number(document.getElementById("hora_entrega").value); var elemResult = document.getElementById("resultado"); if (elemResult.textContent === undefined) { elemResult.textContent = "O resultado eh " + String(num1 + num2) + "."; } else { // IE elemResult.innerText = "O resultado eh " + String(num1 + num2) + "."; } } </script> <label>Horario de saida</label> <input type ="time" name="hora_saida" id="hora_saida"onblur="calcular();"> <label>Horario da entrega</label> <input type ="time" name="hora_entrega" id="hora_entrega"onblur="calcular();"> <div id="resultado"></div> <span id="resultado"></span> </body> </html>  
    • By michelmir
      Olá!
       
      Recentemente fiz uma postagem aqui no fórum a respeito de se carregar valores em um input text baseando-se na opção selecionada em uma select box, onde obtive uma solução. Por conta disso resolvi adicionar um complemento neste  meu código onde o mesmo deve carregar valores corretamente dentro de uma input text utilizando o plugin TypeAhead.js e o evento onchange do Jquery.
       
      Como forma de demonstrar a minha dúvida em funcionamento, criei uma página como forma de testar a solução. O que ocorre é que quando seleciona uma opção no select box  "Categorias", o Ajax manda um request para o php script onde o mesmo retorna os valores corretamente em JSON conforme a imagem do console do navegador Chrome abaixo:
       
       
       
      Até aqui os valores relacionados com a opção selecionada no select box "Categorias" são carregados corretamente porém se eu não atualizar a página "F5" e ao mesmo tempo eu selecionar alguma outra opção dentro do select box, o input text carrega além dos valores relacionados, todos os valores não relacionados com a opção selecionada ou seja, o input text somente carrega os valores corretamente se eu atualizar a página em questão.
       
      Abaixo uma imagem demonstrando os valores carregados em uma input text quando seleciono uma outra opçao no select box quando não se atualiza a página. Todos os valores não relacionados também são carregados:
       

       
      Abaixo publico o html e os scripts Ajax, Typeahead e PHP que estou utilizando neste projeto:
       
      HTML
      <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQuery UI library --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> </head> <body> <div class="container"> <br> <h1>DYNAMIC TWITTER TYPEAHEAD</h1> <br> <div class="row"> <?php // Include the database config file include_once 'dbConfig.php'; // Fetch all the country data $query = "SELECT * FROM categorias ORDER BY categoria ASC"; $result = $db->query($query); ?> <!-- categoria dropdown --> <div class="col-md-4"> <select id="categoriaFK" name="categoriaFK" class="form-control"> <option value="">seleciona categoria</option> <?php if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ echo '<option value="'.$row['categoriaID'].'">'.$row['categoria'].'</option>'; } }else{ echo '<option value="">Categoria não encontrada</option>'; } ?> </select> </div> <div class="col-md-4" id="prod"> <div ><input type="text" name="produtos" id="produtos" class="form-control input-lg typeahead" autocomplete="off" placeholder="" /></div> </div> <div class="col-md-4"> <div id="imagem" name="imagem"></div> </div> </div> </div> </body> </html>  
      No script abaixo, o Ajax envia um request para o script PHP que por sua vez retorna os valores em JSON para o Ajax que envia para o TypeAhead e carrega o input text com valores relacionados. Após selecionar uma opção no input text, o Jquery envia um valor relacionado para a div "#imagem" :
       
      $(document).ready(function(){ var produtos; var nomes = []; // array var lista = {}; // objeto $('#categoriaFK').on('change', function(){ var queryID = $(this).val(); $.ajax({ url:"fetch.php", method:"POST", data:{categoria:queryID}, dataType:"json", success:function(data){ console.log(data); $.each(data, function(i, optionHtml){ $('#produtos').append(optionHtml); }); $("#imagem").empty(''); $(".typeahead").val(''); produtos = data; } }); $('.typeahead').typeahead({ source: function(query, result) { $.each(produtos, function(idx, item){ if(!~nomes.indexOf(item.nomeProduto)) nomes.push(item.nomeProduto); lista[item.nomeProduto] = item.imagem; }); return result(nomes); }, afterSelect: function (data) { var img = lista[data]; $('#imagem').html(img); }, }); }); });  
      Abaixo, o php script que seleciona os valores baseando-se no valor selecionado do select box e os envia em formato JSON para o Ajax:
       
      <?php require_once 'dbConfig.php'; if(!empty($_POST["categoria"])){ $query = " SELECT * FROM produtos WHERE categoriaFK = ".$_POST['categoria']." "; $result = $db->query($query); $data = array (); if ( $result->num_rows > 0 ) { while($row = $result->fetch_assoc ()) { $data[] = $row; } header("Content-type: application/json; charset=utf-8 cache-control: no-cache, no-store, must-revalidate"); echo json_encode($data); exit(); } } ?> No caso como mencionado acima, nesta página que criei demonstra o funcionamento de todo o código acima, porém acredito que devo modificar o script para que o mesmo carregue valores corretamente quando seleciono alguma opção no select box "Categorias" sem precisar atualizar a página para que o mesmo carregue corretamente. 
       
      Como posso proceder? Desde já agradeço a atenção de todos.
×

Important Information

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