Comment envoyer plusieurs champs de données via Ajax? [fermé]


136

Je suis bloqué: j'essaie de soumettre un formulaire à l'aide d'AJAX, mais je ne trouve pas de moyen d'envoyer plusieurs champs de données via mon appel 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) {...

J'ai essayé toutes sortes de choses:

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

Ou même des trucs comme ça juste à des fins de test:

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

Mais quoi que j'essaye, je n'obtiens rien dans mon activity_save.phpdonc rien dans mon SQL.

Alors, quelle est la syntaxe correcte pour mettre plus de lignes de données dans mon appel AJAX?


Les deux formes secondaires de traitement des données d'entrée sont valides. Comment y accédez-vous du côté PHP? Vous pouvez envisager un renifleur HTTP (Fiddler sur PC, quelque chose comme HTTPScoop sur un Mac), qui vous montrera exactement ce qui se déplace sur le fil.
John Green

Je suggérerais d'utiliser firebug / chrome pour déboguer vos données de publication. Assurez-vous que vous obtenez un code HTTP 200 et que les données du formulaire sont publiées à votre avis. Si tout semble correct avec les données de publication, je commencerais à essayer de déboguer le code côté serveur PHP.
Kyle Rogers

Utiliser firebug a vraiment aidé, j'ai totalement oublié de vérifier ma page avec. : /
deadconversations

À quoi sert ** devant et à la fin du paramètre de données?
heinkasner

1
@heinkasner, je pense que le ** est juste là pour montrer au lecteur quelle ligne l'auteur aimerait souligner. Le ** devrait être supprimé lorsque le code est prêt à être enregistré dans un fichier!
Mark

Réponses:


256

La syntaxe correcte est:

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

Comme spécifié ici: http://api.jquery.com/jQuery.ajax/

Donc, si cela ne fonctionne pas, j'alerterais ces variables pour m'assurer qu'elles ont des valeurs.


4
Il souligne spécifiquement dans la question: "J'ai essayé toutes sortes de choses: data: {status: status, name: name},"
Ry-

20
Je voulais juste souligner la syntaxe correcte et dire que le problème doit être autre chose pas la syntaxe
Avitus

3
Il semble que ma syntaxe était correcte, je crois que j'ai fait une erreur SQL très stupide.
deadconversations

2
Re: syntaxe, notez qu'un nom de clé est un '-' par exemple data: { site-name: "StackOverflow" }ne fonctionnera pas.
moey

Extrait de la documentation "L'option data peut contenir soit une chaîne de requête du formulaire key1=value1&key2=value2, soit un objet du formulaire {key1: 'value1', key2: 'value2'}. Si ce dernier formulaire est utilisé, les données sont converties en une chaîne de requête à l'aide de jQuery.param () avant d'être envoyées. "
Jay Blanchard

32

Vous pouvez envoyer des données via JSON ou via POST normal, voici un exemple pour 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 vous souhaitez l'utiliser via un message normal, essayez ceci

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

.serialize()n'est pas défini!
Amirhossein Mehrvarzi


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

après cela, vous pouvez faire comme:

var new_countries = countries.join(',')

après:

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

Cette chose fonctionne au format de chaîne JSON.


Cette solution a fonctionné pour moi en essayant de passer un tableau sur ajax. Le joindre en une chaîne était la solution. Merci!
Brian Powell


3

Celui-ci fonctionne pour moi.

Voici mon 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>

Voici mon jQuery utilisant 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

Je suis un débutant en ajax mais je pense utiliser cette méthode "data: {status: status, name: name}" type de données doit être défini sur JSON ie

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

3
Bienvenue dans le débordement de pile. dataTypeest la réponse de type de contenu que vous attendez du serveur - pas ce que vous envoyez. Les données que vous envoyez seront toujours converties en foo=bar&bar=foo.
h2ooooooo

1

Utilisez ceci

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

J'essaye beaucoup de syntaxe pour travailler avec laravel cela fonctionne pour moi pour laravel 4.2 + ajax.


1

Essaye ça:

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

Je suis nouveau dans AJAX et j'ai essayé cela et cela fonctionne 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

Essayez d'utiliser :

$.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
Une explication peut-être?
cs95

0

Voici ce qui fonctionne pour moi après 2 jours de grattage à la tête; pourquoi je ne pouvais pas obtenir le paramètre AJaX 'data' pour envoyer deux clés / valeurs (y compris une variable contenant des données d'image brutes) était un mystère, mais cela semble être ce pour quoi la fonction jQuery.param () a été écrite;

créez un tableau de paramètres avec vos variables, sans guillemets:

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

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

Utilisez la variable ser_data comme valeur de données;

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

La documentation est ici: https://api.jquery.com/jQuery.param/

J'espère que cela pourra aider!

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.