如何使用JavaScript獲取HTML表單中的值？

開發(fā)中，我們經(jīng)常需要獲取用戶在表單中輸入的數(shù)據(jù)，然后進(jìn)行處理或提交到服務(wù)器。今天我們就來聊一聊，如何用JavaScript獲取HTML表單中的值。

使用FormData構(gòu)造函數(shù)

FormData 是一個(gè)非常方便的工具，它可以把表單中的所有數(shù)據(jù)打包成鍵值對的形式。我們來看一個(gè)例子，假設(shè)我們有一個(gè)用戶登錄表單：

<form id="login-form">
  用戶名: <input type="text" name="username">
  <br />
  密碼: <input type="password" name="password">
  <br />
  <input type="submit" value="登錄">
</form>

現(xiàn)在我們要獲取用戶輸入的用戶名和密碼，可以這樣寫：

const form=document.getElementById('login-form');
form.addEventListener('submit', function (e) {
  e.preventDefault(); // 阻止表單的默認(rèn)提交行為
  const formData=new FormData(form); // 創(chuàng)建FormData對象
  for (const pair of formData.entries()) {
    console.log(`${pair[0]}: ${pair[1]}`); // 輸出每一個(gè)表單字段的鍵和值
  }
});

代碼解析

document.getElementById('login-form') ：首先，我們通過ID獲取到表單元素。
form.addEventListener('submit', function (e) {...})：然后，我們給表單綁定一個(gè)submit事件監(jiān)聽器，當(dāng)用戶點(diǎn)擊登錄按鈕時(shí)，這個(gè)事件就會(huì)觸發(fā)。
e.preventDefault()：這行代碼非常關(guān)鍵，它阻止了表單的默認(rèn)提交行為。這樣我們可以用JavaScript來處理數(shù)據(jù)，而不是直接刷新頁面。
const formData=new FormData(form)：FormData對象會(huì)自動(dòng)讀取表單中的所有輸入字段，并將其封裝成鍵值對的形式。
formData.entries()：這個(gè)方法返回一個(gè)包含所有鍵值對的可迭代對象。我們可以用for...of循環(huán)來遍歷它們，并輸出每個(gè)字段的名稱和值。

假設(shè)你在開發(fā)一個(gè)在線購物的系統(tǒng)，用戶在填寫訂單表單后點(diǎn)擊提交，你可以用上面的方法獲取到用戶的所有輸入數(shù)據(jù)，然后進(jìn)行驗(yàn)證或發(fā)送到服務(wù)器。

你還可以根據(jù)需要，把這些數(shù)據(jù)通過fetch或axios發(fā)送到后端服務(wù)器，完成用戶的登錄或其他操作。

form.addEventListener('submit', function (e) {
  e.preventDefault();
  const formData=new FormData(form);
  
  fetch('/login', {
    method: 'POST',
    body: formData
  })
  .then(response=> response.json())
  .then(data=> console.log(data))
  .catch(error=> console.error('Error:', error));
});

結(jié)束

FormData 是處理表單數(shù)據(jù)的強(qiáng)大工具，特別適合在現(xiàn)代Web開發(fā)中使用。它不僅簡化了數(shù)據(jù)獲取的過程，而且能夠很好地與后端API集成。在下次你需要處理表單數(shù)據(jù)時(shí)，不妨試試這個(gè)方法，希望這篇文章能幫助你更好地掌握這一技巧。如果你有任何疑問或其他場景的需求，歡迎在評論區(qū)與我交流！

比Python，JavaScript才是更適合寫爬蟲的語言。原因有如下三個(gè)方面：

JavaScript異步IO機(jī)制適用于爬蟲這種IO密集型任務(wù)。JavaScript中的回調(diào)非常自然，使用異步網(wǎng)絡(luò)請求能夠充分利用CPU。
JavaScript中的jQuery毫無疑問是最強(qiáng)悍的HTML解析工具，使用JavaScript寫爬蟲能夠減少學(xué)習(xí)負(fù)擔(dān)和記憶負(fù)擔(dān)。雖然Python中有PyQuery，但終究還是比不上jQuery自然。
爬取結(jié)果多為JSON，JavaScript是最適合處理JSON的語言。

一、任務(wù)：爬取用戶在Github上的repo信息

通過實(shí)例的方式學(xué)習(xí)爬蟲是最好的方法，先定一個(gè)小目標(biāo)：爬取github repo信息。入口URL如下，我們只需要一直點(diǎn)擊next按鈕就能夠遍歷到用戶的所有repo。

https://github.com/{{username}}?tab=repositories

獲取repo之后，可以做什么？

統(tǒng)計(jì)用戶最常使用的語言，統(tǒng)計(jì)用戶語言使用分布情況統(tǒng)計(jì)用戶所獲取的star數(shù)，fork數(shù)

二、爬蟲雙股劍：axios和jQuery

