Задать вопрос
Sadyrbaev
@Sadyrbaev
php

Как сделать запись в базу данных и вывод из нее без перезагрузки страницы?

Есть php страница с формой.

index.php
<code lang="php">
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Сотрудники</title>
	<link rel="stylesheet" href="css/style.css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="js/script.js" ></script>
</head>
<body>


	<section class="main">

		<h2>Редактирование</h2>

		<form id="ajax_form" action="" method="post">

		<table class="table2">

       	    <tr>
       	    	<td><input type="text"/ name="name" placeholder="ФИО"></td>
       	     	<td><input type="text"/ name="phonenumber" placeholder="Должность"></td>
       	      	<td><input type="text"/ name="bdate" placeholder="Дата рождения"></td>
       	      	<td><input type="text"/ name="mnumber" placeholder="Мобильный номер"></td>
       	      	<td><input type="text"/ name="email" placeholder="E-mail"></td>
       	    </tr>

       	</table>

       	<input type="button" id="btn" name="save" value="Отправить"/>
       	<input type="submit" name="update" value="Обновить"/>

       	</form>

              <h2>Сотрудники</h2>
              
               <div id="result_form"></div> 

	</section>

</body>
</html>
</code>


Есть обработчик этой формы.

sotrudniki.php
<code lang="php">
<?php

/*if (isset($_POST["name"]) && isset($_POST["phonenumber"]) ) { 

	// Формируем массив для JSON ответа
    $result = array(
    	'name' => $_POST["name"],
    	'phonenumber' => $_POST["phonenumber"]
    ); 

    // Переводим массив в JSON
    echo json_encode($result); 
}*/

$fio = $_POST['name'];
$position = $_POST['phonenumber'];
$bdate = $_POST['bdate'];
$mnumber = $_POST['mnumber'];
$email = $_POST['email'];

$servername = "localhost";
$database = "Arman";
$username = "root";
$password = "";

$conn = mysqli_connect($servername, $username, $password, $database);


if(isset($_POST['save'])) {
$tor = "

INSERT INTO 
`Сотрудники`
SET 
`ФИО` = '$fio', 
`Должность` = '$position', 
`Дата рождения` = '$bdate', 
`Мобильный номер` = '$mnumber', 
`E-mail` = '$email'

";
} elseif(isset($_POST['update'])) {
$tor = "

UPDATE 
`Сотрудники` 
SET 
`ФИО` = '$fio', 
`Должность` = '$position', 
`Дата рождения` = '$bdate', 
`Мобильный номер` = '$mnumber', 
`E-mail` = '$email' 
WHERE 
`ID` = '2'

";
}

if (mysqli_query($conn, $tor)) {
      echo "Запись добавлена <br><br>";
} else {
      echo "Ошибка: " . $tor . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);

$conn = mysqli_connect($servername, $username, $password, $database);
$sotr = "

SELECT 
`ФИО`,
`Должность`, 
`Дата рождения`, 
`Мобильный номер`, 
`E-mail` 
FROM 
`Сотрудники`
WHERE 
`ID` = '2'

";

$resultt = mysqli_query($conn, $sotr);

$row = mysqli_fetch_array($resultt);

$fio = $row['ФИО'];
$dol = $row['Должность'];


$result = array(
    	'name' => $fio,
    	'phonenumber' => $dol
    ); 

echo json_encode($result);

/*mysqli_free_result($resultt);
mysqli_close($conn);*/
?>
</code>


И скрипт, который должен все это дело обрабатывать не перезагружая страницу.

script.js
$( document ).ready(function() {
    $("#btn").click(
        function(){
            sendAjaxForm('result_form', 'ajax_form', 'php/sotrudniki.php');
            return false; 
        }
    );
});
 
function sendAjaxForm(result_form, ajax_form, url) {
    jQuery.ajax({
        url:     url, //url страницы (action_ajax_form.php)
        type:     "POST", //метод отправки
        dataType: "html", //формат данных
        data: jQuery("#"+ajax_form).serialize(),  // Сеарилизуем объект
        success: function(response) { //Данные отправлены успешно
            result = jQuery.parseJSON(response);
            document.getElementById(result_form).innerHTML = "Имя: "+result.name+"<br>Телефон: "+result.phonenumber;
        },
        error: function(response) { // Данные не отправлены
            document.getElementById(result_form).innerHTML = "Ошибка. Данные не отправлены.";
        }
    });
}


В таком виде при нажатии на кнопку "отправить" ничего не происходит, скрипт не срабатывает, но если в форму в action добавить php/sotrudniki.php обрабтка происходит, т.е. сам обработчик рабочий, добавляет запись в таблицу и извлекает ее.

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

Я буквально несколько дней только изучаю php mysql, и вообще это мой первый вопрос где либо, поэтому не судите строго. Спасибо.
  • Вопрос задан
  • 4262 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Sadyrbaev
@Sadyrbaev Автор вопроса
Проблема решена. Не помню точно что именно помогло, но как минимум, у меня в обработчике было 2 переменные $fio с разными значениями, еще я убрал из обработчика все условия if, с ними скрипт не срабатывает почему то, еще я переписал массив переменной $result.

