原生js怎么實(shí)現(xiàn)獲取form表單數(shù)據(jù)

這篇文章將為大家詳細(xì)講解有關(guān)原生js怎么實(shí)現(xiàn)獲取form表單數(shù)據(jù)，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

JS是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動態(tài)效果，讓網(wǎng)頁更加美觀。

具體內(nèi)容如下

//獲取指定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('&'); 
  } 
} 
//調(diào)用方法  
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名稱即可實(shí)現(xiàn)，返回數(shù)據(jù)為

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

關(guān)于“原生js怎么實(shí)現(xiàn)獲取form表單數(shù)據(jù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。