Onclick将div转换为输入字段并通过Ajax发送更新的值

Question

此代码将<p>标记更改为inputfields。

我有从database到paragraph标签到tables的数据。

当我单击它时，它变成inputfields。

更改值后，我想将该值更新到数据库中。

为此，我想向ajax request发送我更改为inputfields的值。

    	/**
      We're defining the event on the `body` element, 
      because we know the `body` is not going away.
      Second argument makes sure the callback only fires when 
      the `click` event happens only on elements marked as `data-editable`
    */
    $('body').on('click', '[data-editable]', function(){
      
      var $el = $(this);
                  
      var $input = $('<input/>').val( $el.text() );
      $el.replaceWith( $input );
      
      var save = function(){
        var $p = $('<p data-editable />').text( $input.val() );
        $input.replaceWith( $p );
      };
      
      /**
        We're defining the callback with `one`, because we know that
        the element will be gone just after that, and we don't want 
        any callbacks leftovers take memory. 
        Next time `p` turns into `input` this single callback 
        will be applied again.
      */
      $input.one('blur', save).focus();
      });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p data-editable>First Element</p>
     <p data-editable>Second Element</p>
     <p>Not editable</p>