How to use a JsonResponse with ajax

Question

I am using Symfony2 and perform an Ajax call to process a form. The problem I have is that by using the JsonResponse that returns me the driver tells me that the value is undefined. I wonder what I'm doing wrong to solve this problem and also if somehow could return errors to the form fields to validate from Ajax can show failures in the form without refreshing the page.

Controller:

public function createAction(Request $request){

$entity = new Student();
$form = $this->createCreateForm($entity);
$form->handleRequest($request);

if ($form->isValid()) {
    $em = $this->getDoctrine()->getManager();
    $em->persist($entity);
    $em->flush();

    return new JsonResponse(array('message' => 'Success!'), 200);
 }

    return $this->render('BackendBundle:Student:new.html.twig', array(
    'entity' => $entity,
    'form'   => $form->createView(),
 ));
}

Ajax call:

$('.form_student').submit(function(event) {
 event.preventDefault();

  $.ajax({
  type: 'POST',
  url: Routing.generate('student_create'),
  data: $(this).serialize(),

  success: function(response) {

    alert(response.message);

  },
  error: function (xhr, desc, err){

    alert("error");
  }
 })
  return false;
});

Answer 1

with ajax, return will not work

return new JsonResponse(array('message' => 'Success!'), 200);

You should print the value using PHP echo to use it in an ajax success callback e.g.

echo new JsonResponse(array('message' => 'Success!'), 200);

Answer 2

You need to handle the XMLHttpRequests differently to your regular HTML requests.

At present when an XMLHttpRequest is made but the form fails the whole page is rendered again (with a "success" status code), but you only want to return a response with a message and a "failed" status code.

The following should help you.

public function createAction(Request $request)
{
    // if request is XmlHttpRequest (AJAX) but not a POSt, throw an exception
    if ($request->isXmlHttpRequest() && !$request->isMethod(Request::METHOD_POST)) {
        throw new HttpException('XMLHttpRequests/AJAX calls must be POSTed');
    }

    $entity = new Student();
    $form = $this->createCreateForm($entity);
    $form->handleRequest($request);

    if ($form->isValid()) {
        $em = $this->getDoctrine()->getManager();
        $em->persist($entity);
        $em->flush();

        // if the form was successful and the call was an AJAX request
        // respond with a JSON Response (with a 201/created status code)
        if ($request->isXmlHttpRequest()) {
            return new JsonResponse(array('message' => 'Success!'), 201);
        }

        // If the form was successful and the call was HTTP
        // redirect to "show student"
        return $this->redirect('student_show', array('id' => $entity->getId()));
    }

    // if request was an AJAX call and (obviously) the form was not valid
    // return message about form failure
    // (with a 400/Bad Request status code)
    if ($request->isMethod(Request::METHOD_POST)) {
        return new JsonResponse(array('message' => 'failed due to form errors'), 400);
        // you could also loop through the form errors to create an array, use a custom 
        // form -> errors array transformer or use the @fos_rest.view_handler to output
        // your form errors
    }

    return $this->render('BackendBundle:Student:new.html.twig', array(
        'entity' => $entity,
        'form'   => $form->createView(),
    ));
}

Updated

The javascript should work like this.

$('.form_student').submit(function(event) {
    event.preventDefault();

    $.ajax({
        type: 'POST',
        url: Routing.generate('student_create'),
        data: $(this).serialize(),
        dataType: 'json',

        // if "student_create" returns a 2** status code
        success: function(response) {
            // should return "Success!"
            alert(response.message);
        },

        // if "student_create" returns a non-2** status code
        error: function (xhr, desc, err){
            // if the response was parsed to json and has a message key
            if (xhr.responseJSON && xhr.responseJSON.message) {
                alert(xhr.responseJSON.message);
            // otherwise use the status text
            } else {
                alert(desc);
            }
        }
    });

    return false;
});

Answer 3

You need have 2 action:

1. Action show

Show action should handle interface of your form. for ex:

public function showAction(Request $request){

    $entity = new Student();
    $form = $this->createCreateForm($entity);

    return $this->render('BackendBundle:Student:new.html.twig', array(
        'entity' => $entity,
        'form'   => $form->createView(),
    ));
}

2. Action handle save

Action save should handle when request save data by ajax. for ex:

public function createAction(Request $request)
{
    //get all data post
    $data = $request->request->all();
    extract($data, EXTR_PREFIX_SAME, "wddx");
    // if you want to see the result uncoment below
    // dump($data); // uncomment this to see data

    //$id = $data['id'];
    //$name = $data['name'];

    $student = new Student();
    //$student->.... = ... // set your field
    //...
    //...


    try {
        // try save entity
        $em = $this->getDoctrine()->getManager();
        $em->persist($student);
        $em->flush();
    } catch (\Exception $e) {
        // set your error message ...
    }
}

NOTE:

remember change url: Routing.generate('student_create') point to save handle