開發中，我們經常需要獲取用戶在表單中輸入的數據，然后進行處理或提交到服務器。今天我們就來聊一聊，如何用JavaScript獲取HTML表單中的值。

使用FormData構造函數

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

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

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

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

代碼解析

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

假設你在開發一個在線購物的系統，用戶在填寫訂單表單后點擊提交，你可以用上面的方法獲取到用戶的所有輸入數據，然后進行驗證或發送到服務器。

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

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));
});

結束

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

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

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

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

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)
})

日常開發中，我們經常需要在用戶瀏覽頁面時進行一些動態操作，比如實現無限滾動加載更多內容、調整布局、或觸發動畫效果。為了實現這些功能，準確獲取整個網頁文檔的高度是關鍵的一步。今天，我們就結合一個實際業務場景，來看一下如何用JavaScript獲取整個文檔的高度。

場景介紹

假設你在開發一個電商網站，需要在用戶滾動到底部時自動加載更多商品。為了實現這個功能，我們需要精確地獲取當前網頁的高度，并判斷用戶是否已經滾動到頁面底部。

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

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

示例代碼

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

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

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

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

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

屬性解釋

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

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

方法二：使用getBoundingClientRect方法

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

示例代碼

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

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

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

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

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

總結

通過這篇文章，我們結合實際業務場景，了解了如何用JavaScript獲取整個文檔的高度。不論是通過scrollHeight、offsetHeight和clientHeight組合，還是使用getBoundingClientRect方法，都能幫助我們在實際開發中實現動態加載和布局調整的功能。希望這些技術能幫助你在日常開發中更加得心應手！