如何使用纯JavaScript AJAX发送JSON或表单数据

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('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

- Mehdi Haghgoo

---

似乎在服务器响应发送时没有任何内容被回显？ - CertainPerformance

当您尝试解析xhr.responseText时，它的值是多少？ - Seanvm

是的，如果端口不同，您也会遇到问题。但通常在Chrome开发人员工具中指示此类错误。当我们通过AJAX提交时。 - Sayed Mohd Ali

你在$action中得到了什么？ - Sayed Mohd Ali

在你的情况下，CORS不是问题，问题出现在PHP页面上，你可以在每个步骤之后从那里发送静态JSON数据进行测试。 - Sayed Mohd Ali

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变量作为参数。 2.它缺少default子句-这导致返回空，javascript无法将其解析为JSON-建议您使用一些回退的JSON字符串，以确保成功响应时始终从服务器获得JSON类型的字符串响应。（Should switch statements always contain a default clause?）

- James Wrcsti

---

已经修复了那些问题，但代码仍然失败。只是在文件中添加了新行。 - Mehdi Haghgoo

现在服务器的响应是什么（代码修复后）？我猜测file_put_contents条件被评估为true，因为新行被添加了，但似乎还有其他错误/警告/通知导致无效的JSON服务器响应。 - James Wrcsti

感谢您的查看。除了这些修复之外，我还发现在处理响应之前，我还需要检查xhr.status和xhr.readyState。 - Mehdi Haghgoo