Ajax request not sending my object data

Question

I have been trying for hours now and cant work out what im doing wrong im sure that its something simple im missing but any help would be great.

I have created an object which is dynamically populated, this works perfectly the problem comes when im trying to send the data over to a php process page via ajax.

The code below is my loop for the object to get the key and value.

//build up dynamic datastring for ajax
            var dataString = ""
            dataString += "{";
            jQuery.each(obj,function(key, value) {
                dataString += "'"+key+"':'"+value+"',";
            });
            //remove last , then add the containing bracket
            dataString = dataString.slice(0,-1);
            dataString += "};";
            console.log(dataString);

                //do ajax
                jQuery.ajax({
                    url:'/builder/process-form.php',
                    type:'POST',
                    data:dataString
                }).done(function(data){
                    console.log(data);
                });
            });

I have wrote the dataString var to the console and this is the output {'type':'tickbox','fname':'Empty','value':'Empty','req':'Yes','valType':''}; This looks properly structured for the data parameter?

On the php page i loop through all post data and this is displaying noting, if i copy {'type':'tickbox','fname':'Empty','value':'Empty','req':'Yes','valType':''}; after the data: line then this works?

Any help would be greatly appreciated

Many thanks

Ian

score 1 · Answer 1 · edited May 23 '17 at 12:10

This looks properly structured for the data parameter?

No. You're building the source code to a JavaScript object literal. You want a normal JavaScript object for the data parameter.

Get rid of dataString and everything relating to it.

data: obj

If you did want to send your data in a format like that (instead of as standard form encoded data) then use JSON (which is almost identical to what you were generating, but tighter quoting rules) and can be generated with a standard function:

var datastring = JSON.stringify(obj);

If you do that, however, then you have to specify it in the request headers:

data: datastring,
contentType: "application/json",

And handle it differently on the PHP side.

score 1 · Accepted Answer · answered Oct 27 '13 at 09:08

Maybe I miss something in your process but you dont need to build a "datastring" that looks like an object, just send the object :

  //do ajax
  jQuery.ajax({
       url:'/builder/process-form.php',
       type:'POST',
       data:obj
  }).done(function(data){
   console.log(data);
 });

Then you get the object properties with $_POST on the PHP side.

Ajax request not sending my object data

2 Answers2