Come inviare più campi dati tramite Ajax? [chiuso]


136

Sono bloccato: sto cercando di inviare un modulo utilizzando AJAX, ma non riesco a trovare un modo per inviare più campi dati tramite la mia chiamata 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) {...

Ho provato di tutto:

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

O anche cose del genere solo a scopo di test:

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

Ma qualunque cosa io provi, non ottengo nulla nel mio activity_save.phpquindi niente nel mio SQL.

Quindi, qual è la sintassi corretta per inserire più righe di dati nella mia chiamata AJAX?


Sono valide entrambe le forme secondarie di gestione dei dati di input. Come accedete a questo dal lato PHP? Puoi prendere in considerazione uno sniffer HTTP (Fiddler sul PC, qualcosa come HTTPScoop su un Mac), che ti mostrerà esattamente cosa si sta muovendo attraverso il filo.
John Green,

Suggerirei di utilizzare firebug / chrome per eseguire il debug dei dati dei tuoi post. Assicurati di ottenere un codice HTTP 200 e che i dati del modulo vengano pubblicati a tuo avviso. Se tutto sembra corretto con i dati di post, inizierei a provare a eseguire il debug del codice lato server PHP.
Kyle Rogers,

L'uso di firebug mi ha davvero aiutato, ho completamente dimenticato di controllare la mia pagina con esso. : /
deadconversations

A che cosa serve ** davanti e alla fine del parametro dati?
Heinkasner,

1
@heinkasner, penso che ** sia proprio lì per mostrare al lettore quale linea l'autore vorrebbe enfatizzare. Il ** dovrebbe essere rimosso quando il codice è pronto per essere salvato nel file!
Segna il

Risposte:


256

La sintassi corretta è:

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

Come specificato qui: http://api.jquery.com/jQuery.ajax/

Quindi, se non funziona, avviserei quelle variabili per assicurarmi che abbiano dei valori.


4
Sottolinea specificamente nella domanda: "Ho provato ogni genere di cose: data: {status: status, name: name},"
Ry-

20
Stavo solo sottolineando la sintassi corretta e dicendo che il problema deve essere qualcos'altro non la sintassi
Avitus,

3
Sembra che la mia sintassi fosse corretta, credo di aver fatto un errore SQL molto stupido.
deadconversations,

2
Ri: sintassi, nota che un nome chiave è un '-' ad es. data: { site-name: "StackOverflow" }Non funzionerà.
Moey,

Dai documenti "L'opzione data può contenere una stringa di query del modulo key1=value1&key2=value2o un oggetto del modulo {key1: 'value1', key2: 'value2'}. Se si utilizza quest'ultimo modulo, i dati vengono convertiti in una stringa di query utilizzando jQuery.param () prima di essere inviati. "
Jay Blanchard,

32

È possibile inviare dati tramite JSON o tramite POST normale, ecco un esempio per 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 vuoi usarlo tramite posta normale, prova questo

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

.serialize()non è definito!
Amirhossein Mehrvarzi,


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

dopo puoi fare come:

var new_countries = countries.join(',')

dopo:

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

Questa cosa funziona come formato stringa JSON.


Questa soluzione ha funzionato per me quando ho provato a passare un array su Ajax. Unirlo a una stringa era la soluzione. Grazie!
Brian Powell,


3

Questo funziona per me.

Ecco il mio 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>

Ecco il mio 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

Sono un principiante in Ajax ma penso di usare questo tipo di dati "data: {status: status, name: name}" che deve essere impostato su JSON ie

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

3
Benvenuti nello stack di overflow. dataTypeè la risposta del tipo di contenuto che ti aspetti di ottenere dal server , non quello che stai inviando. I dati che invii verranno sempre convertiti in foo=bar&bar=foo.
h2ooooooo,

1

Usa questo

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

Cerco molta sintassi per lavorare con laravel, funziona per me per laravel 4.2 + ajax.


1

Prova questo:

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

Sono nuovo di AJAX e l'ho provato e funziona bene.

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

Prova ad usare :

$.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
Qualche spiegazione forse?
cs95,

0

Ecco cosa funziona per me dopo 2 giorni di graffi alla testa; il motivo per cui non sono riuscito a ottenere l'impostazione 'data' di AJaX per inviare due chiave / valori (inclusa una variabile contenente dati di immagini non elaborati) era un mistero, ma sembra essere quello per cui è stata scritta la funzione jQuery.param () ;

crea un array di parametri con le tue variabili, senza virgolette:

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

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

Usa la variabile ser_data come valore dei tuoi dati;

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

La documentazione è qui: https://api.jquery.com/jQuery.param/

Spero che aiuti!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.