jQuery $ .param() không thể tuần tự hóa nhiều thành phần <select>

Question

Chạy vào một chút đầu trầy xước đi qua một đối tượng jQuery đến yêu cầu $.ajax() làm dữ liệu. Rõ ràng $.ajax() xử lý các đối tượng thành chuỗi truy vấn bằng cách sử dụng $.param(), nhưng $.param() không thể tuần tự hóa đúng dữ liệu từ phần tử chọn nhiều. Thay vào đó, nó chỉ gửi giá trị đầu tiên.

Các docs for $.param() nhà nước:

Tạo một đại diện tuần tự của một mảng, một đối tượng đơn giản, hoặc một đối tượng jQuery phù hợp để sử dụng trong một chuỗi truy vấn URL hoặc yêu cầu Ajax. Trong trường hợp đối tượng jQuery được chuyển, nó phải chứa các phần tử đầu vào với các thuộc tính tên/giá trị.

Vì điều này, serialize() chỉ hoạt động tốt nhưng $.param() không thành công. Đây có phải là lỗi với $.param() hoặc tôi có thiếu thứ gì đó ở đây không?

Vui lòng, tôi là không tìm kiếm giải pháp. Như tôi đã nói, tôi chỉ có thể sử dụng serialize() như một giải pháp thay thế trước khi chuyển dữ liệu đến $.ajax(). Câu hỏi mà tôi đang hỏi là về việc sử dụng thích hợp $.param() và liệu đây có phải là lỗi hay không.

Xem ví dụ bên dưới minh họa sự khác biệt trong kết quả. Chọn nhiều tùy chọn để xem sự khác biệt.

CẬP NHẬT: Tôi đã thêm một số đầu vào văn bản vào bản trình diễn bên dưới với tên text[] vì chúng nên được mã hóa thành một mảng giống như chọn nhiều. Bật ra các giao dịch $.param() với những điều này tốt - vì vậy vấn đề dường như liên quan cụ thể đến lựa chọn.

$('#submit').on('click', function() { 
 
    var param_query = $.param($('select, input')); 
 
    var serialize_query = $('select, input').serialize(); 
 
    $('#param').html(param_query); 
 
    $('#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><br /> 
 
<input placeholder="Enter some text here..." name="text[]" /><br /> 
 
<input placeholder="Enter some text here..." name="text[]" /><br /> 
 
<button id="submit">Submit</button> 
 
<div><b>QUERY STRING RESULTS:</b> 
 
    <br /> 
 
    <i>$.param()</i>: <span id="param"></span> 
 
    <br /> 
 
    <i>serialize()</i>: <span id="serialize"></span> 
 
</div>

Answer 1

Nó không phải là một lỗi, đó là hành vi tiêu chuẩn.

Thay vì chọn toàn bộ select, bạn nên thông báo cho số selectedoption nào bạn muốn; $.param() yêu cầu một mảng hoạt động bình thường. Trong đoạn mã, tôi thông báo một mảng như một tham số để tạo ra kết quả tương tự như serialize (có vẻ như nó lấy phần tử và biến đổi nó thành một mảng, vì nó biết một select có thể được biến thành một).

Như độc đáo thông báo bằng J Travis trong các ý kiến ​​

param chỉ đơn giản là $obj.each(function(){ this.value }) và this.value chỉ được lựa chọn đầu tiên trong một nhiều chọn

Vì lý do đó $.param() không có khả năng chuyển đổi bất kỳ Phần tử HTML thành một mảng thích hợp và sau đó tuần tự hóa nó.

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