如何合并页面加载与按钮点击触发的两个Ajax请求并简化代码？

你可以把两个Ajax请求中重复的逻辑提取成通用函数，大幅减少代码冗余，同时让逻辑更清晰：

<script>
$(document).ready(function() {
  // 封装通用的Ajax请求函数
  function loadContent(dataParam) {
    $.ajax({
      type: "POST",
      url: "filter.php",
      dataType: "html",
      data: dataParam,
      cache: false,
      success: function(response) {
        $("#responsecontainer").html(response);
        alert(response);
      }
    });
  }

  // 页面加载时加载默认内容
  loadContent('default');

  // 绑定按钮点击事件
  $(".myclass").click(function() {
    var value = $(this).val(); // 用val()替代attr('value')更简洁
    console.log(value);
    loadContent('&type=' + value);
  });
});
</script>

关键优化点： #

• 提取通用函数：将重复的Ajax配置（请求类型、URL、缓存设置等）封装到loadContent函数中，只需传入不同的data参数即可发起请求
• 修复变量错误：原代码中第一个请求的success回调里用了未定义的response变量，现在统一使用response作为回调参数
• 简化取值方式：用$(this).val()替代$(this).attr('value')，这是jQuery获取表单元素值的标准写法
• 规范事件绑定：将按钮点击事件的绑定放到$(document).ready()内部，确保DOM元素加载完成后再绑定事件，避免潜在的绑定失败问题

如果需要进一步优化，还可以考虑：

• 给Ajax请求添加错误处理（error回调），避免请求失败时无反馈
• 对data参数进行更规范的格式处理，比如用对象形式传递（{ type: value }），jQuery会自动帮你拼接成正确的表单格式，避免手动拼接字符串可能出现的问题：

  // 示例：用对象传递data参数
  function loadContent(dataParam) {
    $.ajax({
      type: "POST",
      url: "filter.php",
      dataType: "html",
      data: typeof dataParam === 'string' ? dataParam : $.param(dataParam),
      cache: false,
      success: function(response) {
        $("#responsecontainer").html(response);
        alert(response);
      },
      error: function(xhr, status, error) {
        console.error('请求出错:', error);
        alert('加载内容失败，请稍后重试');
      }
    });
  }
  
  // 调用方式调整
  loadContent('default'); // 默认请求
  loadContent({ type: value }); // 按钮点击时的请求
  

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