¿Cómo enviar múltiples campos de datos a través de Ajax? [cerrado]


136

Estoy atascado: estoy tratando de enviar un formulario usando AJAX, pero no puedo encontrar una manera de enviar múltiples campos de datos a través de mi llamada 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) {...

He intentado todo tipo de cosas:

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

O incluso cosas como esta solo para fines de prueba:

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

Pero lo que sea que intente, no obtengo nada en mi, por lo activity_save.phptanto, nada en mi SQL.

Entonces, ¿cuál es la sintaxis correcta para poner más líneas de datos en mi llamada AJAX?


Ambas formas secundarias de manejo de los datos de entrada son válidas. ¿Cómo estás accediendo a esto en el lado de PHP? Puede considerar un sniffer HTTP (Fiddler en la PC, algo así como HTTPScoop en una Mac), que le mostrará exactamente lo que se mueve a través del cable.
John Green

Sugeriría usar firebug / chrome para depurar los datos de su publicación. Asegúrese de obtener un código HTTP 200 y de que los datos del formulario se publiquen como cree que debería ser. Si todo parece correcto con los datos de publicación, comenzaría a tratar de depurar el código del lado del servidor PHP.
Kyle Rogers

Usar firebug realmente ayudó, me olvidé por completo de revisar mi página con él. : /
deadconversations

¿De qué sirve ** delante y al final del parámetro de datos?
heinkasner

1
@heinkasner, creo que ** está ahí para mostrar al lector qué línea le gustaría enfatizar al autor. ¡El ** tendría que eliminarse cuando el código esté listo para guardarse en el archivo!
Mark

Respuestas:


256

La sintaxis correcta es:

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

Como se especifica aquí: http://api.jquery.com/jQuery.ajax/

Entonces, si eso no funciona, alertaría a esas variables para asegurarme de que tengan valores.


44
Señala específicamente en la pregunta: "He intentado todo tipo de cosas: data: {status: status, name: name},"
Ry-

20
Estaba señalando la sintaxis correcta y diciendo que el problema debe ser otra cosa que no la sintaxis
Avito

3
Parece que mi sintaxis era correcta, creo que he cometido un error SQL muy tonto.
conversaciones inactivas

2
Re: sintaxis, tenga en cuenta que un nombre clave es un '-', por ejemplo data: { site-name: "StackOverflow" }, no funcionará.
moey

De los documentos "La opción de datos puede contener una cadena de consulta del formulario key1=value1&key2=value2o un objeto del formulario {key1: 'value1', key2: 'value2'}. Si se utiliza el último formulario, los datos se convierten en una cadena de consulta usando jQuery.param () antes de enviarse. "
Jay Blanchard

32

Puede enviar datos a través de JSON o mediante POST normal, aquí hay un ejemplo 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
      }
 });

Si desea usarlo a través de una publicación normal, intente esto

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

.serialize()¡no está definido!
Amirhossein Mehrvarzi


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

después de eso puedes hacer como:

var new_countries = countries.join(',')

después:

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

Esta cosa funciona como formato de cadena JSON.


Esta solución funcionó para mí cuando intentaba pasar una matriz sobre ajax. Unirlo en una cadena fue la solución. ¡Gracias!
Brian Powell


3

Esta funciona para mí.

Aquí está mi 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>

Aquí está mi 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

Soy un principiante en ajax pero creo que usar este tipo de datos del método "datos: {estado: estado, nombre: nombre}" debe establecerse en JSON, es decir

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

3
Bienvenido a stack overflow. dataTypees la respuesta de tipo de contenido que espera obtener del servidor , no lo que está enviando. Los datos que envía siempre se convertirán foo=bar&bar=foo.
h2ooooooo

1

Utilizar este

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

Intento mucha sintaxis para trabajar con laravel, me funciona para laravel 4.2 + ajax.


1

Prueba esto:

$(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

Soy nuevo en AJAX y lo he intentado y funciona bien.

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

Tratar de 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
¿Alguna explicación tal vez?
cs95

0

Esto es lo que funciona para mí después de 2 días de rascarse la cabeza; por qué no pude conseguir que la configuración de 'datos' de AJaX enviara dos claves / valores (incluida una variable que contenía datos de imágenes en bruto) era un misterio, pero eso parece ser lo que la función jQuery.param () fue escrita la ;

cree una matriz de parámetros con sus variables, sin comillas:

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

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

Use la variable ser_data como su valor de datos;

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

La documentación está aquí: https://api.jquery.com/jQuery.param/

¡Espero que ayude!

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.