如何使用jquery将已编辑的数据从表中保存回数据库答案

【问题标题】：How to save edited data from a table back to the database with jquery如何使用jquery将已编辑的数据从表中保存回数据库
【发布时间】：2016-12-14 20:57:38
【问题描述】：

我有一个表格，用户可以点击该行然后编辑该行。我现在希望能够将其保存回数据库。我怎样才能做到这一点？我只是不确定如何创建 ajax 调用来运行它。

// overlay functions
function openOverlay(){
  document.getElementById("pageOverlay").style.visibility = "visible";
}
function closeOverlay(){
  document.getElementById("pageOverlay").style.visibility = "hidden";
}
// show row data to be edited or view single row
$(".rowEditData").click(function() {
     html = "<div id='editableTableDiv'><label class='editRowLabel'>Shape Name:</label> <input type='text' class='mdl-textfield__input' name='shapeName' value="+ $(this).find('td').eq(0).html() + "><br><label class='editRowLabel'>Number Edges:</label> <input type='text' class='mdl-textfield__input' name='numberEdges' value="+ $(this).find('td').eq(1).html() + "><br><label class='editRowLabel'>Sum of Interior Angles:</label> <input type='text' class='mdl-textfield__input' name='sumAngles' value="+ $(this).find('td').eq(2).html() + "><br><br><input type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' value='Save' onclick='saveNewRowData()'>&nbsp;&nbsp;&nbsp;<input type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' value='Close' onclick='closeOverlay()'></div>";
  $("#pageOverlay").html(html).show();
  openOverlay();
});

function saveNewRowData(){
    shapeName = $("input[name=shapeName]").val();
    numberEdges = $("input[name=numberEdges]").val();
    sumAngles = $("input[name=sumAngles]").val();
    $.ajax({
        url: "someURLhere.php",
        data: data,
        type: "post"
    });
}

#pageOverlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 99;
}
#pageOverlay div {
  padding: 1%;
  width: 30%;
  height: 80%;
  margin: 100px;
  margin-left: 35%;
  background-color: rgb(255, 255, 255);
}
.editRowLabel {
  font-weight:bold; 
  font-size:16px;
}

<link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageOverlay"></div>
<table id="dataTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp dataTable no-footer" role="grid">
  <thead>
    <tr role="row">
      <th class="mdl-data-table__cell--non-numeric sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Shape Name: activate to sort column descending" style="width: 401px;">Shape Name</th>
      <th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Number Edges: activate to sort column ascending" style="width: 436px;">Number Edges</th>
      <th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Sum of Interior Angles: activate to sort column ascending" style="width: 638px;">Sum of Interior Angles</th>
    </tr>
  </thead>
  <tbody>
    <tr class="rowEditData odd" value="7924" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">Hexagon</td>
      <td class="mdl-data-table__cell--non-numeric">6</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
    <tr class="rowEditData even" value="7923" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
      <td class="mdl-data-table__cell--non-numeric">6</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
    <tr class="rowEditData odd" value="7930" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
      <td class="mdl-data-table__cell--non-numeric">3</td>
      <td class="mdl-data-table__cell--non-numeric">180</td>
    </tr>
    <tr class="rowEditData even" value="7931" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
      <td class="mdl-data-table__cell--non-numeric">4</td>
      <td class="mdl-data-table__cell--non-numeric">360</td>
    </tr>
    <tr class="rowEditData odd" value="7932" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
      <td class="mdl-data-table__cell--non-numeric">5</td>
      <td class="mdl-data-table__cell--non-numeric">540</td>
    </tr>
    <tr class="rowEditData even" value="7933" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
      <td class="mdl-data-table__cell--non-numeric">6</td>
      <td class="mdl-data-table__cell--non-numeric">120</td>
    </tr>
    <tr class="rowEditData odd" value="7934" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
      <td class="mdl-data-table__cell--non-numeric">10</td>
      <td class="mdl-data-table__cell--non-numeric">1440</td>
    </tr>
    <tr class="rowEditData even" value="7925" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">Octagon</td>
      <td class="mdl-data-table__cell--non-numeric">8</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
    <tr class="rowEditData odd" value="7922" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">pentagon</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
    <tr class="rowEditData even" value="7926" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">Pentagon</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
    <tr class="rowEditData odd" value="7920" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">square</td>
      <td class="mdl-data-table__cell--non-numeric">4</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
    <tr class="rowEditData even" value="7927" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">Square</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
    <tr class="rowEditData odd" value="7928" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">Square</td>
      <td class="mdl-data-table__cell--non-numeric">4</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
    <tr class="rowEditData even" value="7921" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">trapezoid</td>
      <td class="mdl-data-table__cell--non-numeric">4</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
    <tr class="rowEditData odd" value="7919" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">triangle</td>
      <td class="mdl-data-table__cell--non-numeric">3</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
    <tr class="rowEditData even" value="7929" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">Triangle</td>
      <td class="mdl-data-table__cell--non-numeric">3</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

你知道如何处理来自Ajax请求的服务器端的请求吗？
我不是 100% 确定如何处理它。我知道我需要使用 ajax 将其保存回数据库，但只是不确定如何设置该功能
您的网址为空。你将它保存到什么，一个php页面，网络服务，什么？您希望它以已发布的表单还是 JSON 形式返回？
我更新了 ajax 函数，现在得到了正确的值。现在我只需要创建 ajax 调用和 php 脚本。

标签： javascript jquery html css ajax

【解决方案1】：

您需要连接到数据库的一件事

你需要对每一行进行 ajax

$(document).ready(function() {$('#btn').click(function(e) {

    e.preventDefault();

    $('#yourTable tr').each(function(i, tr) {

        var postData = {
            CoumnName : $('.row-class').val(),
            ColumnName : $('.row-class').val()
        }

        console.log(postData);

        $.ajax({
            type: "post",
            url: "/your url",
            data: postData
        })
        .done(function(response) {
            console.log(response);
            alert("Success!");
        })
        .fail(function(x, status, error) {
            alert("Error: " + error);
        });
    });
});

});

【讨论】：

【解决方案2】：

这是我想出的作品。我只是使用一个 php 脚本然后将数据保存到数据库中。

    function saveNewRowData(){
      shapeName = $("input[name=shapeName]").val();
      numberEdges = $("input[name=numberEdges]").val();
      sumAngles = $("input[name=sumAngles]").val();
      $.ajax({
          type: "POST",
          url: "saveNewData.php",
          data: {shapeName: shapeName, numberEdges: numberEdges, sumAngles: sumAngles},
          success: function(response){

          }
      });
    }

【讨论】：

我不久前试图做这样的事情。很高兴我能找到这个答案。