Symfony 3.4 how to pass Javascript data to controller?

Question

I want to store an object in the database with dynamic content in it. I have an input field where people can write text inside. I want the content of the input field to be the title of the object. I can get the content trough Javascript and save an object trough the controller. But I can't figure out how to pass the data from Javascript to the controller.

This is what I have and tried:

Javascript:

//Content I need to store
var outputOfInputField = document.getElementById("inputCategory").value;

//Ajax call with JSON that I think I need for pass data to controller.
$.ajax({
   url : '/createcategory',
   type: "POST",
   data: {
      'output': outputOfInputField
   },
   success : function (data) {
      console.log("SUCCES" + data);
   },
   error   : function () {
      console.log("ERROR");
   }
});

Controller:

<?php

namespace AppBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;
use AppBundle\Entity\User as User;
use Appbundle\Entity\Category as Category;


class HomePageController extends Controller
{
    /**
     * @Route("/", name="homepage")
     */

    public function getData() {
       ...//Not important
    }


    /**
     *  @Route("/create-category", name="newCat")
    */
    public function createObject() {

        //Tried to get the data from JSON file here, dont know what it does and also does not work, gives me an error... Saying i need a use on top of this controller. If I add it it still dont work.

        // $form = $this->get('form.factory')->createBuilder(FormType::class)
        //     ->add('ndf', CollectionType::class, array(
        //         'entry_type' => NoteDeFraisType::class,
        //         'label' => false,
        //         'allow_add' => true,
        //         'allow_delete' => true,
        //     ))
        //     ->getForm();

        //     if ($request->isXMLHttpRequest()) {
        //         $output = $request->request->get('output');
        //         echo $output;
        //         var_dump($output);
        //         print_r($output);
        //     }




        //This is where I create the object and store it in the database.
        $category = $this->getDoctrine()
            ->getRepository('AppBundle:Category')
            ->findall();

        $category = new Category();

        //At the $outputFromJavascript should be the place where my javascript content has to be. Now it does not work, it only works when I put a hardcoded text in it like this "Hello".
        $category->setTitle($outputFromJavascript);

        $em = $this->getDoctrine()->getEntityManager();
        $em->persist($category);
        $em->flush();

        return new Response('Created product id '.$category->getId());
    }
}

Hope I kept the question clear:)

Answer 1

I figured out the solution myself:D. I did not know I need Request in my function, also now know what it does.

The javascript stays the same, the controller is now looking like this:

<?php

namespace AppBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;
use AppBundle\Entity\User as User;
use Appbundle\Entity\Category as Category;


class HomePageController extends Controller
{
    /**
     * @Route("/", name="homepage")
     */

    public function getData() {
       //...
    }

    /**
     *  @Route("/create-category", name="newCat")
    */
    public function createCategory(Request $request) {
        // dump($request);
        // dump($request->request->get('output'));

        $output = $request->request->get('output');

        $category = $this->getDoctrine()
            ->getRepository('AppBundle:Category')
            ->findall();

        $category = new Category();
        $category->setTitle($output);

        $em = $this->getDoctrine()->getEntityManager();
        $em->persist($category);
        $em->flush();

        return new Response('Created product id '.$category->getId());
    }
}

What I changed/added:

//Added Request $request
public function createCategory(Request $request) {
//Added line for getting the output of ajax/json post.
$output = $request->request->get('output');
}