كيف يمكنني الوصول إلى القيم التي أنشأتها SerializeArray في jQuery؟

StackOverflow https://stackoverflow.com/questions/4236768

  •  26-09-2019
  •  | 
  •  

سؤال

لدي هذا HTML:

<form id='myform'>
<input name='title' value='foo'/>
</form>

وأقوم بإنشاء صفيف كائن منه مثل هذا:

var dataArray = $("#myform").serializeArray();

الآن كيف يمكنني الوصول إلى "العنوان" في DataArray؟ هذا لا يعمل:

alert(dataArray['title']);
alert(dataArray['title'].val());
هل كانت مفيدة؟

المحلول

على غرار ما نشره نيك ، لكنه أنظف قليلا

var dataArray = $("#myform").serializeArray(),
    dataObj = {};

$(dataArray).each(function(i, field){
  dataObj[field.name] = field.value;
});

ثم الوصول بنفس الطريقة

alert(dataObj['title']);

نصائح أخرى

يمكنك إما حلقة ، كما @tom لديه... أو إذا كنت تصل إلى أكثر من واحد ، تكون أكثر كفاءة وحلقة مرة واحدة ، قم بإنشاء كائن مثل هذا:

var dataArray = $("#myform").serializeArray(),
    len = dataArray.length,
    dataObj = {};

for (i=0; i<len; i++) {
  dataObj[dataArray[i].name] = dataArray[i].value;
}

ثم يمكنك الوصول إليه كما تريد ، على سبيل المثال:

alert(dataObj['title']); //or alert(dataObj.title);

يمكنك اختباره هنا.

alert(dataArray[0].name);
alert(dataArray[0].value);

لذا:

for (i=0; i<dataArray.length; i += 1) {
    if (dataArray[i].name === "title") {
        // do something here...
    }
}

يركض console.log(dataArray);, ، ثم افتح مفتش الممتلكات ، وتحقق من وحدة التحكم. في Chrome ، يمكنك النقر بزر الماوس الأيمن وحدد "فحص العنصر" ثم انقر فوق أيقونة "> =" في أسفل اليسار ، وهو الثاني من اليسار.

في Firefox تقوم بتثبيت Firebug وهناك علامة تبويب تسمى "وحدة التحكم"

لست متأكدًا مما إذا كان متاحًا في IE ، وربما شيء في أدوات المطور (اضغط F12) لكنني لا أوصي بالتطوير في IE.

على أي حال ، سيدرج هذا الكائن بطريقة تتيح لك التنقل ورؤية قيم كل عنصر. وبهذه الطريقة يمكنك بعد ذلك استخدام هذا لفك تشفير كيفية الوصول إلى القيم :)

حظا طيبا وفقك الله

إضافة هذا على أي حال لمساعدة الآخرين في المستقبل. طريقة جيدة لتفقد جميع القيم بسرعة.

var formdata = $( "#myform" ).serializeArray();
var formdata = JSON.stringify(formdata);
alert (formdata);

إلحاق/صدى/طباعة dataArray[0].name إلى Div سوف يعطيك "العنوان"

تنبيه serializearray من المدخلات في mydiv (ملاحظة: :input سيتضمن Selector علامات Select و TextArea أيضًا!):

//alert(fData.length) // how many inputs got picked up 
var fData=$("#myDiv :input").serializeArray();
var msg=""; 
for(var i=0;i<fData.length;i++){
    var raKy=Object.keys(fData[i]); 
    msg+="\n"+raKy[0]+":"+eval("fData[i]."+raKy[0])+" "+raKy[1]+":"+eval("fData[i]."+raKy[1]); 
}
alert(msg);

مع uderscore.js, ، هكذا يمكننا القيام بذلك:

var serializedArray = $('form#spiderman-application').serializeArray();

var serializedObject = _.object(
  _.pluck(serializedArray, 'name'), 
  _.pluck(serializedArray, 'value')
)

console.log(serializedObject);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

<form id="spiderman-application">
  <legend>Application Form</legend>
  <input name="./fname" value="Peter" />
  <input name="./lname" value="Parker" />
</form>

حظا طيبا وفقك الله...

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top