javascript - 在 jquery 中规范化各种表单输入值

Question

我有以下重复代码:

// (3) Change to whether user has an acceptable rate or not
$('.rate-ok').on("change", function(event) {
    var id = $(this).data('id');
    var field = "rate_ok";
    var value = $(this).is(':checked');
    console.log(id, field, value)
    $.post('/update_data/', {'id': id, 'field': field, 'value': value}, function (response) {
        location.reload();
    })
});

// (4) Change on status
$('.status').on("change", function(event) {
    var id = $(this).data('id');
    var field = "status";
    var value = $(this).find(":selected").val();
    console.log(id, field, value)
    $.post('/update_data/', {'id': id, 'field': field, 'value': value}, function (response) {
        location.reload();
    })
});

它的作用是更新数据库表如下:

UPDATE table SET field=value WHERE id=id

不过，将这两个函数压缩为一个函数会简单得多。但是，value 部分并不相同——一个是复选框，另一个是选择下拉列表。有没有办法在单个函数中获取这两项的“值”(不仅仅是添加 if 语句——但希望根据输入类型提供更通用的东西。

Answer 1

一种方法是概括字段更新部分:

function updateField(id, field, value) {
  console.log(id, field, value);
  $.post('/update_data/', {'id': id, 'field': field, 'value': value}, function (response) {
    location.reload();
  });
}

// (3) Change to whether user has an acceptable rate or not
$('.rate-ok').on("change", function(event) {
  updateField($(this).data('id'), 'rate_ok', $(this).is(':checked'));
});

// (4) Change on status
$('.status').on("change", function(event) {
  updateField($(this).data('id'), "status", $(this).find(":selected").val());
});