web-dev-qa-db-fra.com

Comment envoyer plusieurs champs de données via Ajax?

Je suis coincé: j'essaie de soumettre un formulaire en utilisant AJAX, mais je ne trouve pas le 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'ai rien dans mon activity_save.php donc rien dans mon SQL.

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

110

La syntaxe correcte est la suivante:

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

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

Donc, si cela ne fonctionne pas, je voudrais alerter ces variables pour s'assurer qu'elles ont des valeurs.

207
Avitus

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 somthing here
      }
 });

Si vous voulez l'utiliser via la poste normale, essayez ceci

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

Essayez avec des citations:

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

Cela doit bien fonctionner.

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

après ça tu peux faire comme:

var new_countries = countries.join(',')

après:

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

Cette chose fonctionne comme format de chaîne JSON.

4
Shahin

Selon http://api.jquery.com/jquery.ajax/

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
  alert( "Data Saved: " + msg );
});
3
Amir

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()
    }
  });
});
3

Je suis un débutant chez ajax mais je pense que l’utilisation de cette méthode "data: {status: status, name: name}".

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

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
user4184048

Utilisez ceci 

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

J'essaie beaucoup de syntaxe pour travailler avec laravelil fonctionne pour moi pour laravel 4.2 + ajax.

1

Je suis nouveau à 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
user2155518

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);

                }
          });


    });
0
user8161624

Voici ce qui fonctionne pour moi après 2 jours de casse-tête; Pourquoi je ne pouvais pas obtenir le paramètre 'data' d'AJaX 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 que la fonction jQuery.param ()} a été écrit pour;

créez un tableau params 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!

0
big_lion