Sending multiple data in jquery

Question

i have this code for sending data

  var test={imagename:"apple.jpg",x:"13",y:"33"};

  $.ajax({
 type: "POST",
     url: "some.php",
     data: test,
     success: function(response){
    console.log(response);
    }
   });

but now i want to send multiple data to php.My php side code is like this

print $_POST['imagename'];

i think of an approach like this var test={imagename:"apple.jpg|hen.jpg",x:"13|44",y:"33|22"}; and on php getting $_POST['imagename'] then split it according to | but i am not liking semantic approach of it.
1-Does any one know better solution?
2-Please provide both javascript,jquery and php code for answer.
3-One final question is this notation called json var test={imagename:"apple.jpg",x:"13",y:"33"};
Thanks

@pimvdb i have try using arrays but not getting logic getting errors. — Ali Nouman
– Ali Nouman, Commented Nov 24, 2011 at 8:54

pimvdb · Accepted Answer · 2011-11-24 09:10:49Z

7

An array is the most meaningful solution here - something like this in JavaScript:

var data = [
    {imagename:"apple1.jpg", x:"13", y:"33"},
    {imagename:"apple2.jpg", x:"51", y:"84"},
    {imagename:"apple3.jpg", x:"79", y:"57"}
];

Send as:

$.ajax({
     type: "POST",
     url: "some.php",
     data: {data: data},
     success: function(response){
         console.log(response);
     }
 });

and in PHP you can get them like:

<?
    print_r($_POST['data']); // dumps an array

    $filename1 = $_POST['data'][0]['filename']; // filename of item #1
?>

Lastly, var test={imagename:"apple.jpg",x:"13",y:"33"}; is nothing more than some JavaScript code. It is not JSON. Although JSON looks like JavaScript (JS even stands for JavaScript in JSON), it is nothing more than the characters you're sending. JSON is a format for transferring data. As soon as you "unpack" it (either in JavaScript or PHP) then it's not called JSON anymore.

edited Nov 24, 2011 at 9:10

answered Nov 24, 2011 at 8:57

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yoram de Langen Over a year ago

i would loop it, looks nicer ;)

Yoram de Langen · Accepted Answer · 2011-11-24 09:02:01Z

3

A little extention on @pimvdb:

foreach($_POST['data'] as $data) {
    $filename = $data['filename'];
    $width = $data['x'];
    $height = $data['y'];

    do_something_with_it($filename, $width, $height);
}

answered Nov 24, 2011 at 9:02

Yoram de Langen

5,4993 gold badges26 silver badges32 bronze badges

Comments

Jose Rafael Santiago Jr. · Accepted Answer · 2011-11-24 09:04:16Z

2

You could try using nested objects, like so:

var test={imagename:["apple.jpg","hen.jpg"],x:["13","44"],y:["33","22"]};

  $.ajax({
     type: "POST",
     url: "some.php",
     data: test,
     success: function(response){
       console.log(response);
     }
  });

Then from the PHP side, you should be able to access it as an array, by calling:

  $_POST['image name'][index_num_here];

  Example:
  $_POST['image name'][0] => "apple.jpg"

edited Nov 24, 2011 at 9:04

answered Nov 24, 2011 at 8:56

Jose Rafael Santiago Jr.

7717 silver badges12 bronze badges

2 Comments

pimvdb Over a year ago

{"a", "b"} does not make much sense in JavaScript.

Jose Rafael Santiago Jr. Over a year ago

My apologies, it really should have been ["a","b"], updating the answer to reflect this :) I guess I've been playing with JSON objects for too long

trapp · Accepted Answer · 2011-11-24 09:06:26Z

2

Use arrays. Javascript:

var data = {
    "images": [
          {name: "apple.jpg", x: 13, y:14},
          {name: "egg.jpg", x:14, y: 35}
    ]
};

$.ajax({
   type: "POST",
   url: "some.php",
   data: data,
   success: function(response){
     console.log(response);
   }
 });

PHP:

// First.
print $_POST['images'][0]['name'] // Prints apple.jpg
// Second
print $_POST['images'][1]['name'] // Prints egg.jpg

// Looping
foreach($_POST['images'] as $image) {
    print $image['name'];
    print $image['x'];
    print $image['y'];
}

From your example

var test={imagename:"apple.jpg",x:"13",y:"33"};

The following part is considered as JSON (JavaScript Object Notation):

{imagename:"apple.jpg",x:"13",y:"33"}

Every JSON string is valid JavaScript as well.

edited Nov 24, 2011 at 9:06

answered Nov 24, 2011 at 9:00

trapp

864 bronze badges

Comments

Zut · Accepted Answer · 2011-11-24 09:02:20Z

0

I've used this with much success, to send JSON data to the server. It's very easy to use:

var test={imagename: ["apple.jpg", "banana.png"],x:"13",y:"33"};
$.post('some.php', {data: JSON.stringify(test)}, function(respons) { ... });

And on the serverside you have:

<?php
$data = json_decode(urldecode($_POST['json']), true);
echo $data['imagename'][0];
echo $data['imagename'][1];
?>

answered Nov 24, 2011 at 9:02

Zut

6391 gold badge5 silver badges12 bronze badges

1 Comment

pimvdb Over a year ago

jQuery takes care of the encoding and decoding of objects and array when passed as data.

Collectives™ on Stack Overflow

Sending multiple data in jquery

5 Answers 5

1 Comment

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related