AJAX post向PHP传递JavaScript变量无响应且控制台无报错如何解决

我正在开发一个基于输入框日期的搜索表单，取消第一个alert的注释后可以正常弹出确认search变量存在，但alert语句之后没有任何反应，浏览器控制台也没有输出任何报错信息，AJAX的success回调完全未触发，既无法将返回结果渲染到id为find_date的div中，也不会弹出返回值的alert、不会在控制台打印返回数据。

前端JS代码 #

$(document).ready(function(){
    $('#find').click(function(){    
        var date = $('#date').val();
        var month = $('#month').val();
        var year = $('#year').val();
        var search = year+'-'+month+'-'+date;
        
        //alert(search); <-- 取消注释后可正常弹出，确认search变量存在    

        $.ajax({
            url:'page/report/find.php',
            method:'post',
            data:{data:search},
            success:function(data){
                $('#find_date').html(data); // <-- 未生效，div无内容
                alert(data);   // <-- 未触发
                console.log(data); // <-- 无控制台输出
            }   
        });     
    });
});

PHP后端代码 #

<?php
error_reporting(E_ALL); 
mysqli_report(MYSQLI_REPORT_ERROR|MYSQLI_REPORT_STRICT);
ini_set('display_errors',1);

if(isset($_POST)){
    //parse_str($_POST['data'],$_POST); 
    $message = $_POST['data'];
} 

echo $message;
?>

前端表单代码 #

<form name="edit" id="edit_frm" method="post">
<table class="edit-table">
    <tr>
        <td colspan="6" align="center">
            <input type="text" id="date" size="1" value="" placeholder="date">&nbsp;-&nbsp;
            <input type="text" id="month" size="1" value="" placeholder="month">&nbsp;-&nbsp;
            <input type="text" id="year" size="2" value="" placeholder="year">&nbsp;
            <input type="button" id="find" value="<< search >>" />
            <div id="find_date"></div>
        </td>
    </tr>
</table>

• 首先给AJAX配置添加error回调，你当前只配置了成功回调，请求出错时自然不会触发success，也不会默认在控制台打印错误，修改后的AJAX配置参考：

$.ajax({
    url:'page/report/find.php',
    type:'post', // 低版本jQuery不支持method属性，替换为type兼容性更强
    data:{data:search},
    success:function(data){
        $('#find_date').html(data);
        alert(data);
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.log('请求错误信息：', status, error, xhr.responseText);
        alert('请求失败：' + error);
    }
});

• 打开浏览器开发者工具的「网络」面板，点击搜索按钮后查看find.php请求的状态：
  • 状态码为404：说明你写的page/report/find.php相对路径错误，调整为正确的接口路径即可
  • 状态码为500：说明PHP代码运行报错，可查看响应内容排查PHP逻辑错误
  • 出现跨域报错：检查前端页面和PHP接口的域名、端口、协议是否一致，不一致需要做跨域处理
• 确认你的jQuery版本，低于1.9.0的版本不支持method配置项，统一替换为type: 'post'即可
• 检查PHP文件开头、结尾是否有多余的空格、BOM头，这些额外输出会导致请求异常

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