如何使用 vanilla JavaScript AJAX 发布 JSON 或表单数据答案

【问题标题】：How to post JSON or form data with vanilla JavaScript AJAX如何使用 vanilla JavaScript AJAX 发布 JSON 或表单数据
【发布时间】：2018-11-15 07:44:59
【问题描述】：

我讨厌使用库，除非我绝对需要它们。我更喜欢使用 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') 设置了标题：

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

【问题讨论】：

在发送服务器响应时，听起来好像什么都没有得到回应？
xhr.responseText 解析时的值是多少？
@Seanvm 好像是空的！
你在使用 CORS 吗？
@SayedMohdAli，是的，js 文件在我发送请求的同一台服务器上运行。有问题吗？

标签： javascript php ajax

【解决方案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?)

【讨论】：

修复了这些，但代码仍然失败。文件中只添加了新行。
现在服务器响应是什么（代码修复后）？我想，file_put_contents 条件被评估为 true，因为添加了新行，但似乎还有其他一些错误/警告/通知，这会导致 JSON 服务器响应无效。
感谢您的检查。除了这些修复，我发现在处理响应之前我还需要检查 xhr.status 和 xhr.readyState。