ajax成功后保存输入数据并在文本框中添加图标答案

【问题标题】：Save input data and add icon inside textbox after ajax successajax成功后保存输入数据并在文本框中添加图标
【发布时间】：2017-07-03 07:46:23
【问题描述】：

我想通过自己的id 保存每个输入文本，并在 ajax 成功后将图标附加到该输入中。

HTML：

    <div class="form-group has-feedback autosave">
        <input type="text" class="form-control" id="fname" name="fname" placeholder="Your name"/>
        <i class="form-control-feedback"></i>
    </div>

    <div class="form-group has-feedback autosave">
        <input type="text" class="form-control" id="lname" name="lname" placeholder="Your lastname"/>
        <i class="form-control-feedback"></i>
    </div>

Javascript：

$(document).on('blur', '.autosave input', function(e) { 
//when input inside .autosave was blurred
  var _id=$(this).attr('id');//id
  var _val=$(this).val();//value

    $.ajax({
        type: 'POST',
        url: 'save.php',
        data: {id:_id,val:_val},//send id and val
        dataType: 'json',
        success:function(data){
          $(_id).addClass('fa fa-check');//addclass when succeed
          console.log(data);//debug
        },//success
    });//$.ajax
  });

我计划在提交成功时在每个输入中显示检查图标。所以这个想法是从每个输入中获取id 和val。并通过 ajax 将其发送到 db。响应后，该输入将更新为带有特定id 的图标。

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

您不需要使用元素的id - 您可以存储对运行函数的this 的引用，并在$.ajax 成功处理程序中使用它。试试这个：

$(document).on('blur', '.autosave input', function(e) { 
  var $el = $(this);

  $.ajax({
    type: 'POST',
    url: 'save.php',
    data: {
      id: $el.prop('id'),
      val: $el.val()
    },
    dataType: 'json',
    success: function(data) {
      $el.addClass('fa fa-check');
      console.log(data); //debug
    },
  });
});

【讨论】：

使用 ID 有什么问题？我认为OP只需要像$("#"+_id)一样添加#？
没有什么“错误”，因为它不会起作用。但是，当您已经通过 this 引用了该元素时，它会变得更慢、更丑陋且不必要
@RoryMcCrossan 你的方法有效！但是成功后的addClass 没有触发。这可以在不定义元素的情况下将fa fa-check 添加到i.form-control-feedback 吗？？？
@RoryMcCrossan，经过多次测试。我仍然找不到仅在其父级上触发addClass 的解决方案。当成功返回时，所有输入都会呈现fa fa-check，而不仅仅是input
@Wilf 您可以使用当前代码更新 OP，以显示对以前的 OP 所做的更改

【解决方案2】：

终于，经过一番大尝试。我找到了解决方案。感谢@RoryMcCrossan，他给了我最初的想法。

Javascript ...

    success: function(resp) {
        $this.closest('.form-line').find('i').removeClass('fa fa-check').addClass('fa fa-check');               
        $this.closest('.form-group div.form-line').addClass('success has-success');
        console.log(resp); //debug
    },

唯一不同的是成功后的流程。它看起来很乱，但工作。如果您有任何更短的模式将不胜感激。

【讨论】：

.removeClass('fa fa-check').addClass('fa fa-check') 这似乎是多余的代码行