jQuery ajax - serializeArray() ਮੇਥਡ
ਉਦਾਹਰਣ
ਫਾਰਮ ਮੁੱਲਾਂ ਦੇ ਸੂਚੀਬੱਧ ਮੁੱਲ ਨੂੰ ਆਰਰੇ ਫਾਰਮਟ ਵਿੱਚ ਨਿਕਾਲਦਾ ਹੈ:
$("button").click(function(){ x=$("form").serializeArray(); $.each(x, function(i, field){ $("#results").append(field.name + ":" + field.value + " "); ); );
ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ
serializeArray() ਮੇਥਡ ਫਾਰਮ ਮੁੱਲਾਂ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰਕੇ ਆਬਜ਼ਦ ਆਰਰੇ ਬਣਾਉਂਦਾ ਹੈ (ਨਾਮ ਅਤੇ ਮੁੱਲ)।
ਤੁਸੀਂ ਇੱਕ ਜਾਂ ਕਈ ਫਾਰਮ ਇਲੈਕਟ੍ਰੌਨਸ (ਜਿਵੇਂ input ਅਤੇ/ਜਾਂ textarea) ਜਾਂ ਫਾਰਮ ਇਲੈਕਟ੍ਰੌਨਸ ਦੇ ਆਪਣੇ ਆਪ ਨੂੰ ਚੁਣ ਸਕਦੇ ਹੋ।
ਸਿਧਾਂਤ
$(selector).serializeArray()
ਵਿਸਤ੍ਰਿਤ ਵਰਣਨ
serializeArray() ਮੇਥਡ ਫਾਰਮ ਇਲੈਕਟ੍ਰੌਨਸ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰਦਾ ਹੈ (ਜਿਵੇਂ .serialize() ਮੇਥਡ),JSON ਡਾਟਾ ਸਟਰੱਕਚਰ ਵਾਪਸ ਦਿੰਦਾ ਹੈ。
ਧਿਆਨ:ਇਹ ਮੇਥਡ JSON ਆਬਜ਼ਦ ਨੂੰ ਵਾਪਸ ਦਿੰਦਾ ਹੈ, ਨਹੀਂ ਕਿ JSON ਸਟਰਿੰਗ। ਸਟਰਿੰਗੀਕਰਣ ਕਰਨ ਲਈ ਪਲੱਗਇਨ ਜਾਂ ਤੀਜੇ ਪਾਰਟੀ ਲਾਇਬਰੇਰੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਵਾਪਸ ਮਿਲਣ ਵਾਲਾ JSON ਆਬਜ਼ਦ ਇੱਕ ਆਬਜ਼ਦ ਆਰਰੇ ਵਿੱਚ ਬਣਿਆ ਹੁੰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਹਰ ਆਬਜ਼ਦ ਇੱਕ ਜਾਂ ਦੋ ਨਾਮ-ਮੁੱਲ ਜੋੜੇ ਰੱਖਦਾ ਹੈ — name ਪੈਰਾਮੀਟਰ ਅਤੇ value ਪੈਰਾਮੀਟਰ (ਜੇਕਰ value ਖਾਲੀ ਨਹੀਂ ਹੈ ਤਾਂ)। ਉਦਾਹਰਣ ਵਜੋਂ:
[ {name: 'firstname', value: 'Hello'}, {name: 'lastname', value: 'World'}, {name: 'alias'}, // ਮੁੱਲ ਖਾਲੀ ਹੈ ]
.serializeArray() ਮੇਥਡ ਨੇ ਵੈਕਟ ਦੇ ਸੰਪਰਕ ਵਿੱਚ successful controlsਪ੍ਰਮਾਣਿਕ ਕੰਟਰੋਲਸ) ਦੇ ਮਿਆਰ ਦੇ ਅਧਾਰ 'ਤੇ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ ਕਿ ਕਿਨ੍ਹੇ ਇਲੈਕਟ੍ਰੌਨਸ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ, ਇਲੈਕਟ੍ਰੌਨਸ ਨਹੀਂ ਬੰਦ ਹੋ ਸਕਦੇ (ਬੰਦ ਇਲੈਕਟ੍ਰੌਨਸ ਨਹੀਂ ਸ਼ਾਮਲ ਹੁੰਦੇ), ਅਤੇ ਇਲੈਕਟ੍ਰੌਨਸ ਨੇ ਨਾਮ ਪ੍ਰਤੀਯੋਗਿਤਾ ਰੱਖਣੀ ਚਾਹੀਦੀ ਹੈ। ਸੰਬੋਧਨ ਬਟਨ ਦਾ ਮੁੱਲ ਸੂਚੀਬੱਧ ਨਹੀਂ ਹੁੰਦਾ। ਫਾਈਲ ਚੋਣ ਇਲੈਕਟ੍ਰੌਨਸ ਦਾ ਮੁੱਲ ਸੂਚੀਬੱਧ ਨਹੀਂ ਹੁੰਦਾ।
ਇਹ ਮੇਥਡ ਇੱਕਲੇ ਤੈਅ ਫਾਰਮ ਇਲੈਕਟ੍ਰੌਨਸ ਦੇ ਆਬਜ਼ਦ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਕਰ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ <input>, <textarea>, ਅਤੇ <select>। ਪਰ, ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਾ ਇੱਕੀਵੇਂ <form> ਟੈਗ ਦੇ ਆਪਣੇ ਆਪ ਨੂੰ ਚੁਣਨਾ ਹੈ ਤਾਂ ਜੋ ਸੂਚੀਬੱਧ ਕਰਨ ਦਾ ਕੰਮ ਕਰ ਸਕੇ।
$("form").submit(function() { console.log($(this).serializeArray()); return false; );
上面的代码产生下面的数据结构(假设浏览器支持 console.log):
[ { name: a value: 1 }, { name: b value: 2 }, { name: c value: 3 }, { name: d value: 4 }, { name: e value: 5 } ]
示例
取得表单内容并插入到网页中:
HTML 代码:
<p id="results"><b>Results:</b> </p> <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"/> check1 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 <input type="radio" name="radio" value="radio2"/> radio2 </form>
jQuery 代码:
var fields = $("select, :radio").serializeArray(); jQuery.each( fields, function(i, field){ $("#results").append(field.value + " "); );