如何不使用jQuery让Laravel识别AJAX请求并返回JSON响应

嘿，这个问题的关键在于Laravel判断是否返回JSON响应的依据——它不仅看你发送的Content-Type，更重要的是要看请求头里的Accept字段。当你用jQuery的$.ajax({dataType: 'json'})时，jQuery会自动帮你加上Accept: application/json请求头，Laravel识别到这个头后，就算验证失败也会返回JSON格式的错误信息；而你之前只设置了Content-Type，没告诉服务器你期望接收JSON响应，所以Laravel可能还是返回了默认的HTML或重定向。

下面是完整的原生JavaScript实现代码，我帮你补上了关键的Accept请求头，同时也处理了POST请求时的JSON数据序列化：

var xhr = new XMLHttpRequest();
var url = '/your-api-endpoint'; // 替换成你的Laravel路由地址
var data = {
    // 这里是你要发送的表单数据
    name: 'Test',
    email: 'test@example.com'
};

// 设置请求方法和URL
xhr.open('POST', url, true);

// 关键：添加Accept请求头，告诉服务器你期望接收JSON
xhr.setRequestHeader('Accept', 'application/json');
// 设置Content-Type，告诉服务器你发送的是JSON格式数据
xhr.setRequestHeader('Content-Type', 'application/json');

// 监听响应状态变化
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 请求成功，解析JSON响应
            var response = JSON.parse(xhr.responseText);
            console.log('Success:', response);
        } else {
            // 验证失败或其他错误，解析JSON错误信息
            try {
                var errors = JSON.parse(xhr.responseText);
                console.log('Validation Errors:', errors);
            } catch (e) {
                // 万一没返回JSON，处理异常情况
                console.log('Error:', xhr.responseText);
            }
        }
    }
};

// 序列化JSON数据并发送
xhr.send(JSON.stringify(data));

为什么这样做？ #

• Content-Type: application/json：告诉Laravel服务器，你发送的请求体是JSON格式的，这样Laravel才能正确解析请求数据（需要确保你的路由使用了web或api中间件，并且开启了JSON解析）。
• Accept: application/json：这是核心！Laravel的异常处理器（比如ValidationException）会检查这个请求头，如果存在且值为application/json，就会自动返回JSON格式的错误响应，而不是默认的重定向或错误视图。

如果你是发送GET请求，不需要发送请求体，那只需要设置Accept请求头即可，不需要Content-Type和send(JSON.stringify(data))这部分。

内容的提问来源于stack exchange，提问作者Mr.Bakaop