[Функция] serialize()
Раздел "Ajax"
Собрать набор полей input в строку данных.
Функция используется для подготовки пользователем данных полей input, отправляемых на сервер. Строка объединенных данных представлена в формате совместимым с большинством серверных языков программирования и фрэймовиков.
Для нормальной работы функции запросы должны формироваться из полей формы, имеющих атрибут name. Если указан только id, то функция работать не будет. К примеру, с данным кодом:
<script>
$(document).ready (function () {
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$("input").change(showValues);
showValues();
});
</script>
</head>
<body>
<form id="result">
<input id="email" name="email1" type="text" />
<input id="email1" name="email1" type="text" />
</form>
<div id="results">
</div>
</body>
метод serialize() будет работать, однако следующий код не соберет значения всех элементов формы, а только занчение последнего элемента input:
<script>
$(document).ready (function () {
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$("input").change(showValues);
showValues();
});
</script>
</head>
<body>
<form id="result">
<input id="email" type="text" />
<input id="email1" name="email1" type="text" />
</form>
<div id="results">
</div>
</body>
Для правильной работы данного примера используйте следующий php:
<?php
header('Content-Type: text/xml; charset=UTF8;');
echo "<response>";
echo "<city>".$_REQUEST['city']."</city>";
echo "</response>";
?>
Пример:
Собрать данные формы в строку, которая может быть отправлена на сервер Ajax запросом.
"jQuery"
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
"HTML"
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br/>
<input type="checkbox" name="check" value="check1" id="ch1"/>
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
<label for="ch2">check2</label>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2"/>
<label for="r2">radio2</label>
</form>
<p><tt id="results"></tt></p>
"CSS"
body, select { font-size:12px; }
form { margin:5px; }
p { color:red; margin:5px; font-size:14px; }
b { color:blue; }"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
});
</script>
</head>
<body class="iframe">
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br/>
<input type="checkbox" name="check" value="check1" id="ch1"/>
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
<label for="ch2">check2</label>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2"/>
<label for="r2">radio2</label>
</form>
<p><tt id="results"></tt></p>
</body>
</html>
<style>
body, select { font-size:12px; }
form { margin:5px; }
p { color:red; margin:5px; font-size:14px; }
b { color:blue; }
</style>
Версия jQuery 1.4.2
Документ создан 2010-08-21
