AJAX调用返回“Undefined array key”错误，请求技术排查帮助

我折腾了好几个小时，AJAX还是没法正常运行，求帮忙！目前用测试数据调试：

引入jQuery #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

我的AJAX代码 #

$.ajax({
    type: 'POST',
    url: 'addsMeal.php',
    dataType:'json', 
    data: ({name: 'Emma'}),
    success: function () {
        console.log("Sent data to addsMeal PHP file successfully.");
    }
});

addsMeal.php代码 #

<?php
    // topFields, newIngredient
    $name = $_POST['name'];
    echo($name);
?>

出现的错误 #

Warning: Undefined array key "name" in C:\xampp\htdocs\GroceryListGenerator\Pages\addsMeal.php on line 3.

控制台显示数据已成功发送...

编辑补充
我最终采用了@ProfessorAbronsius提供的解决方案，修改AJAX代码改为在同一文件中处理数据，该方案完美生效，现在AJAX调用可正常运行，测试时能在浏览器中查看捕获的数据。

内容的提问来源于stack exchange，提问作者Emma Coyle