亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vanilla JavaScript 將表單數據轉換為具有相應名稱和值的對象

Vanilla JavaScript 將表單數據轉換為具有相應名稱和值的對象

縹緲止盈 2023-03-03 15:45:59
我正在嘗試使用 vanilla JavaScript 獲取表單數據。目前我現在擁有的看起來像這樣submit(){  var formData = new FormData(document.querySelector('form'))  let JSON = JSON.parse(JSON.stringify(Object.fromEntries(new FormData(document.querySelector('form')).entries())));  console.log(json);}輸出是一個 JSON,這是我想要的,看起來像這樣5f5cf7c0123c4224fcfb193a[fee]: "0.966"5f5cf7c0123c4224fcfb193a[max_price]: "400"5f5cf7c0123c4224fcfb193b[fee]: "0.971"5f5cf7c0123c4224fcfb193b[max_price]: "600"5f5cf7c0123c4224fcfb193c[fee]: "0.976"5f5cf7c0123c4224fcfb193c[max_price]: "800"5f5cf7c0123c4224fcfb193d[standard]: "0.981"5f5cf7c0123c4224fcfb193e[fee]: "1.044"5f5cf7c0123c4224fcfb193e[max_price]: "100"5f5cf7c0123c4224fcfb193f[fee]: "1.039"5f5cf7c0123c4224fcfb193f[max_price]: "200"5f5cf7c0123c4224fcfb1938[fee]: "0.956"5f5cf7c0123c4224fcfb1938[max_price]: "100"5f5cf7c0123c4224fcfb1939[fee]: "0.961"5f5cf7c0123c4224fcfb1939[max_price]: "200"5f5cf7c0123c4224fcfb1940[fee]: "1.034"但問題是我希望數據看起來像這樣5f5cf7c0123c4224fcfb193a: {  fee: "0.966",  max_price: "400"}就像在 PHP 中發送請求并獲取字段一樣。有什么辦法可以做到這一點?我正在考慮尋找并構建一些自定義功能的開始[,但我認為這太粗略了。更新 HTML 表單             <input              class="border border-gray-300 duration-300 focus:outline-none focus:border-blue focus:duration-300"              name="5f5cf7c0123c4224fcfb193a[max_price]"              type="number"              value="400"              step="any"            />             <input              class="border border-gray-300 duration-300 focus:outline-none focus:border-blue focus:duration-300"              name="5f5cf7c0123c4224fcfb193a[fee]"              type="number"              value="0.966"              step="any"            />             <input              class="border border-gray-300 duration-300 focus:outline-none focus:border-blue focus:duration-300"              name="5f5cf7c0123c4224fcfb193b[max_price]"              type="number"              value="400"              step="any"            />
查看完整描述

1 回答

?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

沒有內置的東西可以做到這一點。數組上的一個簡單的 reduce 循環可以將其映射到您想要的格式。


var formData = new FormData(document.querySelector('form'))

var entries = formData.entries();

var data = Object.fromEntries(entries);

var result = Object.entries(data).reduce(function(result, entry) {

  const keys = entry[0].match(/([^[]+)\[([^\]]+)/)

  result[keys[1]] = result[keys[1]] || {};

  result[keys[1]][keys[2]] = entry[1];

  return result

}, {});


console.log(result);

<form>

  <input name="a[foo]" value="a-foo-1" />

  <input name="a[bar]" value="a-bar-1" />

  <input name="b[foo]" value="b-foo-1" />

  <input name="b[bar]" value="b-bar-1" />

  <input name="c[foo]" value="c-foo-1" />

  <input name="c[bar]" value="c-bar-1" />

</form>


查看完整回答
反對 回復 2023-03-03
  • 1 回答
  • 0 關注
  • 139 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號