php - Hur kan jag göra en AJAX-förfrågan med Typescript? (med JSON)
Jag lär mig AJAX och jag försöker göra en AJAX-förfrågan med parametrar, men jag har problem med att skicka JSON-data:
Jag använder Typescript och PHP (med Codeigniter), idén är att skapa ett Typescript-objekt och skicka det till PHP i JSON-format. Så i princip skapar jag ett objekt och använder stringify-metoden som jag hittar på Google för att konvertera detta objekt till JSON (eller en sträng i form av JSON, skulle jag säga?) och skickar det till servern med AJAX, men datan kommer inte fram ordentligt.
Jag använde print_r($_POST); för att se vad servern tar emot och det visar mig följande:
Array
(
[{"_dificultad_seleccionada":"Normal"}] =>
[0] =>
)
Hela strängen som jag får från stringify visas som nyckeln och värdet är tomt.
Jag förstår inte riktigt vad som händer, är inte stringify sättet att konvertera ett objekt till JSON och skicka det till servern? Varför skickas inte objektet korrekt?
Klientkod:
Dificultad.ts (klass som jag vill skicka till servern)
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;
}
}
Lib.ts (där jag deklarerar alla const, DOM-element, etc.)
const BASE_URL: string = window.location.origin + "/Project_name/";
type CallbackFunction = (arg: any, ...args: any[]) => void;
Main.ts (här är där jag skickar AJAX)
$(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 });
});
}
Serverkod:
Welcome.php
class Welcome extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->database();
$this->load->library("grocery_CRUD");
date_default_timezone_set('Europe/Madrid');
$this->load->library('session');
$this->load->helper('url');
$this->load->model("Rol_model");
$this->load->model("Questions_model");
}
public function get_dificultad_seleccionada() {
print_r($_REQUEST); print_r($_POST);
//echo json_encode($dificultad);
}
}
Det verkar vara ett problem med objektomvandlingen som jag gör med stringify på klienten eftersom om jag ändrar AJAX-anropet på det här sättet och skickar en JSON manuellt, fungerar det:
Main.ts
sendAjaxRequest("POST", "get_dificultad_seleccionada", {"_dificultad_seleccionada":"Normal"}, function(response) {
console.log(response);
});
Det verkar som att jag gör något fel, men jag har ingen aning om vad det kan vara. Hur kan jag skicka detta objekt till servern i JSON-format?
Jag vill göra en universell funktion för alla AJAX-förfrågningar i mitt program, men jag vet inte riktigt om jag gör det på rätt sätt, är typen av callback-funktionen okej? eller har jag fel med detta?
Tack så mycket för din hjälp.
Svar #1
Jag tror att jag har löst problemet, jag skickar samma data som jag gjorde tidigare men nu använder jag contentType: 'json' för att tala om för servern att jag skickar en JSON och på serversidan (PHP) använder jag följande för att få JSON:en: json_decode(file_get_contents('php://input'), true);
Main.ts
$(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 });
});
}
Welcome.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->database();
$this->load->library("grocery_CRUD");
date_default_timezone_set('Europe/Madrid');
$this->load->library('session');
$this->load->helper('url');
$this->load->model("Rol_model");
$this->load->model("Questions_model");
}
public function get_dificultad_seleccionada() {
$data = json_decode(file_get_contents('php://input'), true);
print_r($data);
echo $data["_dificultad_seleccionada"];
}
}
Nu får servern värdet på rätt sätt och jag antar att den nu får det i JSON-format.
