Как перезагрузить div с помощью кнопки на JS?

Question

есть div, в котором выводятся данные из БД

<div id="showname">
 
<?php
  $user_object = mysqli_query ($connection, "SELECT * FROM `user` ORDER BY `id`");
  while ($user = mysqli_fetch_assoc ($user_object)) {
 ?>

<p><?php echo $user['name']; ?></p>
</div>

и есть кнопка

<button id="reload">Обновить</button>

Как сделать, чтобы при нажатии кнопки перезагружался только div, а не станица целиком?

Answer 1

Если Вы желаете что бы после нажатия кнопки "Обновить"- обновлялось имя пользователя, то создайте Ajax запрос который будет срабатывать после нажатия кнопки. Пример: HTML , тут на кнопочку вешаем событие onclick="upd()

<input name="random_go" type="button" value="Обновить" onclick="upd()">

После ее нажатие активируется Ajax

function upd(){
    var postData = getData('#blox_index_site');

    $.ajax({
        type: 'POST',
        url: "/index/upd/",
        data: postData,
        dataType: 'json',
        success: function(data){
            var result = data['result'];
            $('#showname').html(result);
        }   
    });
}

Также для корректной работы всех Ajax запросов необходимо добавить в файлик JS вот это

function getData(obj_form){
    var hData = {};
    $('input, textarea, select', obj_form).each(function() {
        if(this.name && this.name!=''){
            hData[this.name] = this.value;
            console.log('hData[' + this.name + '] = ' + hData[this.name]);
        }   
    });
    return hData;
};

Как Вы уже заметили в функции upd эта функция используется var postData = getData('#blox_index_site');

Ну а в самом PHP прописать :

function upd(){
    
         $user_object = mysqli_query ($connection, "SELECT * FROM `user` ORDER BY `id`");
  while ($user = mysqli_fetch_assoc ($user_object))

        //передача на страницу
        $array = array();
            $array['success'] = 1;
            $array['result'] = $user['name'];
        echo json_encode($array);
    }

Вы дергаете кнопочкой Ajax, он функцию upd, PHP берет/обновляет значение $user['name'] и передает его обратно в Ajax, который в свою очередь обновляет только один блок div, а не всю страницу - $('#showname').html(result);

БЛОГ НА HUSL

Как перезагрузить div с помощью кнопки на JS?

Ответы (1 шт):