AJAX请求返回数据无法在客户端展示及模态框无法关闭问题排查求助

嘿，我看到你现在遇到了两个头疼的问题：AJAX返回的洪涝区域提示没法正常展示，还有点击保存后模态框关不掉。咱们一步步拆解问题，逐个修复：

1. 先搞定AJAX回调的致命拼写错误 #

你的客户端脚本里，AJAX的回调参数写成了succcess——多了一个c！这个错误直接导致回调函数根本不会执行，所以模态框关不掉、数据也没法处理，这是最核心的问题，先改过来！

2. 服务器端返回格式与客户端解析不匹配 #

你客户端里写了JSON.parse(dataResult)，但服务器端输出的是纯文本字符串，不是标准JSON格式，这会直接触发解析报错，代码自然没法往下走。这里有两种修复思路：

方案一：调整服务器端返回标准JSON（推荐） #

修改服务器端脚本，返回包含状态码和提示信息的JSON，这样客户端能正确解析：

$prenom = $_GET['nPrenom'];
$quartier = $_GET['nQuartier'];
$long = $_GET['nLong'];
$lat = $_GET['nLat'];

// 修复SQL注入风险！用参数绑定替代直接拼接变量
$req = "SELECT type_zari FROM zari WHERE ST_Intersects(geom, ST_SetSRID(ST_Point(?, ?), 4326));";
$resultat = $dbconn->prepare($req);
$resultat->execute([$long, $lat]);

// 初始化默认提示
$message = "Vous n'etes pas sur une zone a risque d'inondation";
// 取第一条匹配结果（一个点只会属于一个洪涝等级区域）
$data = $resultat->fetch(PDO::FETCH_ASSOC);
if ($data) {
    switch($data['type_zari']) {
        case 'ZARIE':
            $message = "Vous etes sur une zone a risque d'inondation tres eleve";
            break;
        case 'ZARIM':
            $message = "Vous etes sur une zone a risque d'inondation moyenne";
            break;
        case 'ZARIF':
            $message = "Vous etes sur une zone a risque d'inondation faible";
            break;
    }
}

// 返回标准JSON格式
echo json_encode([
    'statusCode' => 200,
    'message' => $message
]);

这里还顺便修复了两个小问题：

• 用参数绑定解决了SQL注入风险（直接拼接变量到SQL里非常危险）
• 用switch替代原有的in_array判断，逻辑更清晰，而且只取第一条结果（一个点不可能同时在多个洪涝等级区域）

方案二：保持服务器端纯文本输出，调整客户端逻辑 #

如果不想改服务器端，客户端要去掉JSON.parse，直接处理返回的文本：

success: function(dataResult){
    $('#pointadding').modal('hide');
    // 创建提示元素插入到地图容器，或者直接用alert展示
    $('<div class="alert alert-warning" style="position:absolute; top:20px; left:20px; z-index:9999;">' + dataResult + '</div>').appendTo('#map');
}

3. 最终修复后的客户端脚本 #

结合上面的修改，客户端脚本应该改成这样：

function saveDataToDB(){
    var nomPrenom = document.getElementById('userName').value;
    var quartier = document.getElementById('areaSelect').value;
    var long = clickedCoord[0];
    var lat = clickedCoord[1];
    
    if(nomPrenom != '' && quartier != '' && long != '' && lat != ''){
        $.ajax({
            url: 'getPosition.php',
            type:'GET',
            dataType: 'json', // 指定返回类型为JSON，jQuery会自动解析
            data:{
                nPrenom: nomPrenom,
                nQuartier: quartier,
                nLong: long,
                nLat: lat
            },
            success: function(response){ // 拼写正确的success
                if(response.statusCode == 200){
                    $('#pointadding').modal('hide');
                    // 创建浮动提示框插入到地图上，5秒后自动消失
                    var alertElement = $('<div class="alert alert-info" style="position:absolute; top:20px; left:20px; z-index:9999; padding:10px; background:white; border-radius:4px;">' + response.message + '</div>');
                    $('#map').append(alertElement);
                    
                    setTimeout(function(){
                        alertElement.fadeOut();
                    }, 5000);
                } else{
                    alert('Something went wrong');
                }
            },
            error: function(xhr, status, error){
                // 增加错误回调，方便调试
                console.error('AJAX请求出错:', error);
                alert('Erreur lors de la requête: ' + error);
            }
        });
    } else{
        alert('Fill complete information');
    }
}

额外提醒 #

一定要修复服务器端的SQL注入问题！原代码直接把$long和$lat拼接到SQL里，恶意用户很容易通过构造参数攻击你的数据库，用方案一里的参数绑定就能解决这个风险。

内容的提问来源于stack exchange，提问作者Hubert Djéteinboua