Как разместить JSON или сформировать данные с помощью ванильного JavaScript AJAX

Question

Я ненавижу использовать библиотеки, если они мне абсолютно не нужны. Я предпочитаю работать с ванильным JavaScript, так как думаю, что он будет делать то, что я хочу, и я буду лучше знать, что я делаю. Итак, есть простая операция добавления-записи, которую я хочу сделать через AJAX:

function addToBlacklist() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'api.php?action=addToBlackList');
    var jsonObj;
    xhr.onreadystatechange = function () {
        try {
            jsonObj = JSON.parse(xhr.responseText);
        } catch (e) {
            alert(e.toString());
        }
        if (jsonObj.status_code === 200) {
            alert('Added');
            //Add the new word to the end of the list in the grid view
        } else {
            alert('Add failed');
        }
    }

    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('blackword=' + encodeURIComponent(document.getElementById('blackword')));

}

На стороне сервера я обрабатываю запрос следующим образом (уже установлен заголовок вверху страницы с заголовком ('Content-Type: application / json'):

if(isset($_GET['action'])){
    $action = filter_input(INPUT_GET, 'action', FILTER_SANITIZE_URL);
    switch('action'){
        case 'addToBlacklist':
            error_log('Action: ' . 'addToBlackList');
            $blackword = filter_input(INPUT_POST, 'blackword', FILTER_SANITIZE_URL);
            if(file_put_contents(BLACKLIST_FILE, $blackword . PHP_EOL, FILE_APPEND)){                            
            echo json_encode(['status_code'=>200, 'description'=>Translate::get('Adding to blacklist successful')]);
            }
            else {
                echo json_encode(['status_code'=>500, 'description'=> Translate::get('Adding to blacklist failed')]);
            }
            break;                
    }
}

Проблема в том, что я всегда получаю эту ошибку в своем браузере:

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Answer 1

Убедитесь, что вы всегда отправляете допустимую строку JSON с сервера. На стороне клиента проверьте, является ли статус ответа действительным (код состояния HTTP 200), и только затем приступайте к анализу ответа XHR. Значение, полученное с сервера, пусто, вот в чем проблема.

Сначала JSON.parse() ожидает строку JSON в качестве параметра, см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse.

Во-вторых, оператор switch в вашем php-коде неверен по нескольким причинам:

1. Он использует жестко запрограммированную строку 'action' в качестве параметра - я полагаю, что должно быть $action var в качестве параметра
2. В нем отсутствует предложение defalut - это приводит к тому, что ничего не возвращается, что не может быть проанализировано как JSON с помощью javascript - я предлагаю вам использовать некоторую запасную строку JSON, чтобы убедиться, что всегда есть строка типа JSON ответ от сервера в случае успешного ответа. ( Должны ли операторы switch всегда содержать предложение по умолчанию? )