如何在PHP的echo标签内调用Ajax实现无刷新操作

问题分析 #

原代码在第一个Ajax请求成功后自动触发第二个Ajax，但实际需求是用户点击PHP输出的「Atualizar」按钮才执行后续操作；同时动态生成的元素未通过事件委托绑定事件，导致点击无响应。

修改步骤 #

1. 调整Ajax脚本逻辑 #

移除自动触发的第二个Ajax，改为给动态生成的按钮绑定点击事件，同时修正URL错误、完善交互状态：

$(document).on('submit', '#uploadFile', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  $.ajax({
    method: "POST",
    url: "../../sisbltg/function/atualizaPlanilha.php",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    beforeSend: function() {
      $('input[type="submit"][name="enviaBtn"]').attr('disabled', 'disabled');
    },
    success: function(data) {
      $('input[type="submit"][name="enviaBtn"]').removeAttr('disabled');
      $('#uploadedData').html(data);
      
      // 给动态生成的「Atualizar」按钮绑定点击事件（事件委托）
      $(document).off('click', '#atualizar').on('click', '#atualizar', function(e) {
        e.preventDefault();
        $('#atualizar').attr('disabled', 'disabled');
        
        $.ajax({
          type: "POST",
          url: "../../sisbltg/function/executaSqlOutage.php", // 修正原URL多写的.php后缀
          data: {}, // 如需传递参数，可在此处添加（如文件处理后的唯一标识）
          success: function() {
            // 隐藏原表单，显示更新提示
            $('.envioDados').hide();
            $('#uploadedData').html('<p style="text-align:center; font-size:18px;">已更新</p>');
          },
          error: function() {
            alert('更新失败，请重试');
            $('#atualizar').removeAttr('disabled');
          }
        });
      });

      // 绑定「Cancelar」按钮事件
      $(document).off('click', '[name="cancelar"]').on('click', '[name="cancelar"]', function() {
        $('#uploadedData').empty();
      });
    }
  });
});

2. 优化PHP输出的HTML #

移除多余的</body></html>标签（页面已有完整结构），简化无需form标签的按钮区域：

echo '</table>';
echo '<br><br><p align="center">Exibindo os 10 primeiros registros da tabela. Deseja prosseguir com a atualização dos dados?<br>
      <center><div id="atualizouDados">
        <input type="button" class="button" value="Atualizar" id="atualizar">
        <input type="button" value="Cancelar" name="cancelar" class="button2">
      </div></center></p>';

3. 关键注意事项 #

• 动态生成的元素必须通过事件委托绑定事件，确保元素加载后能正常触发交互。
• 若需给第二个PHP脚本传递参数，不要直接传递HTML内容，建议在第一个PHP脚本中返回文件处理后的唯一标识（如ID），再通过Ajax传递该标识。

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