Ajax通信で指定のデータが存在する場合まとめて送信したい

Question

質問内容

Djangoを使用しているんですが、
ajaxを使用してAPIもどきを作成しています。

ボタン1、ボタン2、ボタン3
とそれぞれ押したら通信するというものなのですが、
ボタン2だけ、input[type=hidden]の値も送りたい や、
ボタン3は、input[type=hidden]が2つ存在し、どちらも送りたい
ボタン1にはそのinput[type=hidden]は存在しない

例

<div class="buttons">
  <div class="action">
    <button>button1</button>
  </div>
  <div class="action">
    <button>button2</button>
    <input type="hidden" value="foo" data-name="foo">
  </div>
  <div class="action">
    <button>button3</button>
    <input type="hidden" value="foo" data-name="foo">
    <input type="hidden" value="example" data-name="val">
  </div>
</div>

.action input[data-name]はdata-nameが同一でもvalueは違うことがあります。
また、今回はtype=hiddenにしていますが、textやnumberも使用するので、動的に取得する必要があります。
最終的に取得する要素には同一classを付与して取得します。（例には入れてませんのでお気遣いなく）

その状況でまとめて、

document.querySelectorAll(".action button").forEach(function(element){
  element.addEventListener("click",function(e){
    /* if(element.querySelectorAll("input[type=hidden]").length > 0) */
    /* 連想配列を作りたい {data-name:value} */
    $.ajax({
      'url': '{% url "api" %}',
      'method': 'POST',
      'data':{
        'action':e.dataset.action,
        'csrfmiddlewaretoken': document.querySelector("input[type=hidden]").value,
        /* 連想配列があったときだけ挿入 もしくはない場合はダミーの連想配列を送信 */
      },
//省略

のようにまとめてボタンアクションを作成することはできるでしょうか？

要約すると
.action内のボタンが押され、
input[type=hidden]が存在するとき、
ajaxのdataにその値が存在すればそのデータをまとめて送りたいと言うことです
（実際は送信するデータは同じclassを付与して処理します(type=textとかも送信したいので)）

可能であればdata-nameの値とvalueの値を連想配列のような形にできるとありがたいです（Djangoからその形でアクセスできるかは確認してません）

Comments

[hentaiman]

重複’するdata-nameは必ず同じvalueを持つという隠れ前提条件あったりしますか？
質問文からだとそういった部分が不明瞭なため

[sk-sora--ypi]

異なるactionでdata-nameが重複する場合valueは異なる場合があります
同じaction内でdata-nameが被ることはありません
情報不足ですみません。

[hentaiman]

押したボタンのclosestの配下のinputを送るだけいいんですか？
送信時のmethodとcontenttypeはなんですか？
jqueryは$.ajaxを使う為だけに使っていて本当は使いたくないとか？

[sk-sora--ypi]

そうですね、inputの値を送るだけです。
methodはPOST、contenttypeはjsonです。
まさにその通りで、Ajax自体あまり使った事がなかったのでひとまず簡単に使えるjqueryでやってるというところです。

[yambejp]

button1は何も送るものがないですが、何を送る想定でしょうか？

[sk-sora--ypi]

実際には別のところから送るデータがあるんですが、ボタン直下のデータ群はオプションのようなものです！

Answer 1

こんな感じでやるとよいのでは？

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('button').forEach(x=>{
x.addEventListener('click',e=>{
const url="send.php";
const method="post";
const body=new FormData;
x.closest('.action').querySelectorAll('input[data-name]').forEach(y=>{
body.append(y.dataset["name"],y.value);
});;
fetch(url,{method,body}).then(res=>res.text()).then(console.log);
});
});
});
</script>
<div class="buttons">
<div class="action">
<button>button1</button>
</div>
<div class="action">
<button>button2</button>
<input type="hidden" value="foo" data-name="foo">
</div>
<div class="action">
<button>button3</button>
<input type="hidden" value="foo" data-name="foo">
<input type="hidden" value="example" data-name="val">
</div>
</div>

[sk-sora--ypi]

回答ありがとうございます。
試したことのないアクセスの方法だったので勉強になります。
試させていただきます、ありがとうございました。

Answer 2

今のhtmlに対して回答
動くかどうか知らないけど、動かなかったら適当に直してください

htmlをあまり汚さずにjavascriptで何とかしたいという考えが見て取れます。（気のせいかもしれませんが）
個人的にはhtmlにあれこれ属性やクラス追加する事でjavascriptが簡単になるならhtmlに属性追加するなりformを複数作って分けるなりした方が良いとは思います。
jsかhtmlどちらかを複雑にする必要があるなら、技術のいらない方を複雑にした方が後々ソース読む時も楽です。

async function usosubmit(data){
	const response = await fetch('https://localhost', 
		{'method': 'post',
		  body: JSON.stringify(data),
		  headers:{
		    'Content-Type': 'application/json'
		  },
		}
	);
	
}
(()=>{
	document.querySelectorAll('.action').forEach((elm)=>{
  	elm.querySelector('button').addEventListener('click', ()=>{
    	const sendData = {};
    	elm.querySelectorAll('input[type="hidden"]').forEach((input)=>{
        sendData[input.dataset.name] = input.value;
      })
      usosubmit(sendData);
    })
  })
})()

Comments

[sk-sora--ypi]

回答ありがとうございます。
HTML汚しても構わないんですが、ボタンのアクションを一括で済ませたかったというのが本音ですw
これ以上の変更がある場合はそれぞれのHTML&JSを作成してincludeする方が見栄えはいいのかなと感じましたw
記述していただいたプログラムも試させていただきます、回答ありがとうございました。

[hentaiman]

じゃあclass名つけて送信対象Input特定出来るようにした方が楽ですよ
<input type='button' class='data3'>
<input type='hidden' class='data3' data-name='nm1' value='v1'>
<input type='hidden' class='data3'<input type='hidden' class='data3'>
で、押したボタンの持つclassと同じ[type='hidden']を選ぶだけなので

それ以前にそのhiddenのinput群はinputタグにする必要があるのかすら検討しても良いと思いますよ。
FormDataである必要が無いのなら送信パラメータ群を最初からjavascriptの変数として最初から用意してしまえばいいのだし。
経緯と求める仕様を知らないのでその辺はこちらには判断つきませんが

[sk-sora--ypi]

最終的にはclassで取得する予定です(こちらについては記述済みですが)
なのでボタンの親要素から子あるいは孫のclassからアクセスするという感じですね。
今回は例だったのと手法自体は知っていたので、省かせていただきました。

データはtype=text,numberなどユーザーが編集できるデータも含めるので、JS内での処理は不向きだと考えてます

[hentaiman]

その辺の情報は全て適切な回答を得るには必須の情報なので、修正依頼でのやり取りも含めて質問文を修正する事をおすすめします。

[sk-sora--ypi]

すみません、修正依頼きたら、質問文編集ですよね。
そのまま受け答えしてました、ありがとうございます。

Answer 3

まだ考え中(と言うかそのHTMLすら未完成)ですが
こんな形でできそうな気がしてきました

document.querySelectorAll(".action button").forEach(function(element){
  element.addEventListener("click",function(e){
    if(element.parentElement.querySelectorAll("input[type=hidden]").length > 0){
      let data_set = {};
      element.parentElement.querySelectorAll("input[type=hidden]").forEach(function(e){
        data_set[e.dataset.name] = e.value;
      })
    }
    /* 連想配列を作りたい {data-name:value} */
    $.ajax({
      'url': 'api/',
      'data':{
        /* 連想配列があったときだけ挿入 もしくはない場合はダミーの連想配列を送信 */
        if(data_set) 'data_set':data_set
      },
//省略

実践していない事もあり、
できるかは不明かつもっとスマートな書き方があるかもしれませんので引き続き回答は募集させていただきます