将跨度更改为输入并更新我的数据库答案

【问题标题】：Change Span to Input and update my database将跨度更改为输入并更新我的数据库
【发布时间】：2018-09-18 21:25:37
【问题描述】：

我目前正在使用从一些 stackoverflow 帖子中获取的这个 sn-p 代码，

它将跨度元素转换为输入，以便我可以编辑并在之后返回跨度

我怎样才能使它在输入转换回跨度时更新它在 mysql 数据库上的值？

/**
  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 = $('<span 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>
Click on <span data-editable> EDIT</span>

【问题讨论】：

你需要一个 ajax post 调用来写入数据库
目前尚不清楚这其中的哪一部分导致您出现问题。如果你的答案是“全部”，那么你的问题就太宽泛了。您将需要一个 ajax 请求、PHP 代码来处理请求并连接到您的数据库，以及一个 SQL 查询来插入或更新数据库中的值。
输入和返回的 span 正在处理我的代码，我只是不知道如何将存储在输入中的数据传递给将更新我的 mysql 数据库的 php

标签： javascript php jquery html mysql

【解决方案1】：

您应该在 save 函数中处理它

/**
  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 = $('<span data-editable />').text($input.val());
    $input.replaceWith($p);
    // AJAX call to your backend to save $input.val()
  };

  /**
    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>
Click on <span data-editable> EDIT</span>

【讨论】：