Как получить доступ к значениям, созданным serializeArray в JQuery? - PullRequest
Новая
       55

Как получить доступ к значениям, созданным serializeArray в JQuery?

23 голосов
/ 21 ноября 2010

У меня есть этот HTML: 

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

И я создаю массив объектов из него следующим образом: 

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

Теперь, как мне получить доступ к 'title' в dataArray?Это не работает: 

alert(dataArray['title']);
alert(dataArray['title'].val());

Ответы [ 8 ]

28 голосов
/ 21 ноября 2010

Вы можете либо выполнить цикл, , поскольку @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);

Вы можете проверить его здесь .

27 голосов
/ 07 апреля 2012

Похоже на то, что написал Ник, но немного чище 

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

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

Затем получите доступ таким же образом 

alert(dataObj['title']);
14 голосов
/ 21 ноября 2010 
alert(dataArray[0].name);
alert(dataArray[0].value);

Итак: 

for (i=0; i<dataArray.length; i += 1) {
    if (dataArray[i].name === "title") {
        // do something here...
    }
}
3 голосов
/ 08 сентября 2015

Добавление этого в любом случае, чтобы помочь другим в будущем.Хороший способ быстро проверить все значения. 

var formdata = $( "#myform" ).serializeArray();
var formdata = JSON.stringify(formdata);
alert (formdata);
3 голосов
/ 21 ноября 2010

Запустите console.log(dataArray);, затем откройте инспектор свойств и проверьте консоль.В Chrome щелкните правой кнопкой мыши и выберите «Проверить элемент», а затем щелкните значок «> =» в левом нижнем углу, это второй слева.

В Firefox вы должны установить firebug иесть вкладка «Консоль»

Не уверен, что она доступна в IE, возможно, что-то в инструментах разработчика (нажмите f12 ), но я бы не рекомендовал разработку в IE.

В любом случае, это будет перечислять объект таким образом, чтобы вы могли перемещаться и видеть значения каждого элемента.Таким образом, вы можете использовать это, чтобы расшифровать, как получить доступ к значениям:)

Удачи

2 голосов
/ 03 сентября 2014

Оповещение serializeArray для входов в myDiv (примечание: селектор :input будет также включать теги 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);
2 голосов
/ 15 июля 2013

добавление / echo / print dataArray[0].name к div даст вам 'title'

0 голосов
/ 24 августа 2018

С 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>

Удачи ...

...