Form Data को Serialize करना
In this page:
var query = $(form).serialize();
var array = $(form).serializeArray();serialize() क्या है?
serialize() किसी form के named inputs पर जाता है और उनकी current values को एक single URL-encoded query string में encode कर देता है, वही format जो browser एक normal form submission पर generate करता।
उदाहरण: What is serialize()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input name="q" value="hello"></form>
<script>
console.log($("#myForm").serialize());
</script>
</body>
</html>Form Inputs Serialize करना
serialized string में सिर्फ named, successful form controls शामिल होते हैं, इसलिए हर input जिसे submit होना चाहिए उसे एक name attribute चाहिए।
उदाहरण: Serialize Form Inputs
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input name="q" value="hello"><input value="ignored, no name"></form>
<script>
console.log($("#myForm").serialize());
</script>
</body>
</html>Checkboxes और Radios Serialize करना
Checked checkboxes और selected radio buttons तब शामिल होते हैं जब उनके पास names हों, लेकिन unchecked checkboxes empty values की तरह नहीं बल्कि string से पूरी तरह छूट जाते हैं।
उदाहरण: Serialize Checkboxes and Radios
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input type="checkbox" name="subscribe" checked><input type="checkbox" name="promo"></form>
<script>
console.log($("#myForm").serialize());
</script>
</body>
</html>Serialized Data भेजना
serialized string को एक AJAX POST request के साथ server पर भेजा जा सकता है, सबसे common रूप से $.post() या $.ajax() के through, एक normal form submission को reproduce करते हुए।
उदाहरण: Send Serialized Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input name="q" value="hello"></form>
<script>
$.post("data.php", $("#myForm").serialize(), function(response) {
console.log(response);
});
</script>
</body>
</html>एक छोटा Form Project
serialize() contact forms, registration forms, feedback forms, और search forms के लिए उपयोगी है -- कोई भी ऐसा form जिसकी values capture करके भेजनी हों।
उदाहरण: Small Form Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="contactForm"><input name="email" value="[email protected]"><input name="message" value="Hi"></form>
<script>
const data = $("#contactForm").serialize();
console.log(data);
</script>
</body>
</html>- यह उम्मीद करना कि
.serialize()बिनाnameattribute वाले inputs भी include करेगा, जबकि सिर्फ named fields include होते हैं। - यह मान लेना कि unchecked checkboxes empty values की तरह दिखेंगे, जबकि वे string से पूरी तरह छूट जाते हैं।
<form>के बजाय किसी input पर.serialize()call करना, या एक JavaScript object की उम्मीद करना जबकि यह एक URL-encoded string return करता है (objects के लिए.serializeArray()इस्तेमाल करें)।
- AJAX page reload किए बिना server से data load करता है।
load(),get(),post(), औरgetJSON()common तरीकों से data fetch या भेजते हैं।getScript()scripts load करता है, और भेजने के लिए form data serialize किया जा सकता है।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: