Получайте данные с помощью AJAX и сохраняйте их как переменные

Question

Я совершенно новичок в AJAX и, похоже, не знаю, как лучше всего искать то, что я ищу. Поэтому пытаюсь объяснить это здесь. У меня есть таблица, в которой перечислены мои пользователи. Я хочу иметь возможность редактировать любую строку таблицы без обновления. Поэтому я добавил кнопку для каждой строки, нажав на которую, вы сможете редактировать этого пользователя с помощью модальностей Bootstrap.

Есть эта кнопка, которая инициирует действие:

<span class="updateInfo" user-id="<?php echo $users_array['id']; ?>" data-target=".editInfo" data-toggle="modal"><i class="fa fa-pencil" ></i></span>

$ users_array - это массив, ранее полученный из таблицы в базе данных. В таблице также есть 'id, имя, адрес электронной почты, телефон' в виде столбцов.

Итак, что я в основном имею в своем коде JS, это:

jQuery(document).ready(function() {

    $('.updateInfo').click(function(){
        var userID = $(this).attr('user-id');
        $.ajax({
            url: "edit.php",
            method: "POST",
            dataType: 'json',
            data: {
                selected_user_id: userID,
            },
            success: function(data) {
                // I don't know what to do here :(
            }
        });
    });

});

Коды, включенные в файл edit.php , выглядят следующим образом:

$user_id=$_POST['selected_user_id'];

$get_user=mysql_query("SELECT * FROM users WHERE id='$user_id'");
$user_array=mysql_fetch_row($get_user);

echo json_encode($user_array);

Я не помещал коды, которые устанавливают соединение с базой данных и тому подобное, поскольку они являются базовыми и работают нормально.

У меня есть несколько проблем здесь:

1. Я понятия не имею, правильный ли способ написания кода до сих пор.
2. Как ядолжен получить эти результаты и сохранить их как переменные для последующего использования.
3. Я не знаю, смогу ли я использовать вновь созданные переменные в качестве заполнителей или предопределенных значений в модале, который существует в исходном файле.

PS: модал имеет простую форму с простыми вводами имени, адреса электронной почты и номера телефона:

<div class="modal fade editInfo" tabindex="-1" role="dialog" aria-labelledby="myNote" data-backdrop="static" aria-hidden="true">
<form method="POST">
    <input name="fullname" value="" />
    <input name="email" value="" />
    <input name="phone" value="" />
</form>
</div>

Answer 1

• установить Id для каждого html-элемента

jQuery(document).ready(function() {    

 $("#fullname").val("USer One ");
               $("#email").val("User@gmail.com");
               $("#phone").val("987654");
               
               
               
     $('.updateInfo').click(function(){
            var userID = $(this).attr('user-id');
            $.ajax({
                url: "edit.php",
                method: "POST",
                dataType: 'json',
                data: {
                    selected_user_id: userID,
                },
                success: function(data) {
                     console.log(data);
               $("#fullname").val(data.fullname);
               $("#email").val(data.email);
               $("#phone").val(data.phone);
                }
            });
        });        
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="modal fade editInfo" tabindex="-1" role="dialog" aria-abelledby="myNote" data-backdrop="static" aria-hidden="true">
  <form method="POST"> <input id="fullname" name="fullname" value="" /><input id="email" name="email" value="" /> <input id="phone" name="phone" value="" /> </form>
</div>

и затем выполните привязку следующим образом: