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 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?
    • By FabianoSouza
      Tenho a function A, que captura valores e os transfere para a function B (que é um AJAX).
       
      Preciso que a function B passe seu resultado para a function A. Creio que precise de um callback. Mas não estou sabendo com estruturar isso.
      Vejam como estão os códigos:
       
      FUNCTION A
      function upDateRating(e) { var $alvoClick = getTarget(e) , $ul = $alvoClick.parentNode , $idItem = $alvoClick.parentNode.parentNode.parentNode.parentNode.id , $valRating = $alvoClick.value var $array = [ { idItem:$idItem , favorito: 1 , rating: $valRating } ] upDateCard($array) }  
      FUNCTION B (AJAX)
      function upDateCard(e) { var $array = e , $dados = JSON.stringify($array); function ajax() { var $obj = createXMLHTTP(); $obj.open('post', 'minhaPagina', true); $obj.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); $obj.onreadystatechange=function(){ if ($obj.readyState == 4 && $obj.status == 200){ try { var $strResp = JSON.parse($obj.responseText); } catch(e) { alert('Erro. Dados em formato inválido.') return false; } return $strResp //PRECISO PASSAR ESSE VALOR DE VOLTA PARA A FUNCTION A } } $obj.send(encodeURI('str='+$dados)) } ajax() }  
       
    • By sronze
      Ola estou com um problema em JavaScript
      O objetivo e digitar um ID/Nome em um input e ele buscar em um arquivo XML fazendo autocomplete e preencher outros dois inputs com os atributos associado ao ID/Nome da base XML.
       
      GIF de exemplo, obs(exatamente oque pretendo fazer): http://blog-media.chromaticsites.com.s3.amazonaws.com/google-places-autocomplete-3/autocomplete-error.gif
       
      Link do XML: https://www.w3schools.com/js/cd_catalog.xm
       
      Segue meu código:
      <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> Nome:<input id="idInput"> UF:<input id="idInput02"> Ano:<input id="idInput03"> <script> var ValorXML1 = []; $(document).on('keyup' , '#idInput' ,function(){ var keyvalue = $("#idInput").val(); var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { ValorXML1 = []; CaregarXML(this , keyvalue); } }; xhttp.open("GET", "https://www.w3schools.com/js/cd_catalog.xml", true); xhttp.send(); }); function CaregarXML(xml , key) { var x, i, xmlDoc , key; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("TITLE"); var cont = 0; for (i = 0; i < x.length; i++) { var valor = x[i].childNodes[0].nodeValue.trim(); var pattern = valor.substring(0 , key.length); if(key.toUpperCase() == pattern.toUpperCase() && cont < 5){ ValorXML1.push(valor); cont++; } } $("#idInput").autocomplete({ source: ValorXML1 }); } $( function() { $( "#idInput" ).autocomplete({ source:ValorXML1 }); }); </script>  
    • By mzaidan
      Pessoal, tenho o seguinte codigo:
      function showUser(str) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","getFaixa.php?q="+str,true); xmlhttp.send(); } } Na mesma página, logo embaixo:
      <select name='faixa' id='appearance-select' onchange="showUser(this.value)"> <option value='branca' <?=($faixa == 'branca')?'selected':''?>>Branca</option> <option value='azul' <?=($faixa == 'azul')?'selected':''?>>Azul</option> <option value='roxa' <?=($faixa == 'roxa')?'selected':''?>>Roxa</option> <option value='marrom' <?=($faixa == 'marrom')?'selected':''?>>Marrom</option> <option value='preta' <?=($faixa == 'preta')?'selected':''?>>Preta</option> </select><br> No getFaixa.php:
      include("conexao.php"); $q = intval($_GET['q']); $id = $_SESSION['id']; $update = "UPDATE usuario SET faixa='$q' WHERE usuario_id='$id'"; $result = mysqli_query($conexao, $update); O que eu gostaria era mudar o campo no BD, usando ajax.
      Ele até está mudando, só que está botando um 0 ao invés do value do select.
       
      Alguém poderia me ajudar?
      Onde estou errando?
      Grato.
    • By danielpinho
      Boa tarde pessoal,
       
      Estou desenvolvendo um sistema de pagamento via cartão de crédito que requer a execução de um ajax (request https) quando o usuário digita o número do cartão, a fim de capturar a bandeira do mesmo. O javascript deve enviar via ajax somente os 6 primeiros dígitos do cartão.
       
      A função já está funcionando parcialmente, da seguinte forma: quando o usuário digita o sexto dígito, o ajax faz a requisição e retorna o resultado.
       
      O problema é que quando o usuário continua digitando o restante do número do cartão, o ajax continua fazendo uma requisição a cada tecla pressionada, o que vai acabar sobrecarregando desnecessariamente o meu servidor.
       
      Eu sei que o ideal seria acionar a função somente quando a minha keyword tivesse lenght=6 (assim, ao continuar digitando a função não seria acionada), porém tem pessoas que copiam e colam o número do cartão de uma vez, e isso geraria um bypass na função...
       
      Além disso, o sistema deve ser capaz de reconhecer que houve uma eventual mudança nos 6 números digitados inicialmente, para fazer uma nova requisição ajax com esses números novos.
       
      A solução que pensei, em síntese, foi criar uma variável chamada "lastquery", inicialmente com o valor "000000". Digamos que os 6 dígitos pesquisados estivessem na variável "sixdigits". 
       
      Quando a requisição ajax fosse feita, a variável "lastquery" teria valor alterado para o mesmo valor de "sixdigits".
       
      E a requisição ajax ficaria condicionada da seguinte forma:   if (lasquery !== sixdigits) { executa ajax }.
       
      O problema é que não está dando certo. Ele continua executando normalmente, mesmo quando o valor de lastquery é o mesmo valor de sixdigits.
       
      Alguém mais inteligente do que eu consegue me ajudar? 
       
      Segue o código que não está funcionando perfeitamente. Reparem que fiz um alert para verificar o que estava dando errado, mas a mensagem que recebo no alert é sempre algo do tipo: "10100 is not equal to 10100". Não consigo entender porque isso acontece, já que lá em cima coloquei a condicionante !==.
       
      Obrigado!
       
      <form method="post"> <input type="text" name="ccnumber" id="ccnumber" value="" onkeyup="getcardbin()"> </form> <script> var lastquery = "000000"; function getcardbin() { var min_length = 6; var keyword = $('#ccnumber').val(); if (keyword.length >= min_length) { var justsix = keyword.substring(0, 6); if (justsix !== lastquery) { $.ajax({ url: '/getcardbin.cgi', type: 'POST', data: { 'tkn': 'token_interno', 'tid': 'token_interno', 'bin': justsix }, success:function(data){ $('#returnmsg').prepend(data); alert(justsix + ' is not equal to ' + lastquery); var lastquery = justsix; } }); } } } </script>  
×

Important Information

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