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

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

javascript php jquery ajax

Javascript 使用多按钮和PHP提交jQuery ajax表单,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我的问题是： <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" va

我的问题是：

<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>

有人知道如何解决这个问题吗？

您的（上一个）代码没有发送AJAX请求，因为您将处理程序附加到了错误的输入选择器。您的按钮是

按钮

元素，而不是

输入

元素。这应该起作用：

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

编辑：

您的第一个代码不起作用，因为您的按钮只是按钮。您必须添加

type

属性，让表单知道您正在按提交按钮：

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

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

serialize（）

不返回按钮，因为它如何知道将哪个按钮放入参数中<代码>注意：只有“成功的控件”被序列化为字符串。没有序列化提交按钮值，因为表单不是使用按钮提交的。我认为问题末尾的代码应该有效。你看过开发者工具/firebug的“网络”选项卡中发送的内容了吗？将“输入”修改为“按钮”后，它就可以工作了。：）谢谢redelschaap.谢谢，按钮[name=room]起作用了！我以前尝试过type=“submit”，但它不起作用。

$(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;
  });
});

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