Question

即时尝试实现以下功能，在php中我有一个这样的表单：

<form method="post"  id="form_1" action="php.php">
<input type="submit" value="add" name="sub"/>
<input type="submit" value="envoi" name="sub"/>
</form>

表单操作文件是：

<?php

if( $_POST["sub"]=="add"){  ?>

 <script>
 alert("")
 </script>
<?php  echo "ZZZZZZ";   ?>

<?php } ?>

所以这意味着如果我按下带有值的sub，会出现一个警告提示，我怎么能做同样的事情（区分提交）但是使用Ajax请求：

以下代码不起作用：

 $(function(){
      $('form#form_1').submit(function(){
var _data= $(this).serialize()
$.ajax({
        type: 'POST',
        url: "php.php?",
        data:_data,
        success: function(html){
         $('div#1').html(html)

          }
     })
})
  })
  </script>
</head>

<body>
<div id="1" style="width: 100px;height: 100px;border: 1px solid red"></div>

<form method="post"  id="form_1" action="javascript:;">
<input type="submit" value="add" name="sub"/>
<input type="submit" value="envoi" name="sub"/>
</form>
</body>

Answer 1

您可以将事件处理程序放在按钮上而不是表单上。从表单中获取参数，然后为按钮添加参数，并发布表单。确保处理程序返回“false”。

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

您必须显式添加“sub”参数，因为当您调用“serialize（）”时jQuery不包含这些参数。

Answer 2

在这种情况下，您需要手动将提交按钮添加到发布的数据中，如下所示：

$(function(){
  $('form#form_1 :submit').submit(function(){
    var _data = $(this).closest('form').serializeArray(); //serialize form
    _data.push({ name : this.name, value: this.value });  //add this name/value
    _data = $.param(_data);                               //convert to string
    $.ajax({
      type: 'POST',
      url: "php.php?",
      data: _data,
      success: function(html){
        $('div#1').html(html);
      }
    });
    return false; //prevent default submit
  });
});

我们正在使用.serializeArray()获取表单的序列化版本（which is what .serialize() uses internally），在序列化为之前将我们的名称/值对添加到该数组字符串来自$.param()。

最后添加return false是为了防止默认提交会离开页面的行为。

Answer 3

很多分号丢失，见下文

 $(function(){
      $('form#form_1').submit(function(){
         var _data= $(this).serialize();
         $.ajax({
            type: 'POST',
            url: "php.php?",
            data:_data,
            success: function(html){
               $('div#1').html(html);    
            }
         });
      });
  });

Answer 4

jQuery Form plugin提供了一些先进的功能，它已经自动完成了我们必须手动执行的一些任务，请查看它。它还提供了更好的处理表单元素的方法，序列化，您可以在提交表单之前插入预处理函数。

jQuery使用2个提交按钮提交ajax表单

4 个答案: