Подключить таблицу при нажатии кнопки методом ajax

@Дмитрий Дмитрий · Регистрация: 17.09.2016

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

День добрый, подскажите с решением.
Есть БД и две таблицы table1 и table2, при нажатии кнопки1 выводиться table1, при нажатии кнопки2 table2

HTML5
1
2
<button id="rol_but"><a href="/index.php?tkani=table1">Рулонки</a></button>
    <button id="vertical_but"><a href="/index.php?tkani=table2">Вертикалки</a></button>

PHP
1
2
$a = $_GET['tkani'];
    include ("tkani/".$a."_tkani.php");

Как реализовать то же только ajax? Т.к. прямым GET запросом страница перезагружается каждый раз при клике на кнопку, что приводит к сбросу всех данных.

И ещё вопрос, нужно что бы при загрузки страницы сразу подключалась таблица table1?

@Дмитрий Дмитрий · 19.05.2018, 19:30 **[ТС]**

что то не хватает?))) Всё что наковырял

@tarasalk · 19.05.2018, 19:31

Вот вы говорите что разобрались с hello world, а у вас банально нет обработки ответа от сервера. Кого обманываете хз.

JavaScript
1
data: 'name=rol_but',

И это у меня что то большое сомнение вызывает. Всегда использую объект.

@Дмитрий Дмитрий · 19.05.2018, 19:40 **[ТС]**

Вот пример запроса

JavaScript
1
2
3
4
5
6
7
8
$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Прибыли данные: " + msg );
  }
});

У меня так же все, только success нет.

@atanov · 19.05.2018, 19:41

Дмитрий Дмитрий, добавить success: function (){код, выполняемый в случае успешного ответа сервера}

Нужно async в false перевести - сервер может не успеть отдать данные, нужно, чтобы клиент долежался ответа.

@Дмитрий Дмитрий · 19.05.2018, 19:49 **[ТС]**

success: function () куда выводить должна и что?

Добавлено через 7 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
    $('#rol_but').click( function() {
 
        $.ajax({
    type: 'POST',
          url: 'index.php',
          data: 'name=rol_but',
     async: false
        });
});
    });

@atanov · 19.05.2018, 19:57

Дмитрий Дмитрий success: function () куда выводить должна и что? то, что получит от сервера. В Вашем случае, то, что выведет echo в файле index.php, т.е. html.
У меня к Вам вопрос - почему Вы перескочили на jquery? Я Вам дал рабочий js, Вам следует разобраться сначала в ваниле, а потом уже переходить на библиотеки. Эти библиотеки предназначены для облегчения работы кодеров, которые знают основу языка.

@Дмитрий Дмитрий · 19.05.2018, 20:03 **[ТС]**

Ошибку выдает ваш код, не знаю почему.

@atanov · 19.05.2018, 20:17

Дмитрий Дмитрий, выкладывайте код, в который Вы вставляли мой.

@Дмитрий Дмитрий · 20.05.2018, 08:00 **[ТС]**

Такой вариант работает

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Жалюзи</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    $('#rol_but').click( function() {
    $.ajax({
          type: 'POST',
          url: 'index.php',
          data: 'name=rol',
          success: function(e){
          $("#block-tovar-grid").html(e);
          }
        });
});
 
$('#vertical_but').click( function() {
    $.ajax({
          type: 'POST',
          url: 'index.php',
          data: 'name=ver',
          success: function(e){
          $("#block-tovar-grid").html(e);
          }
        });
});
    });
    </script>
</head>
<body>
    
<!-- Блок кнопок выбора таблиц ткани role и vertical -->
<div id="tkani">
    <p><strong>Выбираем ткани</strong></p>
    <button id="rol_but">Рулонки</button>
    <button id="vertical_but">Вертикалки</button>
</div>
 
<!-- Блок вывода таблиц с тканями при нажатии кнопок -->
 <div id="block-tovar-grid">
 
 <?php
 if ($_POST['name'] == 'rol')
 {include 'tkani/role_tkani.php';}
 
 if ($_POST['name'] == 'ver')
 {include 'tkani/vertical_tkani.php';}
?>
 </div>
 </body>
</html>

Но, так как обращаюсь к файлу index.php , то он выводить в блок

HTML5
1
<div id="block-tovar-grid">

всю структуру index.php страницы.
Если создаю другую страницу bd.php там код

PHP
1
2
3
4
5
 if ($_POST['name'] == 'rol')
 {include 'tkani/role_tkani.php';}
 
 if ($_POST['name'] == 'ver')
 {include 'tkani/vertical_tkani.php';}

соответственно с index.php убираю его и в ajax прописываю страницу url:'bd.php', при нажатии кнопки Рулонки появляется ошибка в файле role_tkani.php
Warning: mysql_query() expects parameter 2 to be resource, null given in D:\OSPanel\domains\mysait\tkani\role_tkani.php on line 2

Warning: mysql_num_rows() expects parameter 1 to be resource, null given in D:\OSPanel\domains\mysait\tkani\role_tkani.php on line 3
Аналогично для кнопки Вертикалки.

Вот файл role_tkani.php, в файле vertical_tkani.php аналогичная ошибка.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$result = mysql_query("SELECT * FROM role",$link); //выводим данные из таблицы role 
if (mysql_num_rows($result) > 0)//проверка, если значение больше 0, то ошибка не выводиться
{
 $row = mysql_fetch_array($result); 
 do 
 {
 // Выводим размер фото 200*200---------------------------------------
 if  ($row["image"] != "" && file_exists("./images/rol_images/".$row["image"]))
{
$img_path = './images/rol_images/'.$row["image"];
$max_width = 150; 
$max_height = 150; 
 list($width, $height) = getimagesize($img_path); 
$ratioh = $max_height/$height; 
$ratiow = $max_width/$width; 
$ratio = min($ratioh, $ratiow); 
$width = intval($ratio*$width); 
$height = intval($ratio*$height);    
}else
{
$img_path = "/images/no-image.png"; //выводим фото при отсутствии фото в images
$width = 100;
$height = 150;
} 
 //------------------------------------------------------------------
 
 echo '
  <div class="block-images-grid" >
  <p class="style-title-grid" >'.$row["name"].'</p>
  <img src="'.$img_path.'" width="'.$width.'" height="'.$height.'" />
  </div>  
 ';
 }
 while ($row = mysql_fetch_array($result));//вывод цыклом
}

Добавлено через 3 минуты
Да и ещё заметил проблему) если часто тыкать на кнопки происходит зависание браузера.

Добавлено через 36 минут
Проблему с ошибкой решил) Всё работает с моим кодом. Товарищи спасибо за помощь.

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	19.05.2018, 19:30 [ТС]
	что то не хватает?))) Всё что наковырял 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 19:41
	Дмитрий Дмитрий, добавить success: function (){код, выполняемый в случае успешного ответа сервера} Нужно async в false перевести - сервер может не успеть отдать данные, нужно, чтобы клиент долежался ответа. 1

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 19:57
	Дмитрий Дмитрий success: function () куда выводить должна и что? то, что получит от сервера. В Вашем случае, то, что выведет echo в файле index.php, т.е. html. У меня к Вам вопрос - почему Вы перескочили на jquery? Я Вам дал рабочий js, Вам следует разобраться сначала в ваниле, а потом уже переходить на библиотеки. Эти библиотеки предназначены для облегчения работы кодеров, которые знают основу языка. 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	19.05.2018, 20:03 [ТС]
	Ошибку выдает ваш код, не знаю почему. 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 20:17
	Дмитрий Дмитрий, выкладывайте код, в который Вы вставляли мой. 0