gabf Hahn February 2016

symfony2 ajax call always return null data

I am using Symfony 2.7 and I query the information from the database and show it on the page however i want to get the current values via api connection through Ajax call by clicking the button but I always get the null response from Ajax Controller.

<div>
    <p id="product">1K0615301M1</p>
    <p id="product">1K0615301M2</p>   
    <input type="button" id="submit" value="Check"/>
</div>

<script>
     $(document).ready(function(){
         $('#submit').click(function(event) {
             var productNr = [];
             $('#product').each(function() {
                 productNr.push($(this).html());
             });
             console.log(ProductNr); // value of ProductNr
             var ajaxRequest;
             event.preventDefault();

             ajaxRequest = $.ajax({
                 url: " {{ path('frontend_api_product') }}",
                 type: "post",
                 processData: false,
                 contentType: 'application/json; charset=UTF-8',
                 data: ProductNr,
                 success: function (data) {
                     console.log(data);
                 }
             });
         });
     });
 </script>

My Controller:

public function AjaxAction(Request $request)
{
    $sparepart = $request->request->get('data');

    if ($request->isXMLHttpRequest()) {
        return new JsonResponse(array(
            'sucess'=> true,
            'data' => $sparepart
        ));
    }
    return new Response('This is not ajax!', 400);
}

Console.log

 Object { sucess: true, data: null }

Answers


paranoid February 2016

Change
data: ProductNr,
to

data:{data:ProductNr}


chalasr February 2016

Because your data object has no data key, you cannot retrieve it by doing $request->request->get('data');

To get the whole object, use $data = $request->request->all();

There is many errors in your code.
You are pushing values in productNr instead of ProductNr.
You have many elements with the same id (An id is uniq, you have to use classes).

EDIT

The problem is coming the format of the data your are sending. To send an object like {"data":["1K0615301M1","1K0615301M2"]} , use:

var ProductNr = { data: [] };
var ajaxRequest;

$('.product').each(function() {
    var product = $(this).text();
    ProductNr.data.push(product);
});
ajaxRequest = $.ajax({
    url: "/ajax",
    type: "POST",
    data: JSON.stringify(ProductNr),
    processData: false,
    success: function (data) {
        console.log(data);
    }
});

Use JSON.stringify to serialise data before send it.
See How do I POST an array of objects with $.ajax (jQuery or Zepto)

Post Status

Asked in February 2016
Viewed 1,954 times
Voted 11
Answered 2 times

Search




Leave an answer