Como enviar vários campos de dados via Ajax? [fechadas]


136

Estou paralisado: estou tentando enviar um formulário usando AJAX, mas não consigo encontrar uma maneira de enviar vários campos de dados por meio de minha chamada AJAX.

$(document).ready(function() {
  $("#btnSubmit").click(function()  {
    var status = $("#activitymessage").val();
    var name = "Ronny";
    $.ajax({
      type: "POST",
      url: "ajax/activity_save.php",
      **data: "status="+status+"name="+name"**,
      success: function(msg) {...

Eu tentei todos os tipos de coisas:

data: {status: status, name: name},

Ou até coisas assim apenas para fins de teste:

data: "status=testing&name=ronny",

Mas o que quer que eu tente, não recebo nada no meu, activity_save.phpportanto, nada no meu SQL.

Então, qual é a sintaxe correta para colocar mais linhas de dados na minha chamada AJAX?


As duas formas secundárias de manipulação dos dados de entrada são válidas. Como você está acessando isso no lado do PHP? Você pode considerar um sniffer HTTP (Fiddler no PC, algo como HTTPScoop em um Mac), que mostrará exatamente o que está se movendo pelo fio.
John Green

Eu sugeriria o uso do firebug / chrome para depurar seus dados de postagem. Verifique se você está obtendo um código HTTP 200 e se os dados do formulário estão sendo publicados no seu modo de pensar. Se tudo parecer correto com os dados da postagem, eu começaria a tentar depurar o código do lado do servidor PHP.
Kyle Rogers #

O uso do firebug realmente ajudou, esqueci completamente de verificar minha página com ele. : /
deadconversations

Para que serve ** na frente e no final do parâmetro de dados?
heinkasner

1
@ heinkasner, acho que o ** existe apenas para mostrar ao leitor qual linha o autor gostaria de enfatizar. O ** teria que ser removido quando o código estiver pronto para ser salvo no arquivo!
Mark

Respostas:


256

A sintaxe correta é:

data: {status: status, name: name},

Conforme especificado aqui: http://api.jquery.com/jQuery.ajax/

Portanto, se isso não funcionar, eu alertaria essas variáveis ​​para garantir que elas tenham valores.


4
Ele aponta especificamente na pergunta: "Eu tentei todo tipo de coisa: data: {status: status, name: name},"
Ry-

20
Eu só estava apontando a sintaxe correta e dizendo que o problema deve ser outra coisa não a sintaxe
Avitus

3
Parece que minha sintaxe estava correta, acredito que cometi um erro SQL muito idiota.
Deadconversations

2
Re: sintaxe, observe que o nome da chave é '-' por exemplo data: { site-name: "StackOverflow" }, não funcionará.
moey

Dos documentos "A opção de dados pode conter uma sequência de consultas do formulário key1=value1&key2=value2ou um objeto do formulário {key1: 'value1', key2: 'value2'}. Se o último formulário for usado, os dados serão convertidos em uma sequência de consultas usando jQuery.param () antes de serem enviados. "
Jay Blanchard

32

Você pode enviar dados através de JSON ou via POST normal, aqui está um exemplo para JSON.

 var value1 = 1;
 var value2 = 2;
 var value3 = 3;   
 $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "yoururlhere",
      data: { data1: value1, data2: value2, data3: value3 },
      success: function (result) {
           // do something here
      }
 });

Se você quiser usá-lo via postagem normal, tente isso

 $.ajax({
      type: "POST",
      url: $('form').attr("action"),   
      data: $('#form0').serialize(),
      success: function (result) {
         // do something here
      }
 });

.serialize()não está definido!
Amirhossein Mehrvarzi


6
var countries = new Array();
countries[0] = 'ga';
countries[1] = 'cd';

Depois disso, você pode fazer o seguinte:

var new_countries = countries.join(',')

depois de:

$.ajax({
    type: "POST",
    url: "Concessions.aspx/GetConcessions",
    data: new_countries,
    ...

Isso funciona como formato de string JSON.


Essa solução funcionou para mim ao tentar passar uma matriz pelo ajax. Juntar-se a uma string foi a solução. Obrigado!
18715 Brian


3

Este funciona para mim.

Aqui está o meu PHP:

<div id="pageContent">
  <?php
    while($row = mysqli_fetch_assoc($stmt)) {
  ?>
  <br/>
  <input id="vendorName_" name="vendorName_<?php echo $row["id"]; ?>" value='<?php echo $row["vendorName"]; ?>'>
  <input id="owner_" name="owner_<?php echo $row["id"]; ?>" value='<?php echo $row["owner"]; ?>'>
  <input id="city_" name="city_<?php echo $row["id"]; ?>" value='<?php echo $row["city"]; ?>'>
  <button id="btn_update_<?php echo $row["id"]; ?>">Update</button>
  <button id="btn_delete_<?php echo $row["id"]; ?>">Delete</button>
  <?php
    }
  ?>
  </br></br>
  <input id = "vendorName_new" value="">
  <input id = "owner_new" value="">
  <input id = "city_new" value="">
  <button id = "addNewVendor" type="submit">+ New Vendor</button>
</div>

Aqui está o meu jQuery usando AJAX:

$("#addNewVendor").click(function() {
  alert();
  $.ajax({
    type: "POST",
    url: "create.php",
    data: {vendorName: $("#vendorName_new").val(), owner: $("#owner_new").val(), city: $("#city_new").val()},
    success: function(){
      $(this).hide();
      $('div.success').fadeIn();
      showUsers()
    }
  });
});

2

Eu sou iniciante no ajax, mas acho que usar esse tipo de dados do método "data: {status: status, name: name}" deve ser definido como JSON, isto é,

$.ajax({
type: "POST",
dataType: "json",
url: "ajax/activity_save.php",
data: {status: status, name: name},

3
Bem-vindo ao estouro de pilha. dataTypeé a resposta do tipo de conteúdo que você espera obter do servidor - não o que você está enviando. Os dados para os quais você está enviando sempre serão convertidos foo=bar&bar=foo.
h2ooooooo 26/09

1

Usa isto

data: '{"username":"' + username + '"}',

Eu tento muita sintaxe para trabalhar com o laravel, isso funciona para mim para o laravel 4.2 + ajax.


1

Tente o seguinte:

$(document).ready(function() {
  $("#btnSubmit").click(function() {
    var status = $("#activitymessage").val();
    var name = "Ronny";
    $.ajax({
      type: "POST",
      url: "ajax/activity_save.php",
      data: {'status': status, 'name': name},
        success: function(msg) {...

1

Eu sou novo no AJAX e tentei isso e funciona bem.

function q1mrks(country,m) {
  // alert("hellow");
  if (country.length==0) {
    //alert("hellow");
    document.getElementById("q1mrks").innerHTML="";
    return;
  }
  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("q1mrks").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","../location/cal_marks.php?q1mrks="+country+"&marks="+m,true);
  //mygetrequest.open("GET", "basicform.php?name="+namevalue+"&age="+agevalue, true)
  xmlhttp.send();
}

1

Tente usar:

$.ajax({
    type: "GET",
    url: "something.php",
    data: { "b": data1, "c": data2 },   
    dataType: "html",
    beforeSend: function() {},
    error: function() {
        alert("Error");
    },
    success: function(data) {                                                    
        $("#result").empty();
        $("#result").append(data);
    }
});

1
Alguma explicação, talvez?
cs95

0

Aqui está o que funciona para mim após 2 dias de coçar a cabeça; por que não consegui que a configuração de 'dados' do AJaX enviasse dois valores-chave (incluindo uma variável contendo dados brutos de imagem) era um mistério, mas parece ser para isso que a função jQuery.param () foi escrita;

crie uma matriz de parâmetros com suas variáveis, sem aspas:

var params = { key_name1: var_1, key_name2: var_2  }; // etc.

var ser_data = jQuery.param( params );   // arbitrary variable name

Use a variável ser_data como seu valor de dados;

      $.ajax({
       type: 'POST',
       url: '../php_handler_url.php',
       data: ser_data,
    }).success(function(response) {
       alert(response);
    });

A documentação está aqui: https://api.jquery.com/jQuery.param/

Espero que ajude!

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.