Question

我正在尝试将多个AJAX数据发布到update.php。这是我目前的代码：

$.ajax({  
    url:"update.php",  
    method:"POST",  
    data: $('#update_form').serialize(),   
    beforeSend:function(){  
        $('#update').val("Geupdate!");  
    },  
    success:function(data){  
        $('#update_form')[0].reset();  
        $('#add_data_Modal').modal('hide');  
        $('#employee_table').html(data);  
    }  
});

但是我也想在数据中发送一个ID。这是我正在使用的形式。

 <form method="post" id="update_form">
     <label>Notitie:</label>
     <input type="text" name="name" id="' . $row["id"] . '" class="form-control" value='.$row["name"].' width="100%">
     <br />
     <input type="submit" name="update" id="update" value="Opslaan" class="btn btn-success" />
 </form>

如何将data: $('#update_form').serialize()和id="' . $row["id"] . '"组合在一起？

我尝试了几种组合，但我找不到正确的答案。这是我尝试过的：

data: $('#update_form').serialize(), id: <?php echo $row["id"] ?>

Answer 1

一种简单的方法是向表单添加隐藏的输入，以便serialize()包含id

<form method="post" id="update_form">

   <input type="hidden" name="id" value="' . $row["id"] . '" > 

  <label>Notitie:</label>
  <input type="text" name="name" id="' . $row["id"] . '" class="form-control" value='.$row["name"].' width="100%">
  <br />
  <input type="submit" name="update" id="update" value="Opslaan" class="btn btn-success" />
</form>

Answer 2

您正在序列化整个表单，其中也包含您的textbox数据。因此，您不需要显式添加表单的每个元素。

.serialize() 方法以标准网址编码方式创建文本字符串符号。它可以作用于已选择个体的jQuery对象表单控件，例如<input>，<textarea>和<select>：$("input, textarea, select" ).serialize();

因此，表单中添加的任何元素（<input>，<textarea>和<select>）都会被隐式序列化。因此，如果您希望将其他数据与表单一起传递，则可以在表单内创建隐藏字段。

Answer 3

我不使用jQuery，所以这有点像“在黑暗中刺”但你也可以使用FormData对象并附加一个新参数＆amp;或许这样的价值。

$.ajax({ 
    var form=$('#update_form');
    var fd=new FormData( form[0] );
        fd.append('id', document.querySelector('input[name="name"]').id );

    url:'update.php',  
    method:'POST',  
    data: fd,  
    beforeSend:function(){  
        $('#update').val('Geupdate!');  
    },  
    success:function(data){  
        form[0].reset();  
        $('#add_data_Modal').modal('hide');  
        $('#employee_table').html(data);  
    }  
});

POST多个AJAX数据

3 个答案: