制作随机名言生成器遇报错：Uncaught TypeError: data.shift is not a function

看起来你遇到的核心问题是JSONP请求的响应没有被正确解析为JavaScript数组——你看到的“数组格式”其实是字符串，自然没法调用shift()这类数组专属方法。

问题原因拆解 #

你的请求URL里带了_jsonp=mycallback，这是JSONP请求的典型参数，但你的jQuery AJAX调用没明确指定dataType: 'jsonp'。jQuery默认会尝试猜测响应类型，但JSONP必须显式声明这个类型，否则它会把服务器返回的mycallback([...])当成普通文本字符串处理。这就是为什么第一个console.log(data)看起来像数组，但实际是字符串，调用shift()时直接抛出TypeError。

另外，手动指定_jsonp=mycallback其实没必要，jQuery会自动生成唯一的回调函数名来避免冲突，除非API强制要求固定回调名。

修正后的代码 #

$('#new').on('click', function(e) {
    e.preventDefault();
    $.ajax({
        url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
        dataType: 'jsonp', // 关键：明确指定为JSONP类型
        success: function(data) {
            console.log(typeof data, data); // 现在会显示"object"和真实数组
            var post = data.shift(); 
            $('.author').text(post.title);
            console.log(post.title);
            $('.quote').html(post.content);
            console.log(post.content);
        },
        cache: false
    });
});

关键修改说明 #

1. 添加dataType: 'jsonp'：告诉jQuery这是JSONP请求，自动处理服务器返回的回调包裹，把响应解析成真实的JavaScript数组。
2. 移除URL中的&_jsonp=mycallback：让jQuery自动管理回调函数，既省去手动定义回调的麻烦，也能避免回调名冲突的问题。

额外排查建议 #

如果修改后还是有问题，可以在success函数里先打印typeof data，确认它是"object"（数组的typeof结果也是object），而不是"string"。如果依然是字符串，可能是API响应格式有变化，你可以添加error回调来排查请求失败的原因：

error: function(xhr, status, error) {
    console.log('请求出错:', status, error);
}

内容的提问来源于stack exchange，提问作者Sahil Sharma