Jquery ajax post data

Question

I want to ajax post data which is dependent on my variables. I tried the following but no luck..

var datastring = "name:name,price:price,specialprice:specialprice,desc:desc,descs:descs,cat:cat,pictures:pictures,choiceimg:choiceimg,weight:weight,gtin:gtin,brand:brand,attid:attid";

if($("#color").val()) {
var color = $("#color").val();
datastring = datastring + ",color:color"
}

$.ajax({
  type: 'POST',
  data:{ datastring }, 
  success: function() { },
  error: function(){ },
  url: 'insert.php',
  cache:false
});

This posts as a string

datastring

name:name,price:price,specialprice:specialprice,desc:desc,descs:descs,cat:cat,pictures:pictures,choiceimg
    :choiceimg,weight:weight,gtin:gtin,brand:brand,attid:attid

Any ideas / solutions ?

You're passing a string, not an object. Read this [tutorial](http://www.w3schools.com/json/) about how to populate json object the right way — Alon Eitan, Apr 02 '16 at 15:26
Actually he is not passing anything because this is invalid javascript: `data:{ datastring }` so I guess an error is shown in the console. — Darin Dimitrov, Apr 02 '16 at 15:27
@DarinDimitrov I'm not sure what the behaviour is precisely, but (at least in Firefox) `datastring` becomes the object key and the contents the value. Colour me confused. — lonesomeday, Apr 02 '16 at 15:29
@AlonEitan, yes of course that you can pass a string to the `data`. But you have to do it like this: `data: 'some string'` and not `data: { 'some string' }` which is what the OP has shown and which is invalid javascript resulting in an exception. — Darin Dimitrov, Apr 02 '16 at 15:30
Not to mention the string being created is not valid either for form encoded data — charlietfl, Apr 02 '16 at 15:31
Are each of the values defined ? That is `price` , `specialprice` through `attid` ? — guest271314, Apr 02 '16 at 15:32
Actually Jquery filters out the variables if no value has been found. So I simply include all variables in my data and if not found it does not post. — Star Wars Gift Shop, Apr 02 '16 at 15:36
data:{ name:name,price:price,specialprice:specialprice,desc:desc,descs:descs,cat:cat,pictures:pictures,choiceimg:choiceimg,weight:weight,gtin:gtin,brand:brand,attid:attid,color:color,age_group:age_group,gender:gender,size:size }, — Star Wars Gift Shop, Apr 02 '16 at 15:37

Alon Eitan · Answer 1 · 2016-04-02T15:43:12.760

Assuming at the parameters are defined, this is how you need to create the object:

var name = ....;
var price = ....;
.....

var datastring  = {
    name: name,
    price: price,
    specialprice: specialprice,
    'three words property': 'value',
    ......
};

You can ADD/Change a property to the object (after it was declared) like this

datastring.myNewProperty = "myString"; // ADD
datastring.name = "New Name"; // UPDATE
datastring['three words property'] = "New Value"; // UPDATE

And you pass this to the server:

$.ajax({
  type: 'POST',
  data: datastring, // Note - I removed the wrapping "{" and "}"
  success: function() { },
  error: function(){ },
  url: 'insert.php',
  cache:false
});

score 1 · Accepted Answer · answered Apr 02 '16 at 15:38

That is not a valid form encoded string and the syntax used for data property is invalid.

The simplest is to use an object and let jQuery encode it for you from that object:

var postData = {
  name: // name value ,
  ...
  desc: // desc value
 ...
  attid: // attid value

} 

if($("#color").val()) {
   postData.color = $("#color").val();
}

Then pass that object to $.ajax

$.ajax({
  type: 'POST',
  data: postData , 
  success: function() { },
  error: function(){ },
  url: 'insert.php',
  cache:false//redundant since POST will never be cached
});

Jquery ajax post data

2 Answers2