Как заставить этот код работать без перезагрузки страницы (ajax)

@Murattick · Регистрация: 30.06.2015

Author24 — интернет-сервис помощи студентам

Здравствуйте.
Вопрос такой - есть страница table.html в неё подключается table.php с помощью include. В файле table.php происходит вывод таблицы MySQL + добавление, редактирования, удаления и сортировка данных (код полностью работает).
Подскажите как это всё реализовать с помощью ajax.
Много перерыл информации, но так и не понял как это реализовать с моим кодом.
P.S. с ajax не когда не сталкивался, просьба объяснить как для полного чайника.

Вот код html

HTML5

<div class="container">
            <div class="row">
                <div id="content">
                <?php include("table.php"); ?>
                </div>
        </div>
    </div>

А вот сам код php, который нужно заставить работать с помощью ajax

PHP

<?php 
    $server = 'localhost';
    $user = 'Admin';
    $password = 'admin';
    $dblink = mysql_connect($server, $user, $password);
    $database = 'test';
    $selected = mysql_select_db($database, $dblink);
    if ( !isset( $_GET["action"] ) ) $_GET["action"] = "showlist";   
switch ( $_GET["action"] ) 
{ 
  case "showlist":    // Список всех записей в таблице БД
    show_list(); break; 
  case "addform":     // Форма для добавления новой записи 
    get_add_item_form(); break; 
  case "add":         // Добавить новую запись в таблицу БД
    add_item(); break;
  case "editform":    // Форма для редактирования записи 
    get_edit_item_form(); break; 
  case "update":      // Обновить запись в таблице БД
    update_item(); break; 
  case "delete":      // Удалить запись в таблице БД
    delete_item(); break;
  default: 
    show_list(); 
}
// Функция выводит список всех записей в таблице БД
function show_list() 
{ // По умолчанию сортировка по наименованию, по возрастанию
$orderby = 'ID';
$sort = 'ASC';
if ( isset( $_GET['orderby'] ) and isset( $_GET['sort'] ) ) {
  if ( in_array( $_GET['orderby'], array( 'ID', 'Surname', 'Course' ) ) ) $orderby = $_GET['orderby'];
  if ( in_array( $_GET['sort'], array( 'ASC', 'DESC' ) ) ) $sort = $_GET['sort'];
}
 
$query = 'SELECT * 
          FROM test_tabl
          ORDER BY '.$orderby.' '.$sort;
$res = mysql_query( $query );
echo '<h1 align="center" class="page-header">Студенты</h1>'."\n";
// Выводим "шапку" таблицы
echo '<table class="table table-hover">'."\n";
echo '<tr>';
if ( $sort == 'ASC' ) {
  $image_del = '<span class="glyphicon glyphicon-remove"></span>';
  $image_add = '<span class="glyphicon glyphicon-edit"></span>';
  $image_upd = '<span class="glyphicon glyphicon-wrench"></span>';
  $tmp = 'DESC';
  $image = '<span class="glyphicon glyphicon-sort-by-alphabet"></span>';
  } else {
  $image_del = '<span class="glyphicon glyphicon-remove"></span>';
  $image_add = '<span class="glyphicon glyphicon-edit"></span>';
  $image_upd = '<span class="glyphicon glyphicon-wrench"></span>';
  $tmp = 'ASC';
  $image = '<span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>';
  }
if ( $orderby == 'ID' )
  echo '<th><a class="btn btn-default" href="'.$_SERVER['PHP_SELF'].'?orderby=ID&sort='.$tmp.'">ID '.$image.'</a></th>';
else
  echo '<th><a class="btn btn-default" href="'.$_SERVER['PHP_SELF'].'?orderby=ID&sort=ASC">ID '.$image.'</a></th>';
  echo '<th><a class="btn btn-default" href="#">Имя</a></th>';
if ( $orderby == 'Surname' )
  echo '<th><a class="btn btn-default" href="'.$_SERVER['PHP_SELF'].'?orderby=Surname&sort='.$tmp.'">Фамилия '.$image.'</a></th>';
else
  echo '<th><a class="btn btn-default" href="'.$_SERVER['PHP_SELF'].'?orderby=Surname&sort=ASC">Фамилия '.$image.'</a></th>';
echo '<th><a class="btn btn-default" href="#">Отчество</a></th>';
echo '<th><a class="btn btn-default" href="#">Возраст</a></th>';
echo '<th><a class="btn btn-default" href="#">Пол</a></th>';
if ( $orderby == 'Course' )
  echo '<th><a class="btn btn-default" href="'.$_SERVER['PHP_SELF'].'?orderby=Course&sort='.$tmp.'">Курс '.$image.'</a></th>';
else
  echo '<th><a class="btn btn-default" href="'.$_SERVER['PHP_SELF'].'?orderby=Course&sort=ASC">Курс '.$image.'</a></th>';
  echo '<th><a class="btn btn-success" href="'.$_SERVER['PHP_SELF'].'?action=addform">'.$image_add.' Добавить студента!</a></th>';
echo '</tr>'."\n";
while( $prd = mysql_fetch_array( $res ) ) {
  echo '<tr>'; 
  echo '<td>'.$prd['ID'].'</td>'."\n";
  echo '<td>'.$prd['Name'].'</td>'."\n";
  echo '<td>'.$prd['Surname'].'</td>'."\n"; 
  echo '<td>'.$prd['Patronymic'].'</td>'."\n"; 
  echo '<td align="center">'.$prd['Age'].'</td>'."\n";
  echo '<td align="center">'.$prd['Sex'].'</td>'."\n"; 
  echo '<td align="center">'.$prd['Course'].'</td>'."\n";
  echo '<td><a class="btn btn-primary" href="'.$_SERVER['PHP_SELF'].'?action=editform&ID='.$prd['ID'].'">'.$image_upd.' Редактировать</a></td>'; 
  echo '<td><a class="btn btn-danger" href="'.$_SERVER['PHP_SELF'].'?action=delete&ID='.$prd['ID'].'" onclick="return confirm(\'Удалить студента?\')">'.$image_del.' Удалить</a></td>';     
  echo '</tr>'."\n";
}
 
echo '</table>'."\n";
} 
// Функция формирует форму для добавления записи в таблице БД 
function get_add_item_form()
{ 
  echo '<h2>Добавить студена</h2><br>';  
  echo '<form name="addform" action="'.$_SERVER['PHP_SELF'].'?action=add" method="POST">'; 
  echo '<table align="center" class="table table-hover">'; 
  echo '<tr>';  
  echo '<td><input class="form-control" placeholder="Имя" type="text" name="Name" value="" required data-validation-required-message="Пожалуйста укажите ваше имя" /></td>'; 
  echo '</tr>';
  echo '<tr>';  
  echo '<td><input class="form-control" placeholder="Фамилия" type="text" name="Surname" value="" required data-validation-required-message="Пожалуйста укажите вашу фамилию" /></td>'; 
  echo '</tr>'; 
  echo '<tr>';  
  echo '<td><input class="form-control" placeholder="Отчество" type="text" name="Patronymic" value="" required data-validation-required-message="Пожалуйста укажите ваше отчество" /></td>'; 
  echo '</tr>';
  echo '<tr>';  
  echo '<td><input class="form-control" placeholder="Возраст" type="text" name="Age" value="" required data-validation-required-message="Пожалуйста укажите ваш возраст" /></td>'; 
  echo '</tr>';
  echo '<tr>';  
  echo '<td><select class="form-control" placeholder="Пол" type="text" name="Sex" value="" required data-validation-required-message="Пожалуйста укажите ваш пол" />
  <option value="male">Мужской
  <option value="Female">Женский </select></td>'; 
  echo '</tr>';
  echo '<tr>'; 
  echo '<td><select class="form-control" class="dropdown-toggle" data-toggle="dropdown" name="Course" value="" required data-validation-required-message="Пожалуйста укажите ваш курс" />
  <option value="1">1 курс
  <option value="2">2 курс
  <option value="3">3 курс
  <option value="4">4 курс </select></td>'; 
  echo '</tr>'; 
  echo '<tr>'; 
  echo '<td><input class="btn btn-success" type="submit" value="Сохранить">'; 
  echo '<button class="btn btn-danger" type="button" onClick="history.back();"> Отменить</button></td>'; 
  echo '</tr>'; 
  echo '</table>'; 
  echo '</form>'; 
}
// Функция добавляет новую запись в таблицу БД  
function add_item() 
{ 
  $Name = mysql_escape_string ($_POST['Name']); 
  $Surname = mysql_escape_string ($_POST['Surname']);
  $Patronymic = mysql_escape_string ($_POST['Patronymic']);
  $Age = mysql_escape_string ($_POST['Age']);
  $Sex = mysql_escape_string ($_POST['Sex']);
  $Course = mysql_escape_string ($_POST['Course']); 
  $query = "INSERT INTO `test_tabl` (Name, Surname, Patronymic, Age, Sex, Course) VALUES ('".$Name."', '".$Surname."', '".$Patronymic."', '".$Age."', '".$Sex."', '".$Course."');"; 
  mysql_query ($query); 
  echo '<meta http-equiv="refresh" content="0; url='.$_SERVER['PHP_SELF'].'">';
  die();
}
// Функция формирует форму для редактирования записи в таблице БД 
function get_edit_item_form() 
{ 
  echo '<h2>Редактировать</h2>'; 
  $query = 'SELECT Name, Surname, Patronymic, Age, Sex, Course FROM `test_tabl` WHERE ID='.$_GET['ID']; 
  $res = mysql_query ( $query ); 
  $item = mysql_fetch_array ( $res ); 
  echo '<form  name="editform" action="'.$_SERVER['PHP_SELF'].'?action=update&ID='.$_GET['ID'].'" method="POST">'; 
  echo '<table align="center" class="table table-hover">'; 
  echo '<tr>'; 
  echo '<td>Имя</td>'; 
  echo '<td><input class="form-control" type="text" name="Name" value="'.$item['Name'].'"></td>'; 
  echo '</tr>'; 
  echo '<tr>'; 
  echo '<td>Фамилия</td>'; 
  echo '<td><input class="form-control" type="text" name="Surname" value="'.$item['Surname'].'"></td>'; 
  echo '</tr>';
  echo '<tr>'; 
  echo '<td>Отчество</td>'; 
  echo '<td><input class="form-control" type="text" name="Patronymic" value="'.$item['Patronymic'].'"></td>'; 
  echo '</tr>';  
  echo '<tr>'; 
  echo '<td>Возраст</td>'; 
  echo '<td><input class="form-control" type="text" name="Age" value="'.$item['Age'].'"></td>'; 
  echo '</tr>';
  echo '<tr>'; 
  echo '<td>Пол</td>'; 
  echo '<td><input class="form-control" type="text" name="Sex" value="'.$item['Sex'].'"></td>'; 
  echo '</tr>';
  echo '<tr>'; 
  echo '<td>Курс</td>'; 
  echo '<td><input class="form-control" type="text" name="Course" value="'.$item['Course'].'"></td>'; 
  echo '</tr>';  
  echo '<tr>'; 
  echo '<td><input class="btn btn-success" type="submit" name="submit_edit" value="Сохранить"></td>'; 
  echo '<td><button class="btn btn-danger" type="button" onClick="history.back();">Отменить</button></td>'; 
  echo '</tr>'; 
  echo '</table>'; 
  echo '</form>'; 
} 
// Функция обновляет запись в таблице БД  
function update_item() 
{ 
  $Name = mysql_escape_string ( $_POST['Name'] );
  $Surname = mysql_escape_string ( $_POST['Surname'] );
  $Patronymic = mysql_escape_string ( $_POST['Patronymic'] ); 
  $Age = mysql_escape_string ( $_POST['Age'] );
  $Sex = mysql_escape_string ( $_POST['Sex'] );
  $Course = mysql_escape_string ( $_POST['Course'] ); 
  $query = "UPDATE `test_tabl` SET Name='".$Name."', Surname='".$Surname."', Patronymic='".$Patronymic."', Age='".$Age."', Sex='".$Sex."', Course='".$Course."' 
            WHERE ID=".$_GET['ID']; 
  mysql_query ( $query ); 
  echo '<meta http-equiv="refresh" content="0; url='.$_SERVER['PHP_SELF'].'">';
  die();
} 
// Функция удаляет запись в таблице БД 
function delete_item() 
{ 
  $query = "DELETE FROM `test_tabl` WHERE ID=".$_GET['ID']; 
  mysql_query ( $query ); 
  echo '<meta http-equiv="refresh" content="0; url='.$_SERVER['PHP_SELF'].'">'; 
  die();
}  
?>

