原生js實現獲取form表單資料
//獲取指定form中的所有的<input>物件
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表單下所有表單元素JSORM
- js獲取表單元素所在的form表單物件JSORM物件
- JavaScript 獲取form所有表單元素JavaScriptORM
- JQuery獲取form表單中所有值jQueryORM
- 過濾器中獲取form表單或url請求資料過濾器ORM
- JS原生實現表單序列化JS
- javascript獲取form表單中表單元素的數目JavaScriptORM
- 原生JS實現表單序列化serialize()JS
- 獲取form表單下某一type型別的元素ORM型別
- jq 將form表單中的資料轉為jsonORMJSON
- 仿 ElmentUI 實現一個 Form 表單UIORM
- jquery獲取json資料簡單介紹jQueryJSON
- Vue資料驅動表單渲染,輕鬆搞定form表單VueORM
- jquery實現的ajax請求獲取json資料程式碼jQueryJSON
- Vue+Element+JS動態生成form表單實現新增和刪除操作VueJSORM
- js實現獲取URL引數JS
- Form表單JSONContent-type解析ORMJSON
- EasyUI實現的form表單提交簡單程式碼例項UIORM
- 原生js實現的獲取當前元素的上一個元素節點JS
- 使用LocalStorage實現Form表單內容本地儲存ORM
- jsonp跨域獲取資料實現百度搜尋JSON跨域
- ES系列(五):獲取單條資料get處理過程實現
- jdbcTemplate 獲取資料表結構JDBC
- Struts2框架自學之路——Action獲取表單資料的方式以及表單資料的封裝框架封裝
- PHP獲取表單方法PHP
- js獲取表格第一行資料(不包括表頭)JS
- PHPAjaxJavaScriptJson實現天氣資訊獲取PHPJavaScriptJSON
- Python獲取jsonp資料PythonJSON
- 基於Gin框架的web後端開發(四): 獲取FORM表單引數框架Web後端ORM
- form表單提交,後臺怎麼獲取select的值?後臺直接獲取即可,和input方式一樣。ORM
- 獲得JD商品評論 API 如何實現實時資料獲取API
- 通過原生js實現資料的雙向繫結JS
- JSONProxy – 獲取跨域json資料工具JSON跨域
- 分享一個H5原生form表單的checkbox特效H5ORM特效
- 解決PHP Post獲取不到非表單資料的問題PHP
- 為何我用spring mvc獲取不到表單提交資料?SpringMVC
- Struts2筆記06 封裝獲取表單資料方式筆記封裝
- jqGrid獲取json資料方法JSON