如何使用Typescript执行AJAX请求？ （使用JSON）

Question

我正在学习AJAX而我正在尝试使用参数执行AJAX请求，但是我在发送JSON数据方面遇到了问题：

我使用的是Typescript和PHP（使用Codeigniter），我们的想法是创建一个Typescript对象并将其以JSON格式发送给PHP。所以基本上我创建了一个对象并使用我在Google上找到的stringify方法将此对象转换为JSON（或者我应该说是JSON形式的字符串？）并使用AJAX将其发送到服务器，但数据未到达正常。

我使用print_r($_POST);查看服务器接收的内容，并向我显示以下内容：

Array
(
    [{"_dificultad_seleccionada":"Normal"}] => 
    [0] => 
)

我从stringify获得的整个字符串显示为键，值为空。

我不太了解发生了什么，是不是将对象转换为JSON并将其发送到服务器的方式？为什么它没有正确发送对象？

客户端代码：

Dificultad.ts （我要发送到服务器的类）

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 （我声明所有const，DOM元素等）

const BASE_URL: string = window.location.origin + "/Project_name/";
type CallbackFunction = (arg: any, ...args: any[]) => void;

Main.ts （这是我发送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 });
    });

}

服务器代码：

的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);
    }

}

我在客户端上使用stringify进行对象转换似乎是一个问题，因为如果我像这样更改ajax调用，手动发送一个JSON，它可以工作：

Main.ts

sendAjaxRequest("POST", "get_dificultad_seleccionada", {"_dificultad_seleccionada":"Normal"}, function(response) {
                console.log(response);
            });

我似乎做错了什么，但我不知道可能是什么，如何以JSON格式将此对象发送到服务器？

我想在我的程序中为所有AJAX请求执行通用功能，但是如果我正确地执行它，我不太清楚，回调函数的类型是否正常？或者我错了吗？

非常感谢你的帮助。

Answer 1

我想我已经解决了这个问题，我发送了与之前相同的数据，但现在我使用VirtualizedStackPanel告诉服务器我发送了JSON并在服务器中side（PHP）我使用以下内容来获取json：contentType: 'json'

<强> Main.ts

json_decode(file_get_contents('php://input'), true);

<强>的welcome.php

$(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 });
    });

}

现在服务器正确获取了值，并且我现在知道它是以JSON格式获取它。