需要使用多个表单并使用Ajax/php/jquery语法保持页面状态的帮助

尝试处理表单并保持在同一页上。我的目标是能够点击照片下的按钮进行分类。我将有100张照片在每一页上，所以我宁愿只是能够点击周围，而不是有一个专门的页面为每一张照片。 以下几条线索，我就快到了。我只需要一个指向正确方向的点。我的代码可以正常工作，但它可以读取所有三种形式，而不仅仅是我点击的那个。每个表单都有一个按钮，可以将类别设置为1、2或3。无论我按下哪个按钮，它都会将类别更新为3。它从表单中漏出，读取所有表单，最后一个是3，它将值更新为3

非常感谢您的帮助

<!--(Header)-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
    $.ajax({
        type: 'POST',
        url: "test_ajax_update_code.php",
        data: $("FORM").serialize(),
    });
});
</script>
<!--(Body)-->
<img src="GLJ9988.jpg" width="500" height="333" border="0"><br>
<form>
    <input name="num" type="hidden" value="9988" >
    <input name="shw" type="hidden" value="1" >
    <input type="submit" value="1">
</form>&nbsp;&nbsp;&nbsp;
<form>
    <input name="num" type="hidden" value="9988" >
    <input name="shw" type="hidden" value="2" >
    <input type="submit" value="2">
</form>&nbsp;&nbsp;&nbsp;
<form>
    <input name="num" type="hidden" value="9988" >
    <input name="shw" type="hidden" value="3" >
    <input type="submit" value="3">
</form>

$（函数（）{
$.ajax({
键入：“POST”，
url:“test\u ajax\u update\u code.php”，
数据：$（“表单”）.serialize（），
});
});

您不需要3张表格。。。 1就足够了，只需编辑第一个表单，用选择框替换第二个输入（name=shw），并添加几行javascript（jQuery）

第一类
第2类
第3类
1.
2.
3.
$（“表单按钮”）。在（“单击”，函数（）{
所选变量=$（this.attr（“id”）；
$（“表格”）.find（“选择”）.val（已选择）；
//这里是阿贾克斯
});

将单击事件绑定到提交按钮，并根据单击的按钮表单启动ajax

$('input[type=submit]').on("click",function(e){
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: "test_ajax_update_code.php",
        data: $(this).parent().serialize(),
    });
})

$（this）.parent（）

选择

this

之外的第一个元素，在本例中，它是表单元素

---

使用

preventDefault

来防止页面刷新

通过选择像这样的每个表单来序列化每个表单。

$（'form'）。serialize（）

因此它从每个表单获取键和值，当您将这些值发送到

url

时，它使用最后一个键

值=>pair

。因此，您需要在表单上使用唯一标识符

id

，或者您可以在逻辑中使用

this

。如果我给每个表单一个id，我如何在ajax代码中处理它们？我在每个表单上都尝试了onSubmit=“return myfunction（this）”，但不确定将函数名放在脚本代码中的何处，因此无法使其工作。谢谢，但是如何将单击事件绑定到提交按钮？这次没有更新？在我的代码中，我使用单击事件。。。。您需要在$（document.ready（{code goes here}）中使用我的代码；谢谢我在那里添加了完全相同的ajax代码，当然还保留在“”的链接中，但是没有任何更新，我缺少了什么？此外，当我在每一页上有100张照片时，这会起作用吗？即，它会知道我在哪一张照片上，而不会将代码泄漏到最后一张吗？输入值可以通过表单作为数组发送，例如，这样就意味着图像id 9988已将值设置为1。。。。换句话说，你不需要输入，只需选择框。。。和其他为另一个图像选择…，但您需要修改jquery。它仍然不工作。我很高兴得到你的回答，但我还是遗漏了一些东西。我无法使用这些选择框更新数据库。一旦它开始工作，我就可以继续使用100张照片和100个阵列的高级功能，但现在我正在努力处理上面的代码。你说“这里是ajax”；我插进去也没用。错过了什么？太棒了。这超出了我的期望。然而：）。。。。。到目前为止，我已经使用单选按钮，然后在底部使用“保存”。由于连接问题，我决定重新编码并立即更新每个照片类，因此我需要将“提交”功能移动到每个按钮。我该怎么做？

$('input[type=submit]').on("click",function(e){
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: "test_ajax_update_code.php",
        data: $(this).parent().serialize(),
    });
})