javascript - 重构 AJAX 帖子的功能：获取更改的字段 ID 并使用 AJAX 发布它的值

Question

我是一个新开发人员，问我的第一个 SO 问题:)。处理具有一些基于 ASP.NET MVC 中相应文本输入的计算字段的表单。本质上，从文本框中获取值，AJAX 将该值发布到控制器，执行计算，将该数据返回到只读计算字段。

我有以下代码用于此工作：

$("#volume").focusout(function () {
           volume = $(this).val()

           $.ajax({
               type: "POST",
               url: '/StaffingPlan/CalculatorAction',
               data: { volume: volume },
               dataType: "json",
               success: function (data) {
                   console.log(data);
                   $("#selectorsNeeded").val(data);
               }
           });
       });

$("#drops").focusout(function () {
           drops = $(this).val()

           $.ajax({
               type: "POST",
               url: '/StaffingPlan/CalculatorAction',
               data: { drops: drops },
               dataType: "json",
               success: function (data) {
                   console.log(data);
                   $("#liftsNeeded").val(data);
               }
           });
       });

在控制器中：

public ActionResult CalculatorAction(string volume, string drops)
        {

            int data = 0;

            //one calculation performed for volume, but will be others to calculate
            if (volume != null && volume != "")
            {
               data = Int32.Parse(volume) / 150 / 9;
            }

            //example of another calc
            if (drops != null && drops != "")
            {
                data = Int32.Parse(drops) / 25 / 6;
            }
            
            return Json(data, JsonRequestBehavior.AllowGet);
        }

这是可行的，但是，表单还有其他几个输入和计算字段。显然，有更好/更干的方法来编写它，而不是复制 .focusout 函数。只获取更改的字段 ID 并将值分配给适当的变量会很好。希望这是有道理的！任何方向将不胜感激。

标签： javascriptc#ajaxasp.net-mvc

Answer 1

将您的代码更改为：

$("#volume").focusout(function () {
 
 var data= { volume: $(this).val()},
 var resultField=  $("#selectorsNeeded");
  calculateResult(data, resultField);
     });    

$("#drops").focusout(function () {
   
          var data= { drops: $(this).val() },
           var resultField=  $("#liftsNeeded");
        calculateResult(data, resultField);
     });   

function calculateResult (data, resultField) {
           $.ajax({
               type: "POST",
               url: '/StaffingPlan/CalculatorAction',
               data: data,
               dataType: "json",
               success: function (result) {
                   console.log(result);
                 resultField.val(result);
               }
           });
       };