用java, ajax, php发送表单

Question

我有以下html代码的形式

<form id="msg-form-nota"> 
<input type="hidden" name="id_nota" id="id_nota" value="${project.id}">
<label for="textfield">Calificación obtenida:</label>
<input type="text" name="nota" id="nota" class="form-control form-control-sm" value="${project.nota}" placeholder="Introducir calificación"><br>
<input type="submit" name="submit" id="submit" class="btn btn-success btn-sm" value="Añadir/modificar calificación">
</form>

，然后我使用以下javascript/ajax代码来管理表单

$('#msg-form-nota').submit(e => {    

e.preventDefault();
const postData = {

nota: $('#nota').val(),
id: $('#id_nota').val()

};
const url ='accion.php';

$.post(url, postData, (response) => {
toastr.success('añadidas!', 'Actualización ', {"hideDuration": 1500});


});
});    

我检测到的问题，我不知道如何解决的是，例如，当使用一段时间，5个表单创建具有相同的名称id，如果我使用的第一个表单加载我的工作没有问题，但如果我使用其余的，表单不工作，如果不是所有的内容的表单去url，如果方法是一个get，我能做什么?谢谢你

Answer 1

如果你想从你的表单/元素中完全删除ID属性，你可以很容易地简化整个代码，通过使用一个FormData对象，并引用作为单个参数提供的form。FormData对象将整理各种输入元素，以便在ajax请求中使用-因此甚至不需要尝试显式地识别单个输入元素。

document.querySelectorAll('[type="submit"]').forEach(input => input.addEventListener('click',e=>{
e.preventDefault();
/*
The `submit` button raised the event so the `event.target` refers to that button.
From the button we know the `form` is the parentNode - but you can use `closest`
to find the parent form.
*/
let fd = new FormData( e.target.parentNode );

fetch( 'accion.php', { method:'post', body:fd })
.then(r=>r.text())
.then(data=>{
console.log(data);

// call your success function.
toastr.success('añadidas!', 'Actualización ', {
"hideDuration": 1500
});
});
}))

<form data-id='msg-form-nota'>
<input type='hidden' name='id_nota' value='123' />
<label>
Calificación obtenida:
<input type='text' name='nota' class='form-control form-control-sm' value='Geronimo' placeholder='Introducir calificación' />
</label>
<input type='submit' class='btn btn-success btn-sm' value='Añadir/modificar calificación' />
</form>
<form data-id='msg-form-nota'>
<input type='hidden' name='id_nota' value='456' />
<label>
Calificación obtenida:
<input type='text' name='nota' class='form-control form-control-sm' value='Fred Flintsone' placeholder='Introducir calificación' />
</label>
<input type='submit' class='btn btn-success btn-sm' value='Añadir/modificar calificación' />
</form>
<form data-id='msg-form-nota'>
<input type='hidden' name='id_nota' value='789' />
<label>
Calificación obtenida:
<input type='text' name='nota' class='form-control form-control-sm' value='Spitfire' placeholder='Introducir calificación' />
</label>
<input type='submit' class='btn btn-success btn-sm' value='Añadir/modificar calificación' />
</form>

---

在PHP脚本accion.php中，fetch请求将发送2个POST参数。这两个参数具有与表单输入元素相同的名称。例如:-

<?php
#accion.php

if( $_SERVER['REQUEST_METHOD']=='POST' && isset(
$_POST['id_nota'],
$_POST['nota']
)){
// ... etc do whatever
}
?>

Answer 2

这个问题，正如你的问题所暗示的，是因为你在循环中生成HTML时多次重复相同的id属性。

解决这个问题的最好方法是在元素上使用通用的class属性。然后，您可以针对事件的target属性中的特定实例，该实例被引发并作为参数传递给事件处理程序函数。您还可以使用DOM遍历方法来查找相关元素并检索它们的值。 还请注意，我将input包装在label元素中。这消除了对这些元素的for和id属性的需要，但保留了相同的功能。

$('.msg-form-nota').on('submit', e => {
e.preventDefault();
let $form = $(e.target);

const postData = {
nota: $form.find('.nota').val(),
id: $form.find('.id_nota').val()
};

console.log(postData);

/* make your AJAX request here... */
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form class="msg-form-nota">
<input type="hidden" name="id_nota" class="id_nota" value="ID_001">
<label>
Calificación obtenida:
<input type="text" name="nota" class="nota form-control form-control-sm" value="Nota_001" placeholder="Introducir calificación">   
</label>
<input type="submit" name="submit" class="btn btn-success btn-sm" value="Añadir/modificar calificación">
</form>
<form class="msg-form-nota">
<input type="hidden" name="id_nota" class="id_nota" value="ID_002">
<label>
Calificación obtenida:
<input type="text" name="nota" class="nota form-control form-control-sm" value="Nota_002" placeholder="Introducir calificación">   
</label>
<input type="submit" name="submit" class="btn btn-success btn-sm" value="Añadir/modificar calificación">
</form>
<form class="msg-form-nota">
<input type="hidden" name="id_nota" class="id_nota" value="ID_003">
<label>
Calificación obtenida:
<input type="text" name="nota" class="nota form-control form-control-sm" value="Nota_003" placeholder="Introducir calificación">   
</label>
<input type="submit" name="submit" class="btn btn-success btn-sm" value="Añadir/modificar calificación">
</form>