如何实现下拉选单触发PostgreSQL写入后直接读取展示到Leaflet地图

问题核心是AJAX的异步特性导致的：你同时调用写入和读取请求时，读取请求可能在写入请求完成前就发送到服务器，此时数据库还没完成数据插入，自然返回空数组。要实现选择选项后自动完成「写入→读取→渲染地图」的流程，关键是让读取操作等待写入操作完成后再执行，以下是两种可行方案：

方法1：在写入请求的成功回调中触发读取 #

修改insert_function，把读取操作放在AJAX请求的success回调里，确保只有写入成功后才发起读取请求：

function insert_function(selectedValue) {
  $.ajax({
    url: 'insert_query.php',
    method: 'POST',
    data: { value: selectedValue },
    success: function(response) {
      // 写入成功后立即执行读取
      read_function();
    },
    error: function(xhr) {
      console.error('数据写入失败:', xhr.responseText);
    }
  });
}

// 下拉选单触发函数只需调用写入操作
function handleData() {
  const selectedVal = document.getElementById('你的下拉选单ID').value;
  insert_function(selectedVal);
}

方法2：用Promise+async/await控制异步顺序 #

把AJAX请求封装成Promise，用async/await让代码按顺序执行，逻辑更直观：

// 封装AJAX为Promise函数
function sendAjax(url, method, data) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      method: method,
      data: data,
      success: resolve,
      error: reject
    });
  });
}

// 异步处理写入+读取+渲染流程
async function handleData() {
  const selectedVal = document.getElementById('你的下拉选单ID').value;
  try {
    // 等待写入操作完成
    await sendAjax('insert_query.php', 'POST', { value: selectedVal });
    // 写入完成后执行读取
    const mapData = await sendAjax('read_query.php', 'GET');
    // 将数据渲染到Leaflet地图
    renderMapMarkers(mapData);
  } catch (err) {
    console.error('操作出错:', err);
  }
}

// 地图渲染示例函数
function renderMapMarkers(mapData) {
  // 先清空原有标记
  map.eachLayer(layer => {
    if (layer instanceof L.Marker) map.removeLayer(layer);
  });
  // 添加新标记
  mapData.forEach(item => {
    L.marker([item.lat, item.lng]).addTo(map).bindPopup(item.name);
  });
}

额外检查点 #

1. 确认insert_query.php中没有未提交的事务：PostgreSQL使用事务时，必须执行COMMIT才能让写入的数据被后续查询读取到。
2. 检查read_query.php的查询逻辑，确保没有筛选条件错误导致读取不到刚写入的数据。

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