Question

这是我的问题：

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head> 
<body>
<form id="roomform" action="room.php" method="POST">
<button name="room" value="Room01">IMG01</button>
<button name="room" value="Room02">IMG02</button>
<button name="room" value="Room03">IMG03</button>
<button name="room" value="Room04">IMG04</button>
<button name="room" value="Room05">IMG05</button>
<button name="room" value="Room06">IMG06</button>
<button name="room" value="Room07">IMG07</button>
<button name="room" value="Room08">IMG08</button>
<button name="room" value="Room09">IMG09</button>
<button name="room" value="Room10">IMG10</button>
</form>
<script type="text/javascript">
    var frm = $('#roomform');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });

        ev.preventDefault();
    });
</script>
</body>
</html>

PHP使用$ _POST [＆＃39; room＆＃39;]获取房间名称Room01-Room10（Room100可能？）并做一些特别的事情。它运作良好。现在我需要使用Ajax来做到这一点。上面的代码似乎没问题，但我无法从中获取任何数据（Room01-Room10）。

然后我发现了这个：

<form action="/vote/" method="post" class="vote_form">
    <input type="hidden" name="question_id" value="10" />
    <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" />
    <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" />
</form>

$(".vote_form").submit(function() { return false; });
$(".vote_up, .vote_down").click(function(event) {
    $form = $(this).parent("form");
    $.post($form.attr("action"), $form.serialize() + "&submit="+ $(this).attr("value"), function(data) {
        // do something with response (data)
    });
});

但它似乎不适合我的情况，我的所有按钮同名=＆＃34;房间＆＃34; $ _POST [＆＃39;房间＆＃39;]，没有课。这不起作用：

$(function() {
  $('input[name=room]').click(function(){
    var _data= $('#roomform').serialize() + '&room=' + $(this).val();
    $.ajax({
      type: 'POST',
      url: "room.php?",
      data:_data,
      success: function(html){
         $('div#1').html(html);
      }
    });
    return false;
  });
});

任何人都知道如何解决这个问题？

Answer 1

您的（最后）代码未发送AJAX请求，因为您将处理程序附加到错误的输入选择器。您的按钮是button元素，而不是input元素。这应该有效：

$('button[name=room]').click(function() { ...

编辑：

您的第一个代码无效，因为您的按钮只是按钮。您必须添加type属性才能让表单知道您按下了提交按钮：<button type="submit"...>

Answer 2

serialize（）方法不会从按钮元素中收集数据。请查看此链接上的文档：https://api.jquery.com/serialize/。在您的代码中，我假设您的数据对象是空的。

此外，如果您发布多个表单控件（序列化），它们应具有不同的名称属性。

使用多个按钮和PHP提交jQuery ajax表单

2 个答案: