ajax $_POST 数据然后重定向到新页面

Question

在过去的 2 周里，我一直在疯狂地试图让它发挥作用。我正在调用 MySQL Db，并在表中显示数据。在此过程中，我正在创建删除和编辑记录的 href 链接。删除会发出警报并保持在同一页面上。 EDIT 链接将 POST 数据然后重定向到 editDocument.php

这是我的 PHP：

 <?php
 foreach ($query as $row){
        $id =  $row['document_id'];
        echo ('<tr>');
        echo ('<td>' . $row [clientName] . '</td>');
        echo ('<td>' . $row [documentNum] . '</td>');

        echo "<td><a href='**** I NEED CODE HERE ****'>Edit</a>";

        echo " / ";
        echo "<a href='#' onclick='deleteDocument( {$id} );'>Delete</a></td>";
        // this calls Javascript function deleteDocument(id) stays on same page
        echo ('</tr>');   
 } //end foreach
 ?>

我尝试了（没有成功）AJAX 方法：

<script>
function editDocument(id){
  var edit_id = id;
     $.ajax({
        type: 'POST',
        url: 'editDocument.php',
        data: 'edit_id='edit_id,
        success: function(response){
          $('#result').html(response);
        }
     });
}
</script>

我一直在 editDocument.php 上使用<? print_r($_POST); ?> 来查看 id 是否已发布。

我意识到 jQuery/AJAX 是我需要使用的。我不确定是否需要使用onclick、.bind、.submit 等。

这是我需要的代码的参数：

1. 发布 $id 值：$_POST[id] = $id
2. 重定向到 editDocument.php（我将在其中使用 $_POST[id]）。
3. 不影响页面上的其他<a> 或任何其他标签。
4. 如果需要，我希望 AJAX “虚拟”创建任何 <form>。我不 想把它们放在我的 PHP 代码中。
5. 我不想使用按钮。
6. 我不想使用 $_GET。

我不知道我错过了什么。我一直在搜索 stackoverflow.com 和其他网站。我一直在尝试示例代码。我认为我“不能透过树木看到森林”。可能是另外一双眼睛。请帮忙。

提前谢谢你。

更新：

根据 Dany Caissy 的说法，我不需要使用 AJAX。我只需要 $_POST[id] = $id;并重定向到editDocument.php。然后我将在 editDocument.php 上使用查询来创建一个粘性表单。

Answer 1

我和你遇到了同样的问题。我还想在 ajax 发布后重定向到新页面。 所以所做的只是改变了成功：回调到这个

success: function(resp) {
        document.location.href = newURL; //redirect to the url you want
    }

我知道它违背了 ajax 的全部目的。但是我必须从几个选择框中获取值，而不是传统的提交按钮，我有一个带有自定义样式的自定义锚链接。所以我很快发现这是一个可行的解决方案。

Answer 2

鉴于您的评论，我认为您可能正在寻找这样的东西：

<a href='#' class="editLink" data-id="123">Edit</a>

$(document).ready(function() {
    $('.editLink').click(function(e) {
        e.preventDefault();
        var $link = $(this);
        $('<form/>', { action: 'editdocument.php', method: 'POST' })
            .append('<input/>', {type:hidden, value: $link.data('id') })
            .appendTo('body')
            .submit(); 
    });
});

现在，我不一定同意这种方法。如果您的用户有权编辑具有给定 ID 的项目，那么他们是直接访问它（例如通过书签）还是通过单击列表上的链接来访问它都无关紧要。您想要的方法还可以防止用户在新选项卡中打开链接，我个人觉得这非常烦人。

编辑 - 另一个想法：

也许当用户点击一个编辑链接时，它会弹出一个编辑表单，其中包含要编辑的项目的详细信息（如果需要，可以通过 ajax 作为 JSON 检索详细信息）。不是新页面，只是列表页面顶部的 jQuery 模式。当用户点击提交时，通过ajax发布所有编辑的数据，并更新sql数据库。我认为这将是一种更人性化的方法，可以满足您的要求。

Answer 3

您的$.ajax(); 请求中有一个SyntaxError: Unexpected identifier

<script>
function editDocument(id){
  var edit_id = id;
     $.ajax({
        type: 'POST',
        url: 'editDocument.php',
        data: 'edit_id='edit_id,
        success: function(response){
          $('#result').html(response);
        }
     });
}
</script>

应该是这样的

<script>
function editDocument(id){
  var edit_id = id;
     $.ajax({
        type: 'POST',
        url: 'editDocument.php',
        data: {edit_id: edit_id},
        success: function(response){
          $('#result').html(response);
        }
     });
}
</script>

注意我更改的'edit_id='edit_id,，如果你希望它是一个字符串，它会像这样'edit_id = ' + edit_id，但通常使用像这样{edit_id: edit_id}或{'edit_id': edit_id}这样的对象

你也可以像这样为编辑按钮使用表单

<form action="editDocument.php" method="POST">
   <input type="hidden" name="edit_id" value="272727-example" />
   <!-- for each data you need use a <input type="hidden" />  -->
   <input type="submit" value="Edit" />
</form>

或者在Javascript中你可以这样做

document.location = 'editDocument.php?edit_id=' + edit_id;

这将自动重定向用户

Answer 4

当您需要与数据库通信而无需重新加载页面，因为您的网站上的某些用户操作时，使用 AJAX。

在你的情况下，你想重定向你的页面，在你使用 AJAX 修改数据库之后，它没有什么意义。

您应该做的是将您的数据放入一个表单中，您的表单操作应该指向您的 EditDocument，此页面将处理您的 POST/GET 参数并执行您需要完成的任何数据库交互。

简而言之：如果您认为需要在 AJAX 调用后重定向用户，则不需要 AJAX。