Jak wysłać wiele pól danych przez Ajax? [Zamknięte]

136

Utknąłem: próbuję przesłać formularz za pomocą AJAX, ale nie mogę znaleźć sposobu na wysłanie wielu pól danych za pośrednictwem połączenia 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) {...

Próbowałem różnych rzeczy:

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

Lub nawet takie rzeczy tylko do celów testowych:

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

Ale cokolwiek próbuję, nic nie widzę w moim, activity_save.phpwięc nic w moim SQL.

Jaka jest więc poprawna składnia, aby umieścić więcej wierszy danych w moim wywołaniu AJAX?

martwe rozmowy
źródło
Obie drugorzędne formy obsługi danych wejściowych są ważne. Jak uzyskujesz do tego dostęp po stronie PHP? Możesz rozważyć sniffer HTTP (Fiddler na PC, coś w rodzaju HTTPScoop na Macu), który pokaże ci dokładnie, co porusza się po kablu.
John Green
Sugerowałbym użycie firebug / chrome do debugowania danych postów. Upewnij się, że otrzymujesz kod HTTP 200 i że dane formularza są wysyłane zgodnie z Twoim zdaniem. Jeśli wszystko wygląda poprawnie z danymi postu, zacznę próbować debugować kod po stronie serwera PHP.
Kyle Rogers
Używanie firebuga naprawdę pomogło, całkowicie zapomniałem o sprawdzeniu mojej strony. : /
deadconversations
Jaki jest pożytek ze znaku ** na początku i na końcu parametru danych?
heinkasner
1
@heinkasner, myślę, że ** jest tylko po to, aby pokazać czytelnikowi, na który wers autor chciałby zwrócić uwagę. ** musiałoby zostać usunięte, gdy kod będzie gotowy do zapisania do pliku!
Mark

Odpowiedzi:

256

Prawidłowa składnia to:

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

Jak określono tutaj: http://api.jquery.com/jQuery.ajax/

Więc jeśli to nie zadziała, ostrzegłbym te zmienne, aby upewnić się, że mają wartości.

Avitus
źródło
4
Wskazuje konkretnie w pytaniu: „Próbowałem różnych rzeczy: data: {status: status, name: name},
Ry-
20
Właśnie wskazałem poprawną składnię i powiedziałem, że problem musi być czymś innym, a nie składnią
Avitus
3
Wygląda na to, że moja składnia była poprawna, sądzę, że popełniłem bardzo głupi błąd SQL.
deadconversations
2
Re: syntax, zauważ, że nazwa klucza to „-”, np. data: { site-name: "StackOverflow" }Nie zadziała.
moey
Z dokumentacji "Opcja danych może zawierać ciąg zapytania formularza key1=value1&key2=value2lub obiekt formularza {key1: 'value1', key2: 'value2'}. Jeśli używana jest ta druga postać, przed wysłaniem dane są konwertowane na ciąg zapytania przy użyciu jQuery.param (). "
Jay Blanchard
32

Możesz wysyłać dane przez JSON lub zwykły POST, tutaj jest przykład dla 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
      }
 });

Jeśli chcesz go używać za pośrednictwem zwykłego postu, spróbuj tego

 $.ajax({
      type: "POST",
      url: $('form').attr("action"),   
      data: $('#form0').serialize(),
      success: function (result) {
         // do something here
      }
 });
k-dev
źródło
.serialize()nie jest zdefiniowany!
Amirhossein Mehrvarzi
9

Spróbuj z cudzysłowami:

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

To musi działać dobrze.

Alberthoven
źródło
4
+1. BTW to faktycznie dane: {status: "status", name: "name"} api.jquery.com/jquery.ajax
Amir
6
var countries = new Array();
countries[0] = 'ga';
countries[1] = 'cd';

po tym możesz zrobić:

var new_countries = countries.join(',')

po:

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

Ta rzecz działa jako format ciągów JSON.

Shahin
źródło
To rozwiązanie zadziałało, gdy próbowałem przekazać tablicę przez ajax. Rozwiązaniem było połączenie go w łańcuch. Dzięki!
Brian Powell
3

Ten działa dla mnie.

Oto mój 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>

Oto moje jQuery używające 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()
    }
  });
});
TheGreenGentleman
źródło
2

Jestem początkującym w Ajax, ale myślę, że aby użyć metody „data: {status: status, name: name}”, typ danych musi być ustawiony na JSON tj.

$.ajax({
type: "POST",
dataType: "json",
url: "ajax/activity_save.php",
data: {status: status, name: name},
Shan
źródło
3
Witamy w przepełnieniu stosu. dataTypejest odpowiedzią typu treści, jakiej oczekujesz od serwera, a nie tym, co wysyłasz. Dane, które wysyłasz, będą zawsze konwertowane foo=bar&bar=foo.
h2ooooooo
1

Użyj tego

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

Wypróbowuję wiele składni, aby pracować z laravel, działa to dla mnie dla laravel 4.2 + ajax.

Kanin Peanviriyakulkit
źródło
1

Spróbuj tego:

$(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) {...
user4184048
źródło
1

Jestem nowy w AJAX i próbowałem tego i działa dobrze.

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();
}
dda
źródło
1

Spróbuj użyć :

$.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);
    }
});
user8161624
źródło
1
Może jakieś wyjaśnienie?
cs95,
0

Oto, co działa u mnie po 2 dniach drapania głowy; dlaczego nie mogłem uzyskać ustawienia danych AJaX do wysyłania dwóch kluczy / wartości (w tym zmiennej zawierającej nieprzetworzone dane obrazu) było tajemnicą, ale wydaje się, że do tego została napisana funkcja jQuery.param () ;

utwórz tablicę parametrów ze swoimi zmiennymi, bez cudzysłowów:

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

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

Użyj zmiennej ser_data jako wartości danych;

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

Dokumentacja jest tutaj: https://api.jquery.com/jQuery.param/

Mam nadzieję, że to pomoże!

big_lion
źródło