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')));

}

在服务器端，我以这种方式处理请求（已经在页面顶部设置了header（带有header（'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。

第二，由于多种原因，您的php代码中的switch语句不正确：

它使用硬编码字符串'action'作为参数-我想应该有$action var作为参数
它缺少一个defalut子句-这导致不返回任何内容，而JavaScript无法将其解析为JSON-我建议您使用一些后备JSON字符串来确保始终存在JSON-如果响应成功，则从服务器输入字符串响应。（Should switch statements always contain a default clause?）

如何使用香草JavaScript AJAX发布JSON或表单数据

1 个答案: