如何访问由 JQuery 中的 serializeArray 创建的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4236768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I access values created by serializeArray in JQuery?
提问by bart
I have this HTML:
我有这个 HTML：
<form id='myform'>
<input name='title' value='foo'/>
</form>
And I create an object array from it like this:
我从它创建一个对象数组，如下所示：
var dataArray = $("#myform").serializeArray();
Now how do I access 'title' in dataArray? This does not work:
现在如何访问 dataArray 中的“title”？这不起作用：
alert(dataArray['title']);
alert(dataArray['title'].val());
回答by Jason
Similar to what Nick posted, but a little cleaner
类似于 Nick 发布的内容，但更简洁
var dataArray = $("#myform").serializeArray(),
dataObj = {};
$(dataArray).each(function(i, field){
dataObj[field.name] = field.value;
});
Then access the same way
然后以同样的方式访问
alert(dataObj['title']);
回答by Nick Craver
You can either loop through, as @Tom has...or if you're accessing more than one, be a bit more efficient and loop once, creating an object like this:
你可以循环，就像@Tom 有的那样......或者如果你访问多个，效率更高一点，循环一次，创建一个像这样的对象：
var dataArray = $("#myform").serializeArray(),
len = dataArray.length,
dataObj = {};
for (i=0; i<len; i++) {
dataObj[dataArray[i].name] = dataArray[i].value;
}
Then you can access it like you want, for example:
然后您可以随意访问它，例如：
alert(dataObj['title']); //or alert(dataObj.title);
回答by Tom
alert(dataArray[0].name);
alert(dataArray[0].value);
So:
所以：
for (i=0; i<dataArray.length; i += 1) {
if (dataArray[i].name === "title") {
// do something here...
}
}
回答by Jason
Run console.log(dataArray);, then open up the property inspector, and check the console. In Chrome, you'd right click and select "Inspect Element" and then click the ">=" looking icon in the bottom left, it's the second from the left.
运行console.log(dataArray);，然后打开属性检查器，并检查控制台。在 Chrome 中，您可以右键单击并选择“检查元素”，然后单击左下角的“>=”图标，它是从左数第二个。
In Firefox you'd install firebug and there's a tab called "Console"
在 Firefox 中，您将安装 firebug 并且有一个名为“控制台”的选项卡
Not sure if it's available in IE, probably something in the developer tools (press f12) but i wouldn't recommend developing in IE.
不确定它是否在 IE 中可用，可能在开发人员工具中可用（按f12），但我不建议在 IE 中开发。
Anyway this will list out the object in a way that allows you to navigate and see the values of each item. That way you can then use this to decipher how to access the values :)
无论如何，这将以允许您导航和查看每个项目的值的方式列出对象。这样你就可以用它来破译如何访问这些值:)
Good luck
祝你好运
回答by krlwbstr
Adding this anyway to help others in future. Good way to quickly inspect all values.
无论如何添加这个以帮助将来的其他人。快速检查所有值的好方法。
var formdata = $( "#myform" ).serializeArray();
var formdata = JSON.stringify(formdata);
alert (formdata);
回答by Simo D'lo Mafuxwana
append/echo/print dataArray[0].nameto a div will give you 'title'
append/echo/printdataArray[0].name到 div 会给你“标题”
回答by gordon
Alerting serializeArray of inputs in myDiv (note: the :inputselector will include select and textarea tags as well!):
提醒 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);
回答by Akash
With uderscore.js, this is how we can go about it:
使用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>Good Luck...
祝你好运...
