解决AJAX POST成功后内容瞬时消失的问题

霞舞

发布时间：2025-09-15 09:52:28

|

424人浏览过

|

来源于php中文网

原创

function Delete_ID(event) {
  // 阻止事件的默认行为，例如表单提交或链接跳转
  event.preventDefault(); 

  // 获取被点击的按钮元素
  const clickedBtn = event.target; 

  // ... 后续逻辑保持不变，或根据最佳实践进行优化
}

';
  for ($ii=0; $ii < count($list_programs); $ii++) {
    $html .= <<
       
        {$list_programs[$ii]["Program_Name"]}
        Delete
        Edit
      
    
    HTML;
  }
}
echo $html;
echo "

注意：我们将按钮的type属性设置为"button"，这可以从根本上避免其触发表单提交，即使忘记preventDefault()也不会导致页面重载。如果需要按钮在某些情况下提交表单，则应保留默认的type="submit"并依赖preventDefault()。这里为了简化和增强健壮性，我们将其明确设为"button"。同时，我们添加了一个通用的action-button类，并使用data-action属性来区分删除和编辑操作。

保君发企业网站系统1.0

保君发免费网站系统使用说明：一、 本程序完全免费，并且，保证功能全部可以使用，且无后门及木马等，请放心使用。二、 如果发现问题，请及时联系我们，我们会义务尽力解决所反映的问题。或到本公司网站下载更新程序。三、 修改三个文件就能成为自己的网站：1、顶部图片LOGO.GIF，2、替换透明动画：LOGO.SWF，3、修改#sys123.asp中的内容为你想要的内容。

下载

2. 使用jQuery进行事件绑定

避免在HTML中直接使用onclick属性，而是通过JavaScript（例如jQuery）来绑定事件监听器。这有助于保持HTML的清洁和行为与结构的分离。

修改后的JavaScript事件绑定：

// 当DOM加载完成后执行
$(document).ready(function() {
  // 为所有具有 'action-button' 类的按钮绑定点击事件
  $('.action-button').click(function(event) {
    event.preventDefault(); // 确保阻止默认行为

    const clickedBtn = $(this); // 获取被点击的jQuery对象

    // 从data属性中获取值
    const actionType = clickedBtn.data('action'); // 'Delete' 或 'Edit'
    const nameHash = clickedBtn.data('nameHash');
    const programName = clickedBtn.data('programName');

    let my_data = {
      "passvalue": actionType,
      "passid": nameHash,
      "passname": programName
    };

    // 执行AJAX请求
    $.ajax({
      type: 'POST',
      url: '../Programs/Programs.php',
      data: my_data,
      success: function (data) {
        $('#ProgramsTable').load("../Programs/ProgramChange.php"); // 重新加载表格数据
        $('#update-div').html(data); // 显示操作结果消息或编辑表单
      },
      error: function(xhr, status, error) {
        console.error("AJAX Error: ", status, error);
        $('#update-div').html('
操作失败，请重试。
');
      }
    });
  });
});

3. 优化PHP处理逻辑

Programs.php中的处理逻辑可以保持不变，它根据passvalue来决定执行删除或返回编辑表单。

Programs.php (保持不变):

';
      echo '     
';
      echo '    
';
      echo '    
';
      echo '