Вот рабочие коды:

Страница с формой - index.php
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Сотрудники</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/script.js" ></script>
</head>
<body>

<section class="main">

<h2>Редактирование</h2>

<form id="ajax_form" action="" method="post">

<table class="table2">

<tr>
<td><input type="text"/ name="name" placeholder="ФИО"></td>
<td><input type="text"/ name="position" placeholder="Должность"></td>
<td><input type="text"/ name="bdate" placeholder="Дата рождения"></td>
<td><input type="text"/ name="mnumber" placeholder="Мобильный номер"></td>
<td><input type="text"/ name="email" placeholder="E-mail"></td>
</tr>

</table>

<input type="submit" class="btn" name="add" value="Добавить"/>
<input type="submit" class="btn" name="update" value="Обновить"/>

</form>

<h2>Сотрудники</h2>

<div id="result_form"></div>

</section>

</body>
</html>


Скрипт ajax запроса и json возврата - script.js
$( document ).ready(function() {
    $(".btn").click(
        function(){
            sendAjaxForm('result_form', 'ajax_form', 'php/sotrudniki.php');
            return false; 
        }
    );
});
 
function sendAjaxForm(result_form, ajax_form, url) {
    jQuery.ajax({
        url:     url, //url страницы (php/sotrudniki.php)
        type:     "POST", //метод отправки
        dataType: "html", //формат данных
        data: jQuery("#"+ajax_form).serialize(),  // Сериализуем объект
        success: function(response) { //Данные отправлены успешно
            result = jQuery.parseJSON(response);
            document.getElementById(result_form).innerHTML = "Имя: " +result.name+" Должность: "+result.position+" Дата рождения: "+result.bdate+" Мобильный номер: "+result.mnomber+" E-mail: "+result.email;
            console.log(response);
        },
        error: function(response) { // Данные не отправлены
            document.getElementById(result_form).innerHTML = "Ошибка. Данные не отправлены.";
        }
    });
}


Обработчик - sotrudniki.php
<?php
include ('connect.php');
include ('insert.php');
include ('select.php');

?>


Подключение к БД - connect.php
<?php
$servername = "localhost";
$database = "Arman";
$username = "root";
$password = "";


$conn = mysqli_connect($servername, $username, $password, $database);
?>


Добавление записи в БД - insert.php
<?php

$name = $_POST['name'];
$position = $_POST['position'];
$bdate = $_POST['bdate'];
$mnumber = $_POST['mnumber'];
$email = $_POST['email'];

$add = "

INSERT INTO 
`Сотрудники`
SET 
`ФИО` = '$name', 
`Должность` = '$position', 
`Дата рождения` = '$bdate', 
`Мобильный номер` = '$mnumber', 
`E-mail` = '$email'

";

mysqli_query($conn, $add);

?>


Извлечение записи из БД - select.php
<?php
$sotr = "

SELECT 
`ФИО`,
`Должность`, 
`Дата рождения`, 
`Мобильный номер`, 
`E-mail` 
FROM 
`Сотрудники`
/*WHERE 
`ID` = '2'*/

";

$res = mysqli_query($conn, $sotr);

$row = mysqli_fetch_row($res);


$result = array
('name' => $row[0], 
 'position' => $row[1], 
 'bdate' => $row[2], 
 'mnomber' => $row[3], 
 'email' => $row[4], 
 );

echo json_encode($result);

mysqli_free_result($res);
mysqli_close($conn);

?>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@maksim_fix
Junior PHP developer
Расскажу вам, как это должно происходить в теории.
1. Отправка запроса. Прикручиваем к какому-то событию(нажатие на кнопку, к примеру) отправку запроса на сервер(через AJAX). Обычный ajax запрос, вы отправляете нужные данные на сервер.
2.Обработка данных на сервере. Здесь вы всячески обрабатываете ваш запрос. Фильтруете данные, кладете данные в БД, забираете оттуда все, что угодно.
3.Возвращение данных. Далее вы должны вернуть данные для дальнейшей обработки на стороне клиента(js). Желательно возвращать в JSON. Пример:
$arr = ['name' => 'Вася'];
return json_encode($arr);

4.Получение данных на стороне клиента. Отправленный ранее ответ от сервера приходит к клиенту в виде JSON объекта. 
success: function(response) { 
     //Данные отправлены успешно
            alert(response.name);
            //выведет Васю
        },

Также нужно указать dataType: "json", //формат данных, а не html
Ответ написан
5 комментариев
5 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
PHP Developer
YCLIENTS • Москва
от 200 000 до 350 000 ₽
PHP разработчик
Ведисофт • Екатеринбург
от 25 000 ₽
Midlle PHP developer (backend)
ИТЦ Аусферр • Магнитогорск
от 100 000 до 160 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Дизайн личного кабинета (клиентская часть)
23 апр. 2024, в 22:37
500 руб./в час
Ещё заказы