javascript - 如何使用 vanilla JavaScript AJAX 发布 JSON 或表单数据

Question

我讨厌使用库，除非我绝对需要它们。我更喜欢使用 vanilla 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')));

}

在服务器端，我以这种方式处理请求(已经在页面顶部使用 header('Content-Type: application/json') 设置 header :

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 .

其次，由于多种原因，您的 php 代码中的 switch 语句不正确:

1. 它使用硬编码字符串“action”作为参数——我想应该有 $action var 作为参数
2. 它缺少一个 defalut 子句 - 这会导致什么都不返回，javascript 无法将其解析为 JSON - 我建议您使用一些后备 JSON 字符串来确保始终存在如果响应成功，则来自服务器的 JSON 类型字符串响应。 ( Should switch statements always contain a default clause? )