javascript - 使用/编辑和保存按钮在多个输入字段上提交 AJAX

Question

我想在多个输入上使用 ajax 提交(无需重新加载页面)。所以我有一个表单，其中有几个带有编辑和保存按钮的输入字段。当用户点击编辑时，它会聚焦于该输入字段并使用 ajax 保存。

问题是，如何在不重新加载页面的情况下使用 ajax 提交保存按钮，并且只有编辑的字段会在保存时更改。

这是我的 html 和 js:

HTML

<br>
<br>
<label>Fullname</label>
<div class="input-group">
    <input type="text" class="form-control" placeholder="Fullname" value="John Doe" readonly> <span class="input-group-btn">
        <button class="btn btn-default btn-edit" type="button">EDIT</button>
         <button class="btn btn-default btn-save" type="button">SAVE</button>
         <button class="btn btn-default btn-cancel" type="button">CANCEL</button>
      </span>

</div>
<br>
<label>Nickname</label>
<div class="input-group">
    <input type="text" class="form-control" placeholder="Nickname" value="John" readonly> <span class="input-group-btn">
        <button class="btn btn-default btn-edit" type="button">EDIT</button>
         <button class="btn btn-default btn-save" type="button">SAVE</button>
         <button class="btn btn-default btn-cancel" type="button">CANCEL</button>
      </span>

</div>

JS

jQuery(document).ready(function () {
    $('.btn-save, .btn-cancel').hide();
    var inputVal;

    $('.btn-edit').click(function () {
        $(this).closest('div').find('.btn-edit').hide();
        $(this).closest('div').find('.btn-save, .btn-cancel').show();
        $(this).closest('div').find('input').removeAttr('readonly').focus();
        inputVal = $(this).closest('div').find('input').val();
    });

    $('.btn-save').click(function () {
        $(this).closest('div').find('input').attr('readonly', 'readonly');
        $(this).closest('div').find('.btn-save, .btn-cancel').hide();
        $(this).closest('div').find('.btn-edit').show();
    });

    $('.btn-cancel').click(function () {
        $(this).closest('div').find('input').val(inputVal);
        $(this).closest('div').find('input').attr('readonly', 'readonly');
        $(this).closest('div').find('.btn-save, .btn-cancel').hide();
        $(this).closest('div').find('.btn-edit').show();
    });


});

我在 JSFiddle 上创建了一个演示。请帮忙....

DEMO

Answer 1

在您的保存按钮中放置 ajax 请求 onclick:

$('.btn-save').click(function () {
    $(this).closest('div').find('input').attr('readonly', 'readonly');
    $(this).closest('div').find('.btn-save, .btn-cancel').hide();
    $(this).closest('div').find('.btn-edit').show();
    var inputValue=$(this).closest('div').find('input').val();
    $.ajax({  URL:"submit url",
              type:"POST",
              data:{  inputValue:inputValue  },
              success:function(data){
                                   // do whatever you want with the response      
                                 }
           });
});

如 Euphoria 所说，请阅读有关 jQuery ajax 文档的更多信息。