.serialize()

Định nghĩa và sử dụng

  • .serialize(): Lấy giá trị các thành phần form, mã hóa các giá trị này thành giá trị chuỗi.
  • Giá trị sẽ được hiển thị theo các cặp cách nhau bởi ký tự "&": name1=value1&name2=value2&...

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.serialize()

$('form').serialize();

.serialize()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    function showValues() {
        var str = $("form").serialize();
        $("#result").text(str);
    }
    $("input[type='radio']").on("click",showValues);
    showValues();
});
</script>
</head>

<body>
<form>
<input type="radio" name="radio" value="Male" checked="checked" id="male" />
<label for="male">Male:</label>
<input type="radio" name="radio" value="Female" id="female" />
<label for="female">Female:</label>
</form>
<p id="result"></p>
</body>
</html>

Hiển thị trình duyệt:

Khi click chọn vào radio ta đã lấy được giá trị của các thành phần này thay đổi thông qua cặp giá trị name=value.

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    function showValues() {
        var str = $("form").serialize();
        $("#result").text(str);
    }
    $("input[type='radio'], input[type='checkbox']").on("click",showValues);
    $("select").on("change",showValues);
    showValues();
});
</script>
</head>

<body>
<form>
<input type="radio" name="radio" value="Male" checked="checked" id="male" />
<label for="male">Male:</label>
<input type="radio" name="radio" value="Female" id="female" />
<label for="female">Female:</label>
<br />
<br />

<input type="checkbox" name="checkbox01" value="html" checked="checked" id="html" />
<label for="html">HTML:</label>
<br />
<input type="checkbox" name="checkbox02" value="css" id="css" />
<label for="css">CSS:</label>
<br />
<input type="checkbox" name="checkbox03" value="jquery" checked="checked" id="jquery" />
<label for="jquery">JQUERY:</label>
<br />
<br />

<select name="city">
<option value="HaNoi">Hà Nội</option>
<option value="HoChiMinh">Hồ Chí Minh</option>
<option value="NhaTrang">Nha Trang</option>
<option value="CanTho">Cần Thơ</option>
</select>
</form>
<p id="result"></p>
</body>
</html>

Hiển thị trình duyệt:

Khi thay đổi giá trị của các thành phần trong form, ta sẽ lấy được các giá trị của các thành phần này thông qua các cặp giá trị name1=value1&name2=value2&...

.selector()

.serializeArray()