title: How can I do an AJAX request with Typescript? (using JSON)
body: <p>I'm learning AJAX and I'm trying to do an AJAX request with parameters, but I'm having problems to send the JSON data:</p>
  
  <p>I'm using Typescript and PHP (with Codeigniter), the idea is to create a Typescript object and send it to the PHP in JSON format. So basically I create an object and use the stringify method that I find on Google to convert this object to JSON (or a string in form of JSON I should say?) and send it to the server with AJAX, but the data is not arriving properly.</p>
  
  <p>I used <code>print_r($_POST);</code> to see what is the server receiving and it shows to me the following:</p>
  
  <pre><code>Array
  (
      [{"_dificultad_seleccionada":"Normal"}] =&gt; 
      [0] =&gt; 
  )
  </code></pre>
  
  <p>The entire string that I get from stringify is shown as the key and the value is empty.</p>
  
  <p>I don't understand very well what is happening, isn't stringify the way to convert an object to JSON and send it to the server? Why it isn't sending the object properly?</p>
  
  <h2>Client code:</h2>
  
  <p><strong>Dificultad.ts</strong> (class that I want to send to the server)</p>
  
  <pre><code>class Dificultad {
  
      private _dificultad_seleccionada: string;
  
      constructor (dificultad_seleccionada: string) {
          this._dificultad_seleccionada = dificultad_seleccionada;
      }
  
      get dificultad_seleccionada(): string {
          return this._dificultad_seleccionada;
      }
  
      set dificultad_seleccionada(dificultad_seleccionada: string) {
          this._dificultad_seleccionada = dificultad_seleccionada;
      }
  
  }
  </code></pre>
  
  <p><strong>Lib.ts</strong> (where I declare all const, DOM elements, etc.)</p>
  
  <pre><code>const BASE_URL: string = window.location.origin + "/Project_name/";
  type CallbackFunction = (arg: any, ...args: any[]) =&gt; void;
  </code></pre>
  
  <p><strong>Main.ts</strong> (here is where I send the AJAX)</p>
  
  <pre><code>    $(document).ready(function() {
  
          $( "a#boton_seleccion_dificultad" ).click(function(event) {
  
              event.preventDefault();
  
              if (pasapalabra.gameState == GameState.GAME_STARTING) {
  
                  let _dificultad: Dificultad = new Dificultad("Normal");
                  sendAjaxRequest("POST", "get_dificultad_seleccionada", JSON.stringify(_dificultad), function(response) {
                      console.log(response);
                  });
  
              }
  
          });
  
      });
  
  function sendAjaxRequest(_type: string, _url: string, _params: string, _callback: CallbackFunction) {
  
      var request = $.ajax({
          type: _type,
          url: BASE_URL + _url,
          data: _params,
          contentType: 'json'
      });
      request.done(function(res) {
          _callback(res);
      });
      request.fail(function(jqXHR, textStatus) {
          console.error(jqXHR)
          _callback({ err: true, message: "Request failed: " + textStatus });
      });
  
  }
  </code></pre>
  
  <h2>Server code:</h2>
  
  <p><strong>Welcome.php</strong></p>
  
  <pre><code>class Welcome extends CI_Controller {
  
      public function __construct() {
      parent::__construct();
          $this-&gt;load-&gt;database();
          $this-&gt;load-&gt;library("grocery_CRUD");
          date_default_timezone_set('Europe/Madrid');
          $this-&gt;load-&gt;library('session');
          $this-&gt;load-&gt;helper('url');
          $this-&gt;load-&gt;model("Rol_model");
          $this-&gt;load-&gt;model("Questions_model");
      }
  
  public function get_dificultad_seleccionada() {
  
          print_r($_REQUEST); print_r($_POST);
          //echo json_encode($dificultad);
      }
  
  }
  </code></pre>
  
  <p>It seems to be a problem with the object conversion that I do with stringify on the client because if I change the ajax call like this, sendind a JSON manually, it works:</p>
  
  <p><strong>Main.ts</strong></p>
  
  <pre><code>sendAjaxRequest("POST", "get_dificultad_seleccionada", {"_dificultad_seleccionada":"Normal"}, function(response) {
                  console.log(response);
              });
  </code></pre>
  
  <p>It seems that I'm doing something wrong but I have no idea of what could be, how can I send this object to the server in JSON format?</p>
  
  <p>I want to do an universal function for all AJAX request in my program, but I don't know very well if I'm doing it properly, is the type of the callback function ok? or am I wrong with this?</p>
  
  <p>Thank you very much for your help.</p>