Ajax POST请求被当作PUT执行，新增数据功能异常如何修复？

问题核心是新增和编辑操作共用了同一个save()函数，但该函数只调用了执行PUT请求的editRow()，完全没有处理新增所需的POST逻辑。以下是具体修正步骤：

1. 标记操作状态 #

新增一个全局变量，用来区分当前是「新增」还是「编辑」模式：

// 默认是新增模式，点击编辑按钮时切换为'edit'
let currentOperation = 'add';

2. 修改save()函数，分支处理请求 #

根据当前操作状态，调用对应的新增/编辑接口：

function save() {
  // 统一获取表单数据
  let formData = {
    device_id: itemValue_device_id,
    name: itemValue_edit_name,
    group: itemValue_data_group
  };

  // 分支执行不同请求
  if (currentOperation === 'add') {
    addRow(formData);
  } else {
    editRow(formData);
  }
}

3. 新增addRow()函数处理POST请求 #

专门实现新增数据的POST请求逻辑：

function addRow(data) {
  $.ajax({
    url: "http://192.168.01.10:8000/api/product/",
    type: 'POST',
    contentType: 'application/json', // 根据后端要求设置，通常为JSON格式
    data: JSON.stringify(data),
    success: function(response) {
      // 新增成功后的逻辑：比如刷新数据列表、关闭表单弹窗、提示用户
      console.log('数据新增成功:', response);
      refreshProductList(); // 示例：调用刷新列表的函数
    },
    error: function(xhr) {
      console.error('新增失败:', xhr.responseText);
      alert('新增失败，请检查输入或联系管理员');
    }
  });
}

4. 绑定按钮事件，切换操作状态 #

给「Add New02」和编辑按钮分别绑定事件，设置对应的操作状态：

// 「Add New02」按钮点击事件
$('#addNewBtn').click(function() {
  currentOperation = 'add';
  // 重置表单（清空输入框、恢复默认值等）
  resetForm();
  // 打开表单弹窗或显示表单区域
  showFormModal();
});

// 编辑按钮点击事件（假设编辑按钮有.edit-btn类）
$('.edit-btn').click(function() {
  currentOperation = 'edit';
  // 从当前行获取数据，填充到表单
  let rowData = $(this).closest('tr').data('product');
  itemValue_device_id = rowData.device_id;
  itemValue_edit_name = rowData.name;
  itemValue_data_group = rowData.group;
  // 打开表单弹窗或显示表单区域
  showFormModal();
});

// 辅助函数：重置表单
function resetForm() {
  itemValue_device_id = '';
  itemValue_edit_name = '';
  itemValue_data_group = '';
}

补充说明 #

你之前尝试的X-HTTP-Method-Override头无效，是因为后端大概率没有配置支持该头的解析，而且本质问题是前端根本没触发POST请求，所以这个方案从一开始就解决不了核心问题。

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