Question

遇到一些头部刮擦器将jQuery对象作为数据传递给$ .ajax（）请求。显然$ .ajax（）使用$ .param（）将对象处理成查询字符串，但$ .param（）无法正确地序列化来自多个select元素的数据。相反，它只发送第一个值。 $ .param（）状态的文档：创建数组，普通对象或a的序列化表示 jQuery对象适合在URL查询字符串或Ajax请求中使用。如果传递了jQuery对象，它应该包含输入元素具有名称/值属性。为此，serialize（）工作正常，但$ .param（）失败。这是$ .param（）的错误还是我错过了什么？拜托，我不是在寻求解决方案。正如我所说，我可以在将数据传递给$ .ajax（）之前使用serialize（）作为解决方法。我问的问题是关于$ .param（）的正确使用，以及这是否是一个错误。请参见下面的示例，说明结果的差异。选择多个选项以查看差异。更新：我在下面的演示中添加了一些文本输入，名称为text []，因为这些应该被编码成一个与多重选择相同的数组。原来$ .param（）处理这些就好了 - 所以问题似乎与select特别相关。 $（'＃submit'）。on（'click'，function（）{ var param_query = $ .param（$（'select，input'））; var serialize_query = $（'select，input'）。serialize（）; $（ '＃PARAM'）HTML（param_query）; $（ '＃序列化'）HTML（serialize_query）; }）; div { 保证金：10px 0; } #output，一世 { 颜色：蓝色; } 跨度 { 颜色：＃333; } ＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”＆gt;＆lt; / script＆gt; ＆lt; select size =“5”multiple name =“colors []”＆gt; ＆lt; option value =“red”＆gt; red＆lt; / option＆gt; ＆lt; option value =“gold”＆gt; gold＆lt; / option＆gt; ＆lt; option value =“green”＆gt; green＆lt; / option＆gt; ＆lt; option value =“black”＆gt; black＆lt; / option＆gt; ＆lt; option value =“White”＆gt; white＆lt; / option＆gt; ＆lt; / select＆gt;＆lt; br /＆gt; ＆lt; input placeholder =“在此处输入一些文字...”name =“text []”/＆gt;＆lt; br /＆gt; ＆lt; input placeholder =“在此处输入一些文字...”name =“text []”/＆gt;＆lt; br /＆gt; ＆lt; button id =“submit”＆gt;提交＆lt; / button＆gt; ＆lt; div＆gt;＆lt; b＆gt; QUERY STRING RESULTS：＆lt; / b＆gt; ＆lt; br /＆gt; ＆lt; i＆gt; $。param（）＆lt; / i＆gt;：＆lt; span id =“param”＆gt;＆lt; / span＆gt; ＆lt; br /＆gt; ＆lt; i＆gt; serialize（）＆lt; / i＆gt;：＆lt; span id =“serialize”＆gt;＆lt; / span＆gt; ＆LT; / DIV＆GT;

Answer 1

这不是错误，这是标准行为。

您应该告知您想要的select selected，而不是选择整个option。 $.param()需要一个数组才能正常工作。在代码片段中，我将数组作为参数通知，以产生与serialize相同的结果（似乎它获取元素并将其转换为数组，因为它知道select可以转换为一个）。

在J Travis的评论

中得到了很好的了解

param只需$obj.each(function(){ this.value })和 this.value仅获得多选
中的第一个选择

因此$.param()无法将任何HTML元素转换为正确的数组，然后将其序列化。

$('#submit').on('click', function() {
  var selectedItemsArray = $('select').find(':selected').map(function() {
                 return $(this).text();
              }).get();
  
  var selectedItems =   $('select').find(':selected')  ;
  
  var param_query_Array = $.param({colors: selectedItemsArray});
  
  var param_query_Selected = $.param( selectedItems);
  
  var serialize_query = $('select').serialize();
  $('#param').html(param_query_Array);
  $('#paramSelected').html(param_query_Selected);
  $('#serialize').html(serialize_query);
});

div {
  margin: 10px 0;
}
#output,
i {
  color: blue;
}
span {
  color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select size="5" multiple name="colors[]">
  <option value="red">red</option>
  <option value="gold">gold</option>
  <option value="green">green</option>
  <option value="black">black</option>
  <option value="White">white</option>
</select>
<button id="submit">Submit</button>
<div><b>QUERY STRING RESULTS:</b>
  <br />
  <i>$.param()</i>: <span id="param"></span>
   <br />
  <i>$.param($('select').find(':selected')</i>: <span id="paramSelected"></span>
  <br />
  <i>serialize()</i>: <span id="serialize"></span>
</div>

jQuery $ .param（）无法序列化多个<select>元素

1 个答案: