Html 一个ajax用于具有相同输入字段的多个表单

我有一个包含大量行的表，如下所示：

实际上，在每一行的“详细信息”列中，都有一个包含两个输入的表单，第一个输入（隐藏）是相应的音乐ID，第二个输入是提交表单的“单击查看详细信息”

因此，我们有1000个表单，具有相同的操作，但隐藏的输入不同

我想为这些表单编写ajax，很明显，我不能为每个表单编写1000个ajax事件，那么我能做什么呢？我可以按类编写ajax吗？不是身份证吗

（正如您所知，这1000个表单应该具有不同且唯一的ID，但它们可以具有相同的类）

我试图创建一个独特的表单，并将每一行所需的输入传递给该表单，然后为该表单编写一个ajax，然而，这会导致很多复杂性，对我来说不是一个好的选择

以下是我的表格示例，共有4行：

音乐ID
音乐名
音乐细节
1.
歌曲1
2.
歌曲2
3.
歌曲3
4.
歌曲4

想法非常简单：

向窗体中添加单击事件，如下所示：

$（“表格”）。提交（功能（e）{
//你的代码
});

使用

form.elements[0]获取表单的输入值。value

其中form是

const form=e.target

最后，以您的方式从该事件调用ajax

请看下面的代码片段：

$（“表格”）。提交（功能（e）{
e、 预防默认值（）；
常数形式=e.目标；
const val1=form.elements[0]。值；
const val2=form.elements[1]。值；
//控制台日志（val1，val2）；
常数数据={
val1:val1，
val2:val2
};
控制台日志（数据）；
$.ajax({
url:“”，//您的url
方法：“POST”，
数据：{fields:data}，
成功：（）=>{
控制台日志（“成功”）；
}
});
});

音乐ID
音乐名
音乐细节
1.
歌曲1
2.
歌曲2
3.
歌曲3
4.
歌曲4
想法非常简单：

向窗体中添加单击事件，如下所示：
$（“表格”）。提交（功能（e）{
//你的代码
});

使用
form.elements[0]获取表单的输入值。value
其中form是
const form=e.target


最后，以您的方式从该事件调用ajax


请看下面的代码片段：


$（“表格”）。提交（功能（e）{
e、 预防默认值（）；
常数形式=e.目标；
const val1=form.elements[0]。值；
const val2=form.elements[1]。值；
//控制台日志（val1，val2）；
常数数据={
val1:val1，
val2:val2
};
控制台日志（数据）；
$.ajax({
url:“”，//您的url
方法：“POST”，
数据：{fields:data}，
成功：（）=>{
控制台日志（“成功”）；
}
});
});

音乐ID
音乐名
音乐细节
1.
歌曲1
2.
歌曲2
3.
歌曲3
4.
歌曲4
到目前为止您尝试了什么？@ShahnawazHossan我尝试创建唯一的表单，并将每一行所需的输入传递到该表单，然后为该表单编写一个ajax，但是，这会导致很多复杂性，对我来说不是一个好的选择。>>我尝试创建唯一的表单，并将每行所需的输入传递给该表单-这绝对是正确的方法。“请展示你的尝试。”萨尼亚萨迪安，我的回答对你有帮助吗？如果有，你可以。到目前为止你尝试了什么？@ShahnawazHossan我尝试创建唯一的表单，并将每一行所需的输入传递给该表单，然后为该表单编写一个ajax，但是，这会导致很多复杂性，对我来说不是一个好的选择。>>我尝试创建唯一的表单，并将每行所需的输入传递给该表单-这绝对是正确的方法。“请展示你的尝试。”萨尼亚萨迪安，我的回答对你有帮助吗？如果有，您可以。谢谢，那么当我们在页面中有其他一些具有不同操作和输入的表单时呢？我可以按班级分开吗？比如
$（“form.myClass”）.submit（函数（e）{
不要担心这一点。因为提交表单时传递的数据不同，因为表单的输入是不同的。顺便说一句，您可以使用类似于
$（'.your_class'）的类提交表单。bind（'submit'，function（）
。谢谢，那么当我们在页面中有其他一些具有不同操作和输入的表单时呢？我可以按类将它们分开吗？比如
$（“form.myClass”）。提交（函数（e）{
不用担心。因为提交表单时传递的数据不同，因为表单的输入不同。顺便说一句，您可以使用如下类提交表单：
$（'.your_class'）。bind（'submit'，function（）
。
<table>
<thead>
  <th>Music ID</th>
  <th>Music Name</th>
  <th>Music Details</th>
</thead>
<tr>
  <td>1</td>
  <td>Song 1</td>
  <td><form action="detail.php">
  <input type="hidden" name="musicid" value="1">
  <input type="submit" value="Music details">
  </form></td>
</tr>
<tr>
  <td>2</td>
  <td>Song 2</td>
  <td><form action="detail.php">
  <input type="hidden" name="musicid" value="2">
  <input type="submit" value="Music details">
  </form></td>
</tr>
<tr>
  <td>3</td>
  <td>Song 3</td>
  <td><form action="detail.php">
  <input type="hidden" name="musicid" value="3">
  <input type="submit" value="Music details">
  </form></td>
</tr>
<tr>
  <td>4</td>
  <td>Song 4</td>
  <td><form action="detail.php">
  <input type="hidden" name="musicid" value="4">
  <input type="submit" value="Music details">
  </form></td>
</tr>
</table>