如何在没有jQuery的情况下序列化表单?
由于很多原因(首先:学习javascript),我需要序列化一个没有jQuery的表单,并将生成的序列化数据结构发送到带有ajax的php页面。 序列化数据必须采用JSON格式。如何在没有jQuery的情况下序列化表单?
我该怎么做?
- 编辑 -
这是我的形式看起来像:http://jsfiddle.net/XGD4X/
我在一个类似的问题的工作,我同意这是值得学习如何先编程,而无需使用框架。我正在使用数据对象(BP.reading)来保存信息,在我的情况下是血压读数。然后,JSON.stringify(dataObj)为您完成工作。
这里是'保存'按钮点击的处理程序,它是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));
}
我希望这是有益
*编辑,以显示通用版*
在我的计划,我使用对象来发送,接收,显示和输入同类数据,所以我已经准备好了对象。对于更快的解决方案,您可以使用空对象并将数据添加到它。如果数据是一组相同类型的数据,那么只需使用一个数组。但是,通过一个对象,您可以在服务器端获得有用的名称。这是一个未经测试的更通用的版本,但通过了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));
}
祝你好运。
因此,基本上,我需要做的是构建一些dataObj数组来存储我的值(如dataObj [0] .prod_name和dataObj [0] .prod_num),并使用JSON.stringify将整个数组转换为JSON字符串。我对吗?或者我想念什么? – 2012-04-27 09:08:01
据我所知,JSON大多只是对象字面值的javascript语法,并且stringify方法只是去掉一个对象方法(为了安全)并仅保留数据。对于一个简单的程序,你可以声明一个空的对象,将数据添加到它,字符串化和发布。如果数据对你的数据有意义,或者只是一个对象,请使用数组。早餐后,我会调整我的帖子,以显示更通用的解决方案。你是否也有兴趣看到我的makeAjaxPost()函数? – Jeff 2012-04-27 12:24:52
感谢您的时间:D。 关于你的makeAjaxPost功能..好..我一直很感兴趣。 现在我用你的建议做一些测试。 – 2012-04-27 13:43:30
的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 '&'
或者,如果你更喜欢一个键值地图:
serialize = (form) ->
data = {}
for node in form.elements when not node.disabled and node.name
data[node.name] = node.value
data
我没有看过jQuery的执行,所以没有100%兼容性保证。
你可以发布你使用的标记吗?请设置一个示例小提琴 – fcalderan 2012-04-26 13:34:08
如果您不反对使用json2.js,则可以使用该选项,或者交替使用它,并研究它如何序列化并从该源学习。 – 2012-04-26 13:34:31
你是否不愿意使用任何库? – DaveHogan 2012-04-26 13:35:56