如何在没有jQuery的情况下序列化表单
how to serialize a form without jQuery?
出于很多原因(首先:学习javascript(,我需要在没有jQuery的情况下序列化一个表单,并将生成的序列化数据结构发送到带有ajax的php页面。序列化数据必须采用 JSON 格式。
我该怎么做?
--编辑--
这是我的表单的样子: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));
}
祝你好运。
返回 GET 查询字符串的 CoffeeScript 实现:
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%的兼容性。
相关文章:
- 是否可以在不序列化的情况下将对象从SilverLight传递到JavaScript
- 如何在不完成添加序列的情况下从rxjs创建数组
- 如何在不选择模式配置参数的情况下,使用mongoose在MongoDB模式实例化中的关联数组/对象中执行foreach
- 如何在没有登录按钮的情况下初始化谷歌登录
- 是否可以在没有构造函数参数的情况下实例化空对象/对象
- 如何序列化 jquery 对象,如 cookie 中的下拉列表
- 如何在不使用剑道层次结构网格中的详细初始化函数的情况下获取第一个孩子的兄弟姐妹
- Jquery 序列化 :尝试在不提交表单的情况下将表单状态传递给 ASP.NET MVC 控制器
- 如何在没有jQuery的情况下序列化表单
- JavaScript 在没有全局变量初始化值的情况下得到错误
- ASP.Net MVC-如何在没有Bundles的情况下最小化JavaScript(内联/外部文件)
- 在这种情况下初始化vars的正确方法
- 如何在不使用全局变量的情况下将变量传递给字符串化函数
- 再次序列化时,序列化的对象是否包含相同的json内容(跨浏览器情况)
- 为什么表单序列化在这种情况下不起作用
- 如何在没有父/子数据结构的情况下可视化关系
- 难以序列化下拉菜单
- 在没有警报的情况下处理时未初始化的变量
- 是否可以在不创建全局回调函数的情况下异步初始化Google Maps ?
- 如何在不序列化模型的情况下呈现模板数据?