Sinatra表单提交后无法获取params，参数显示为undefined求助

当你直接通过jQuery的AJAX传递数组[1,2,3]时，jQuery会默认将数据编码为application/x-www-form-urlencoded格式。因为数组没有对应的键名，jQuery会把每个数组元素都用undefined作为键来编码，最终发送的请求数据会是undefined=1&undefined=2&undefined=3，Sinatra解析这种格式后就得到了{"undefined"=>""}的结果。

下面提供两种可行的解决方法，你可以根据需求选择：

方法一：给数组添加键名（推荐，符合表单提交规范） #

修改AJAX请求的data部分，把数组包装在一个对象里，给它一个明确的键名：

function submitForm(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: '/mix_addresses',
    data: { addresses: [1,2,3] }, // 给数组添加键名
    dataType: "json",
    success: function(data) {
      debugger;
    }
  });
}

然后在Sinatra端点里，就可以通过键名获取数组：

post '/mix_addresses' do
  puts params[:addresses] # 输出 ["1", "2", "3"]，默认是字符串类型，需要整数可转成 params[:addresses].map(&:to_i)
end

Sinatra会自动解析表单格式的数据，params[:addresses]就能拿到对应的数组。

方法二：直接发送JSON格式数据 #

如果你想直接传递JSON数组而不是表单数据，需要修改AJAX的contentType，并将数组转成JSON字符串：

function submitForm(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: '/mix_addresses',
    data: JSON.stringify([1,2,3]), // 将数组转为JSON字符串
    contentType: 'application/json', // 指定请求内容类型为JSON
    dataType: "json",
    success: function(data) {
      debugger;
    }
  });
}

然后在Sinatra里，需要手动解析请求体的JSON数据（Sinatra默认不会自动解析application/json类型的请求）：

post '/mix_addresses' do
  request.body.rewind # 确保读取到请求体的起始位置
  addresses = JSON.parse(request.body.read)
  puts addresses # 输出 [1,2,3]，这里是整数数组
end

如果需要频繁处理JSON请求，可以引入sinatra-contrib的json扩展，它能自动解析JSON请求体并填充到params中。

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