javascript 如何在没有 jQuery 的情况下序列化表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10334519/
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 to serialize a form without jQuery?
提问by Andrea Rastelli
For a lot of reasons (first of all: learning javascript), I need to serialize a form without jQuery, and send the resulting serialized data-structure to a php page with ajax. The serialized data must be in JSON format.
出于很多原因（首先：学习 javascript），我需要在没有 jQuery 的情况下序列化表单，并将结果序列化的数据结构发送到带有 ajax 的 php 页面。序列化数据必须是 JSON 格式。
How can I do that?
我怎样才能做到这一点？
--EDIT--
- 编辑 -
this is how my form looks like: http://jsfiddle.net/XGD4X/
这是我的表单的样子：http: //jsfiddle.net/XGD4X/
采纳答案by Jeff
I am working on a similar problem, and I agree that it is worthwhile to learn how to program first without using a framework. I am using a data object (BP.reading) to hold the information, in my case a blood pressure reading. Then the JSON.stringify(dataObj) dose the work for you.
我正在研究一个类似的问题，我同意首先学习如何在不使用框架的情况下进行编程是值得的。我正在使用数据对象 (BP.reading) 来保存信息，在我的例子中是血压读数。然后 JSON.stringify(dataObj) 为您完成工作。
Here is the handler for the 'save' button click, which is a method on the dataObj. Note I am using a form instead of a table to input data, but the same idea should apply.
这是“保存”按钮单击的处理程序，它是 dataObj 上的一个方法。注意我使用表格而不是表格来输入数据，但同样的想法应该适用。
update: function () {
var arr = document.getElementById("BP_input_form").firstChild.elements,
request = JDK.makeAjaxPost(); // simple cross-browser httpxmlrequest with post headings preset
// gather the data and store in this data obj
this.name = arr[0].value.trim();
...
this.systolic = arr[3].value;
this.diastolic = arr[4].value;
// still testing so just put server message on page
request.callback = function (text) {
msgDiv.innerHTML += 'server said ' + text;
};
//
request.call("BP_update_server.php", JSON.stringify(this));
}
I hope this is helpful
我希望这是有帮助的
* edit to show generic version *
* 编辑以显示通用版本 *
In my program, I am using objects to send, receive, display, and input the same kind of data, so I already have objects ready. For a quicker solution you can just use a empty object and add the data to it. If the data is a set of the same type of data then just use an array. However, with a object you have useful names on the server side. Here is a more generic version untested, but passed jslint.
在我的程序中，我使用对象来发送、接收、显示和输入相同类型的数据，所以我已经准备好了对象。要获得更快的解决方案，您可以只使用一个空对象并将数据添加到其中。如果数据是一组相同类型的数据，则只需使用数组。但是，对于对象，您在服务器端拥有有用的名称。这是一个未经测试的更通用的版本，但通过了 jslint。
function postUsingJSON() {
// collect elements that hold data on the page, here I have an array
var elms = document.getElementById('parent_id').elements,
// create a post request object
// JDK is a namespace I use for helper function I intend to use in other
// programs or that i use over and over
// makeAjaxPost returns a request object with post header prefilled
req = JDK.makeAjaxPost(),
// create object to hold the data, or use one you have already
dataObj = {}, // empty object or use array dataArray = []
n = elms.length - 1; // last field in form
// next add the data to the object, trim whitespace
// use meaningful names here to make it easy on the server side
dataObj.dataFromField0 = elms[0].value.trim(); // dataArray[0] =
// ....
dataObj.dataFromFieldn = elms[n].value;
// define a callback method on post to use the server response
req.callback = function (text) {
// ...
};
// JDK.makeAjaxPost.call(ULR, data)
req.call('handle_post_on_server.php', JSON.stringify(dataObj));
}
Good Luck.
祝你好运。
回答by jholster
CoffeeScript implementation returning a GET query string:
CoffeeScript 实现返回一个 GET 查询字符串：
serialize = (form) ->
enabled = [].filter.call form.elements, (node) -> not node.disabled
pairs = [].map.call enabled, (node) ->
encoded = [node.name, node.value].map(encodeURIComponent)
encoded.join '='
pairs.join '&'
Or if you rather prefer a key-value map:
或者，如果您更喜欢键值映射：
serialize = (form) ->
data = {}
for node in form.elements when not node.disabled and node.name
data[node.name] = node.value
data
I haven't looked at jQuery's implementation, so no 100% compatibility guaranteed.
我没有看过 jQuery 的实现，所以不能保证 100% 的兼容性。