@pav1uxa · 01.07.2015, 17:04

Сообщение от Murattick

P.S. с ajax не когда не сталкивался, просьба объяснить как для полного чайника.

Ну так столкнитесь. В интернете полно учебников.

@kitlum · 01.07.2015, 17:26

PHP - это серверный язык. Всё это формируется один раз на сервере и отдаётся клиенту. Без перезагрузки страницы php её содержание не поменяет никак.
Для оперативного изменения данных в браузере клиента нужно пользоваться клиентским языком (чаще всего, javascript), который загружается на компьютер клиента и реагирует на его действия и отображает данные через AJAX. Если нужно изменить что-либо без перезагрузки используют JavaScript. Т.е. правильно работает связка JavaScript->AJAX->PHP->AJAX->JavaScript.
Поэтому Вам в части HTML нужно реализовать функцию JavaScript, которая будет передавать через AJAX данные пользователя (обычно массив JSON) в Ваш .php файл, получать оттуда ответные данные (обычно массив JSON) и уже с них формировать таблицу.

Не по теме:

Ваш Кэп

@Murattick · 01.07.2015, 17:54 **[ТС]**

Можно немного подробнее? И объяснить, хотя бы на словах, по моему коду как это реализовать. Или лучше примером. Спасибо.

Блоги программистов
Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного суматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом задержки). Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .	Руководство по созданию бота для Телеграм на Python IT_Exp 04.01.2025 Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .	Применение компонентов PrimeVue в Vue.js 3 на TypeScript BasicMan 04.01.2025 Введение в PrimeVue и настройка окружения PrimeVue представляет собой мощную библиотеку компонентов пользовательского интерфейса для Vue. js 3, которая предоставляет разработчикам богатый набор. . .
Как стать Senior developer cpp_developer 04.01.2025 В современной индустрии разработки программного обеспечения позиция Senior Developer представляет собой не просто следующую ступень карьерной лестницы, а качественно новый уровень профессионального. . .	Что известно о дате выхода Windows 12 и чего от нее ждать IT_Exp 04.01.2025 В мире технологий постоянно происходят изменения, и операционные системы не являются исключением. Windows 11, выпущенная в октябре 2021 года, принесла множество инноваций и улучшений, но. . .	Что новенького в .NET Core 9 Programming 04.01.2025 Обзор ключевых изменений в . NET Core 9 Платформа . NET Core продолжает активно развиваться, и версия 9 представляет собой значительный шаг вперед в эволюции этой технологии. Новый релиз. . .	Инструкция по установке python3.13.1 в Debian 12 AlexSky-coder 03.01.2025 sudo apt update sudo apt install build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libreadline-dev libffi-dev wget. . .	Затестил триггеры. архив проекта прилагаю с GOA файлами в настройках архиватора проектов. Hrethgir 03.01.2025 В этот раз нет закольцованности, потому что от неё только глюки, как я понял, логика не вырезанная. Триггеры очень быстрые если верить измерениям с помощью анализатора от Gowin. Есть ещё регистры,. . .	Python в помощь DevOps IT_Exp 03.01.2025 Причины использования Python в работе DevOps Python стал неотъемлемой частью мира DevOps, и это не случайно. Этот язык программирования обладает множеством преимуществ, которые делают его. . .

