उपरोक्त समाधानों में से कोई भी सिर्फ jQuery के साथ गहरे नेस्टेड पार्म्स को संभाला नहीं है, इसलिए यहां मेरा दो सेंट समाधान है।
यदि आप jQuery का उपयोग कर रहे हैं और आपको गहरे नेस्टेड मापदंडों को संभालने की आवश्यकता है, तो आप इस फ़ंक्शन का उपयोग नीचे कर सकते हैं:
/**
* Original code found here: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
* I just simplified it for my own taste.
*/
function postForm(parameters, url) {
// generally we post the form with a blank action attribute
if ('undefined' === typeof url) {
url = '';
}
//----------------------------------------
// SOME HELPER FUNCTIONS
//----------------------------------------
var getForm = function (url, values) {
values = removeNulls(values);
var form = $('<form>')
.attr("method", 'POST')
.attr("action", url);
iterateValues(values, [], form, null);
return form;
};
var removeNulls = function (values) {
var propNames = Object.getOwnPropertyNames(values);
for (var i = 0; i < propNames.length; i++) {
var propName = propNames[i];
if (values[propName] === null || values[propName] === undefined) {
delete values[propName];
} else if (typeof values[propName] === 'object') {
values[propName] = removeNulls(values[propName]);
} else if (values[propName].length < 1) {
delete values[propName];
}
}
return values;
};
var iterateValues = function (values, parent, form, isArray) {
var i, iterateParent = [];
Object.keys(values).forEach(function (i) {
if (typeof values[i] === "object") {
iterateParent = parent.slice();
iterateParent.push(i);
iterateValues(values[i], iterateParent, form, Array.isArray(values[i]));
} else {
form.append(getInput(i, values[i], parent, isArray));
}
});
};
var getInput = function (name, value, parent, array) {
var parentString;
if (parent.length > 0) {
parentString = parent[0];
var i;
for (i = 1; i < parent.length; i += 1) {
parentString += "[" + parent[i] + "]";
}
if (array) {
name = parentString + "[" + name + "]";
} else {
name = parentString + "[" + name + "]";
}
}
return $("<input>").attr("type", "hidden")
.attr("name", name)
.attr("value", value);
};
//----------------------------------------
// NOW THE SYNOPSIS
//----------------------------------------
var generatedForm = getForm(url, parameters);
$('body').append(generatedForm);
generatedForm.submit();
generatedForm.remove();
}
इसका उपयोग कैसे करें, इसका एक उदाहरण यहां दिया गया है। HTML कोड:
<button id="testButton">Button</button>
<script>
$(document).ready(function () {
$("#testButton").click(function () {
postForm({
csrf_token: "abcd",
rows: [
{
user_id: 1,
permission_group_id: 1
},
{
user_id: 1,
permission_group_id: 2
}
],
object: {
apple: {
color: "red",
age: "23 days",
types: [
"golden",
"opal",
]
}
},
the_null: null, // this will be dropped, like non-checked checkboxes are dropped
});
});
});
</script>
और यदि आप परीक्षण बटन पर क्लिक करते हैं, तो यह फ़ॉर्म को पोस्ट कर देगा और आपको POST में निम्न मान मिलेंगे:
array(3) {
["csrf_token"] => string(4) "abcd"
["rows"] => array(2) {
[0] => array(2) {
["user_id"] => string(1) "1"
["permission_group_id"] => string(1) "1"
}
[1] => array(2) {
["user_id"] => string(1) "1"
["permission_group_id"] => string(1) "2"
}
}
["object"] => array(1) {
["apple"] => array(3) {
["color"] => string(3) "red"
["age"] => string(7) "23 days"
["types"] => array(2) {
[0] => string(6) "golden"
[1] => string(4) "opal"
}
}
}
}
नोट: यदि आप प्रपत्र को वर्तमान पृष्ठ की तुलना में किसी अन्य url पर पोस्ट करना चाहते हैं, तो आप url को पोस्टफ़ॉर्म फ़ंक्शन के दूसरे तर्क के रूप में निर्दिष्ट कर सकते हैं।
उदाहरण के लिए (अपने उदाहरण का फिर से उपयोग करने के लिए):
postForm({'q':'a'}, 'http://example.com/');
उम्मीद है की यह मदद करेगा।
नोट 2: कोड को रीडायरेक्ट प्लगइन से लिया गया था । मैंने मूल रूप से अपनी आवश्यकताओं के लिए इसे सरल बनाया।