iQuery ajax请求返回空$ _POST

时间:2016-03-07 22:17:13

标签: javascript php jquery html

我正在创建一个包含上传文件列表的表,我想在最后一列添加一个链接,以允许用户删除相应的文件。我可以简单地使用链接“delete.php?fileid =”,但我更喜欢使用POST请求,所以我决定使用一个表格,将数据库中文件的ID作为隐藏输入传递。

问题:console.log($(this).closest('form')。find(“:input”)。serialize());返回一个空字符串。你能帮助理解根本原因吗?

表单提交代码:

$('.f-delete a'). click(function(e){
        e.preventDefault();
        console.log($(this).closest('form').find(":input").serialize());
        $.ajax({
          type: "POST",
          url: 'delete_image.php',
          dataType: 'json',
          data: $(this).closest('form').find(":input").serialize(),
            success: function(response){
                console.log(response);
            },
            error: function(){
                alert('Error: Could not delete the file');
            }  
        });
    });

标记:

<table class="table table-striped"> 
  <thead> 
    <tr> 
      <th>Title</th>
      <th>Type</th>
      <th>Size</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test file</td>
      <td>image/png</td>
      <td>302.65 KB</td>
      <td>
        <form id="f-1" class="f-delete" method="post" action="delete_image.php">
          <input id="id-1" value="1" type="hidden">
          <a id="a-1" href="">Delete image</a>
        </form>
      </td>
    </tr>
    <tr>
      <td>Test file 2</td>
      <td>image/png</td>
      <td>37.88 KB</td>
      <td>
        <form id="f-2" class="f-delete" method="post" action="delete_image.php">
            <input id="id-2" value="2" type="hidden">
            <a id="a-2" href="">Delete image</a>
        </form>
      </td>
    </tr>                   
  </tbody>
</table>

1 个答案:

答案 0 :(得分:1)

问题在于你的html,使用serialize你的输入应该有名字。例如:

 <input id="id-1" value="1" name="id-1" type="hidden">

序列化使用

 $(this).closest('form').serialize() //return id-1=1

结果https://jsfiddle.net/cmedina/1Lv8gkms/