原生js怎么实现获取form表单数据-创新互联
这篇文章将为大家详细讲解有关原生js怎么实现获取form表单数据，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
JS是什么
JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，主要用于web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。
具体内容如下
//获取指定form中的所有的对象
function getElements(formId) {
var form = document.getElementById(formId);
var elements = new Array();
var tagElements = form.getElementsByTagName('input');
for (var j = 0; j < tagElements.length; j++){
elements.push(tagElements[j]);
}
var tagElements = form.getElementsByTagName('select');
for (var j = 0; j < tagElements.length; j++){
elements.push(tagElements[j]);
}
var tagElements = form.getElementsByTagName('textarea');
for (var j = 0; j < tagElements.length; j++){
elements.push(tagElements[j]);
}
return elements;
}
//组合URL
function serializeElement(element) {
var method = element.tagName.toLowerCase();
var parameter;
if(method == 'select'){
parameter = [element.name, element.value];
}
switch (element.type.toLowerCase()) {
case 'submit':
case 'hidden':
case 'password':
case 'text':
case 'date':
case 'textarea':
parameter = [element.name, element.value];
break;
case 'checkbox':
case 'radio':
if (element.checked){
parameter = [element.name, element.value];
}
break;
}
if (parameter) {
var key = encodeURIComponent(parameter[0]);
if (key.length == 0)
return;
if (parameter[1].constructor != Array)
parameter[1] = [parameter[1]];
var values = parameter[1];
var results = [];
for (var i = 0; i < values.length; i++) {
results.push(key + '=' + encodeURIComponent(values[i]));
}
return results.join('&');
}
}
//调用方法
function serializeForm(formId) {
var elements = getElements(formId);
var queryComponents = new Array();
for (var i = 0; i < elements.length; i++) {
var queryComponent = serializeElement(elements[i]);
if (queryComponent) {
queryComponents.push(queryComponent);
}
}
return queryComponents.join('&');
}最后通过serializeForm(formId);输入form的id名称即可实现，返回数据为
id=1&title=%E6%B4%BB%E5%8A%A8&time=2017-07-10&status=1&importance=0&desc=%E5%9C%A8%E4%BA%8C%E6%A5%BC%E5%8A%9E%E5%85%AC%E5%AE%A4%E5%BC%80%E4%BC%9A%EF%BC%8C%E4%B8%80%E7%82%B9%E9%92%9F
关于“原生js怎么实现获取form表单数据”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前标题：原生js怎么实现获取form表单数据-创新互联
本文地址：http://cdiso.cn/article/cdpsep.html