axios是JavaScript中很常用的異步網(wǎng)絡(luò)請求庫，相比jQuery，它更輕量、更專業(yè)。既能夠用于瀏覽器端，也可以用于Node。它的語法風(fēng)格是promise形式的。在本任務(wù)中，只需要了解如下用法就足夠了：

axios.get(url).then((resp)=> {
 請求成功，處理resp.data中的html數(shù)據(jù)
}).catch((err)=> {
 請求失敗，錯(cuò)誤處理
})

請求之后需要處理回復(fù)結(jié)果，處理回復(fù)結(jié)果的庫當(dāng)然是用jQuery。實(shí)際上，我們有更好的選擇：cheerio。

在node下，使用jQuery，需要使用jsdom庫模擬一個(gè)window對象，這種方法效率較低，四個(gè)字形容就是：笨重穩(wěn)妥。

如下代碼使用jQuery解析haha.html文件

fs=require("fs")
jquery=require('jquery')
jsdom=require('jsdom') //fs.readFileSync()返回結(jié)果是一個(gè)buffer，相當(dāng)于byte[] 
html=fs.readFileSync('haha.html').toString('utf8') 
dom=new jsdom.JSDOM(html) 
$=jquery(dom.window) console.log($('h1'))

cheerio只實(shí)現(xiàn)了jQuery中的DOM部分，相當(dāng)于jQuery的一個(gè)子集。cheerio的語法和jQuery完全一致，在使用cheerio時(shí)，幾乎感覺不到它和jQuery的差異。在解析HTML方面，毫無疑問，cheerio是更好的選擇。如下代碼使用cheerio解析haha.html文件。

cheerio=require('cheerio')
html=require('fs').readFileSync("haha.html").toString('utf8')
$=cheerio.load(html)
console.log($('h1'))

只需20余行，便可實(shí)現(xiàn)簡單的github爬蟲，此爬蟲只爬取了一頁repo列表。

var axios=require("axios")
var cheerio=require("cheerio")
axios.get("https://github.com/weiyinfu?tab=repositories").then(resp=> {
 var $=cheerio.load(resp.data)
 var lis=$("#user-repositories-list li")
 var repos=[]
 for (var i=0; i < lis.length; i++) {
 var li=lis.eq(i)
 var repo={
 repoName: li.find("h3").text().trim(),
 repoUrl: li.find("h3 a").attr("href").trim(),
 repoDesc: li.find("p").text().trim(),
 language: li.find("[itemprop=programmingLanguage]").text().trim(),
 star: li.find(".muted-link.mr-3").eq(0).text().trim(),
 fork: li.find(".muted-link.mr-3").eq(1).text().trim(),
 forkedFrom: li.find(".f6.text-gray.mb-1 a").text().trim()
 }
 repos.push(repo)
 }
 console.log(repos)
})

三、更豐富的功能

爬蟲不是目的，而是達(dá)成目的的一種手段。獲取數(shù)據(jù)也不是目的，從數(shù)據(jù)中提取統(tǒng)計(jì)信息并呈現(xiàn)給人才是最終目的。

在github爬蟲的基礎(chǔ)上，我們可以擴(kuò)展出更加豐富的功能：使用echarts等圖表展示結(jié)果。

要想讓更多人使用此爬蟲工具獲取自己的github統(tǒng)計(jì)信息，就需要將做成一個(gè)網(wǎng)站的形式，通過搜索頁面輸入用戶名，啟動(dòng)爬蟲立即爬取github信息，然后使用echarts進(jìn)行統(tǒng)計(jì)展示。網(wǎng)站肯定也要用js作為后端，這樣才能和js爬蟲無縫銜接，不然還要考慮跨語言調(diào)用。js后端有兩大web框架express和koa，二者API非常相似，并無優(yōu)劣之分，但express更加流行。

如上設(shè)計(jì)有一處用戶體驗(yàn)不佳的地方：當(dāng)啟動(dòng)爬蟲爬取github信息時(shí)，用戶可能需要等待好幾秒，這個(gè)過程不能讓用戶干等著。一種解決思路是：讓用戶看到爬蟲爬取的進(jìn)度或者爬取過程。可以通過websocket向用戶推送爬取過程信息并在前端進(jìn)行展示。展示時(shí)，使用類似控制臺的界面進(jìn)行展示。

如何存儲(chǔ)爬取到的數(shù)據(jù)呢？使用MongoDB或者文件都可以，最好實(shí)現(xiàn)兩種存儲(chǔ)方式，讓系統(tǒng)的存儲(chǔ)方式變得可配置。使用MongoDB時(shí)，用到j(luò)s中的連接池框架generic-pool。

整個(gè)項(xiàng)目用到的庫包括：