@pav1uxa 1943 / 1768 / 825 Регистрация: 23.01.2014 Сообщений: 6,230
	01.07.2015, 17:04	2
	Сообщение от Murattick P.S. с ajax не когда не сталкивался, просьба объяснить как для полного чайника. Ну так столкнитесь. В интернете полно учебников. 0

@kitlum 18 / 18 / 12 Регистрация: 10.03.2015 Сообщений: 77
	01.07.2015, 17:26	3
	PHP - это серверный язык. Всё это формируется один раз на сервере и отдаётся клиенту. Без перезагрузки страницы php её содержание не поменяет никак. Для оперативного изменения данных в браузере клиента нужно пользоваться клиентским языком (чаще всего, javascript), который загружается на компьютер клиента и реагирует на его действия и отображает данные через AJAX. Если нужно изменить что-либо без перезагрузки используют JavaScript. Т.е. правильно работает связка JavaScript->AJAX->PHP->AJAX->JavaScript. Поэтому Вам в части HTML нужно реализовать функцию JavaScript, которая будет передавать через AJAX данные пользователя (обычно массив JSON) в Ваш .php файл, получать оттуда ответные данные (обычно массив JSON) и уже с них формировать таблицу. Не по теме: Ваш Кэп 0

@Murattick 0 / 0 / 0 Регистрация: 30.06.2015 Сообщений: 3
	01.07.2015, 17:54 [ТС]	4
	Можно немного подробнее? И объяснить, хотя бы на словах, по моему коду как это реализовать. Или лучше примером. Спасибо. 0