serialize()

מחזירה: מחרוזת

תיאור: מקודד קבוצת של אלמנטים של התופס כמחרוזת עבור שליחה.

serialize()

הוספה בגרסה: 1.0

שיטה .serialize() מייצרת מחרוזת טקסט בקידוד URL סטנדרטי. זה עובד על אובייקט jQuery, מייצג קבוצה של אלמנטים בטופס. אלמנטים של טופס יכולים להיות במספר סוגים:

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>

  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>

    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>

    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

שיטה .serialize() יכולה לפעול על אובייקט jQuery שמכיל אלמנטים של טופס בודדים, כמו <input>, <textarea>, ו- <select>. אם זאת, בדרך כלל קל יותר לבחור תג <form> עבור סידור:

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

זה נותן מחרוזת של שאילתה סטנדרטית:

a=1&b=2&c=3&d=4&e=5

שימו לב: רק "ניהול מוצלח" יכול להיות מסודר למחרוזת. ערך של כפתור לא ניתן לסדר מרגע שטופס נשלח באמצעות כפתור הזה. כדי לצרף ערך של האלמנט בטופס למחרוזת, אלמנט צריך להכיל תכונה name. נתונים מאלמנט file לא ניתן לסדר.

דוגמה

מסדר אלמנטים של תבנית במחרוזת שאילתה, שניתן לשלוח אותה לשרת בבקשת Ajax.

function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
  });
  </script>
  <style>
  body, select { font-size:12px; }
  form { margin:5px; }
  p { color:red; margin:5px; font-size:14px; }
  b { color:blue; }
  </style>
</head>
<body>
<form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>
<br />
    <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>
<br />
    <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>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

serialize()

serialize()

serialize()

דוגמה

תגובות