使用 AJAX 和 POST 运行 php 脚本

我对 AJAX 很陌生。我用返回 HTML 的 javascript 做了一些，但我正在努力解决我认为应该非常简单的事情。

我有一个带有内联元素的标题：

<header>
  <span class="right_alignment">
    <a id="delete_work" href="">
      <input id ="work_id" type="hidden" value="<?php echo $work_id ?>"/>
      <i class="fa fa-plus" aria-hidden="true">
      </i>
    </a>
  </span>
</header>

我想将 $work_id 发送到执行删除数据库中此记录的 MySQL 查询的 PHP 脚本。它必须是一个 POST 请求，因为它是一个内联元素，所以我不能使用表单。所以 AJAX 是方法。这是我的尝试：

$( document ).ready(function() {
  $("#delete_work").click(function () {
    $.ajax({
      url: 'scripts/script-delete-work.php',
      type: 'POST',
      data: $('#work_id').val(),
    });
  });
});

现在 script-delete-work.php 别让我担​​心，所以很简单：

$edition_id = $_POST['work_id'];
echo $work_id;

但是这个设置不起作用。我知道它是 AJAX 的最简单形式，但我无法弄清楚如何发送数据或失败的原因。有什么帮助吗？

谢谢！

编辑 - 好的，我解决了数据问题。我现在拥有的是：

HTML

<span class="span_edit_right">
  <a id="delete_work" href="">
    <input id="work_id" type="hidden" value="<?php echo $work_id; ?>"/>
        <i class="fa fa-trash-o" aria-hidden="true">
        </i>
  </a>
</span>

脚本：

$( document ).ready(function() {
  $("#delete_work").click(function () {
    var val = $('#work_id').val();
    $.ajax({
      url: 'scripts/script-delete-work.php',
      type: 'POST',
      data: { "work_id" : val },
      success: function ()
      {
        alert("works!");
      }
    });
  });
});

PHP

<?php echo $_POST['work_id'];

当我点击#delete_work它时会返回 alert"works"并重新加载页面，但不显示带有<?php echo $_POST['work_id'];.