Как обновить таблицу базы данных с помощью кнопки с AJAX JQuery?

Question

у меня 2 textbox firstName и lastName.Проблема заключается в том, что когда я нажимаю другое textbox, которое является lastName всплывающим alert message, и когда я нажимаю OK, alert message показывают снова и снова.Мне нужно обновить браузер, чтобы удалить alert message.Я хочу обновить информацию, используя button.Когда я нажимаю update button, отображается alert message, а когда я нажимаю OK, моя таблица обновляется, и alert message исчезает.Может ли кто-нибудь помочь мне относительно моей проблемы?

function edit_data(id, text, column_name){
  $.ajax({
    url:"edit.php",
    method:"POST",
    data:{id:id, text:text, column_name:column_name},
    dataType:"text",
    success:function(data){
      alert(data);
    }
  });
}

$(document).on('blur', '.first_name', function(){
  var id = $(this).data("id1");
  var first_name = $(this).text();
  edit_data(id, first_name, "FirstName");
});

$(document).on('blur', '.last_name', function(){
  var id = $(this).data("id2");
  var last_name = $(this).text();
  edit_data(id,last_name, "LastName");
});

$(document).on('click', '.btn_update', function(){
  var id=$(this).data("id10");
  if(confirm("Are you sure you want to update this?")){
    $.ajax({
      url:"update.php",
      method:"POST",
      data:{id:id},
      dataType:"text",
      success:function(data){
        alert(data);
        fetch_data();
      }
    });
  }
});

Answer 1

Рассмотрим следующий код.

function editData(i, t, c) {
  if (i === undefined || t === undefined || c === undefined) {
    return false;
  }
  $.ajax({
    url: "edit.php",
    method: "POST",
    data: {
      id: i,
      text: t,
      column_name: c
    },
    dataType: "text",
    success: function(d) {
      console.log("Success:", d);
    },
    error: function(xhr, txt, err) {
      console.log("AJAX Error: ", xhr, txt, err);
    }
  });
}

function updateData(i) {
  if (i === undefined) {
    return false;
  }
  var $items = $("tr[data-row-id='" + i + "'] input");
  var myData = {
    id: i
  };
  $item.each(function(ind, el) {
    myData[$(el).attr("class")] = $(el).val();
  });
  $.ajax({
    url: "update.php",
    method: "POST",
    data: myData,
    dataType: "text",
    success: function(d) {
      console.log("Success:", d);
      fetch_data();
    },
    error: function(xhr, txt, err) {
      console.log("AJAX Error: ", xhr, txt, err);
    }
  });
}

$(function() {
  var $dt = $("#data-table");

  $dt.on('blur', 'input', function(e) {
    editData($(this).parent().parent().data("row-id"), $(this).val(), $(this).attr("class"));
  });

  $dt.on('click', '.btn_update', function(e) {
    e.preventDefault();
    if (confirm("Are you sure you want to update this?")) {
      updateData($(this).parent().parent().data("row-id"));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="data-table">
  <thead>
    <tr>
      <th>First Name</th>
      <th colspan="2">Last Name</th>
    </tr>
  </thead>
  <tr data-row-id="1001">
    <td><input type="text" class="firstName" value="Homer" /></td>
    <td><input type="text" class="lastName" value="Simpson" />
    </td>
    <td><button class="btnUpdate">Update</button></td>
</table>

Это может помочь вам упростить ваш код.Непонятно, что собирается делать ваша кнопка обновления, и, поскольку я не знаю, что делают ваши PHP-скрипты, трудно предвидеть, что вы пытаетесь выполнить.

Поскольку вы не предоставили MCVEЯ не смог проверить код на предмет работоспособности.Но использование консоли может дать вам гораздо больше деталей, не нарушая взаимодействие с пользователем.Окно предупреждения требует нажатия кнопки, чтобы продолжить, что может изменить взаимодействия.

Вам не нужно использовать <table>, родительский элемент <div> также может работать, но полезно иметь что-то, что может бытьконтейнер для данных, связанных с идентификатором.Я назначил id каждой строке, чтобы упростить обращение.Я предполагаю, что ваша таблица базы данных содержит данные примерно так:

+---------------------------+
| ID | firstName | lastName |
+---------------------------+
|  1 | Homer     | Simpson  |
|  2 | Marge     | Simpson  |
| 99 | Moe       | Szyslak  |
+---------------------------+

Следовательно, нет смысла сохранять ID в каждом <input>, если это возможно.Это действительно ваше дело, так как неясно, как выглядит HTML, опять же, если вы предоставите более полный пример, люди могут помочь в дальнейшем.

Я также подозреваю, что вам нужно обновить ваш update.php, чтобыобрабатывать новый поток данных.

update.php

<?php
$cn = array();
foreach($_POST as $k => $v){
  if($k == 'id'){
    continue;
  }
  array_push($cn, $k);
}
include_once 'mysqli_connect.php';
$id = $mysqli->real_escape_string($_POST['id']);
$sql = "UPDATE table_name SET ";
foreach($cn as $col){
  $val = $mysqli->real_escape_string($_POST[$col]);
  $sql .= "$col = '$val',";
}
$sql = substr($sql, 0, -1) . " WHERE id = $id;";
// Execute SQL Query
?>

Это обновит каждый столбец для строки с любыми данными, которые были отправлены. Вы также можете рассмотретьиспользуя JSON для передачи данных в PHP.