express：后端框架
cheerio+axios：爬蟲
ws：websocket展示爬取過程
webpack：打包工具
less：樣式語言
echarts：圖表展示
vue：模板渲染
jquery：DOM操作
mongodb：存儲(chǔ)數(shù)據(jù)
generic-pool：數(shù)據(jù)庫連接池

試用地址：

https://weiyinfu.cn/githubstatistic/search.html?

案例地址：https://github.com/weiyinfu/GithubStatistic

原文鏈接：https://zhuanlan.zhihu.com/p/53763115

日常開發(fā)中，我們經(jīng)常需要在用戶瀏覽頁面時(shí)進(jìn)行一些動(dòng)態(tài)操作，比如實(shí)現(xiàn)無限滾動(dòng)加載更多內(nèi)容、調(diào)整布局、或觸發(fā)動(dòng)畫效果。為了實(shí)現(xiàn)這些功能，準(zhǔn)確獲取整個(gè)網(wǎng)頁文檔的高度是關(guān)鍵的一步。今天，我們就結(jié)合一個(gè)實(shí)際業(yè)務(wù)場景，來看一下如何用JavaScript獲取整個(gè)文檔的高度。

場景介紹

假設(shè)你在開發(fā)一個(gè)電商網(wǎng)站，需要在用戶滾動(dòng)到底部時(shí)自動(dòng)加載更多商品。為了實(shí)現(xiàn)這個(gè)功能，我們需要精確地獲取當(dāng)前網(wǎng)頁的高度，并判斷用戶是否已經(jīng)滾動(dòng)到頁面底部。

方法一：獲取文檔高度的方法

要獲取文檔的高度，可以使用scrollHeight、offsetHeight和clientHeight這些屬性的最大值。

示例代碼

在這個(gè)場景中，我們可以這樣編寫代碼：

// 獲取文檔的高度
function getDocumentHeight() {
  const body=document.body;
  const html=document.documentElement;
  return Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );
}

// 監(jiān)聽滾動(dòng)事件，加載更多內(nèi)容
window.addEventListener('scroll', ()=> {
  const scrollTop=window.scrollY || document.documentElement.scrollTop;
  const windowHeight=window.innerHeight;
  const documentHeight=getDocumentHeight();

  // 判斷是否滾動(dòng)到底部
  if (scrollTop + windowHeight >=documentHeight) {
    loadMoreProducts();
  }
});

// 模擬加載更多商品的函數(shù)
function loadMoreProducts() {
  console.log('加載更多商品...');
  // 這里可以加入實(shí)際的加載更多商品的代碼邏輯
}

屬性解釋

scrollHeight：元素內(nèi)容的總高度，包括不可見部分。
offsetHeight：元素的高度，包括內(nèi)邊距和邊框。
clientHeight：元素的內(nèi)部高度（像素），包括內(nèi)邊距但不包括邊框、外邊距和水平滾動(dòng)條。

通過取這些屬性的最大值，我們可以得到整個(gè)文檔的高度，確保在任何情況下都能準(zhǔn)確測量。

方法二：使用getBoundingClientRect方法

在某些情況下，比如需要獲取元素的精確位置和尺寸時(shí)，可以使用getBoundingClientRect方法。這種方法返回一個(gè)包含元素尺寸及其相對于視口位置的對象。

示例代碼

在我們這個(gè)加載更多商品的場景中，也可以使用這種方法來獲取文檔高度：

// 獲取文檔的高度
function getDocumentHeight() {
  const body=document.body;
  const html=document.documentElement;
  return Math.max(
    body.getBoundingClientRect().height,
    html.getBoundingClientRect().height
  );
}

// 監(jiān)聽滾動(dòng)事件，加載更多內(nèi)容
window.addEventListener('scroll', ()=> {
  const scrollTop=window.scrollY || document.documentElement.scrollTop;
  const windowHeight=window.innerHeight;
  const documentHeight=getDocumentHeight();

  // 判斷是否滾動(dòng)到底部
  if (scrollTop + windowHeight >=documentHeight) {
    loadMoreProducts();
  }
});

// 模擬加載更多商品的函數(shù)
function loadMoreProducts() {
  console.log('加載更多商品...');
  // 這里可以加入實(shí)際的加載更多商品的代碼邏輯
}

總結(jié)

通過這篇文章，我們結(jié)合實(shí)際業(yè)務(wù)場景，了解了如何用JavaScript獲取整個(gè)文檔的高度。不論是通過scrollHeight、offsetHeight和clientHeight組合，還是使用getBoundingClientRect方法，都能幫助我們在實(shí)際開發(fā)中實(shí)現(xiàn)動(dòng)態(tài)加載和布局調(diào)整的功能。希望這些技術(shù)能幫助你在日常開發(fā)中更加得心應(yīng)手！

在線咨詢

上一篇：玩轉(zhuǎn)win10搜索功能，打造一個(gè)個(gè)性化的搜索界面，你
下一篇：Vue3問題：如何使用WangEditor富文本？能

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商