Подключить таблицу при нажатии кнопки методом 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 минут
Проблему с ошибкой решил) Всё работает с моим кодом. Товарищи спасибо за помощь.

Новые блоги и статьи Все статьи Все блоги /
[golang] Конкурентный fetcher с ограничением максимального количества одновременных HTTP запросов. alhaos 10.06.2026 Задача Реализовать конкурентный fetcher с ограничением максимального количества одновременных HTTP запросов. Сигнатура func Fetch(urls string, maxConcurrent int) Result Пример urls :=. . .	[golang] Состояние гонки (race condition) alhaos 10.06.2026 Состояние гонки (race condition) Состояние гонки (Race Condition) — это ошибка, возникающая при одновременном доступе нескольких горутин к одним и тем же данным без должной синхронизации. При этом. . .	Взрослые отношения, и почему они не получаются kumehtar 09.06.2026 Когда в детстве ребёнок не получает от родителей чего-то важного, он лишается не просто приятных переживаний, а основы для формирования определённых внутренних качеств и навыков. Если ребёнок не. . .	[golang] Worker Pool alhaos 09.06.2026 Worker Pool Worker Pool — паттерн конкурентной обработки задач в Go. Суть: фиксированное количество горутин-воркеров читают задачи из общего канала и пишут результаты в общий канал результатов. . . .
[golang] Pipeline alhaos 08.06.2026 Pipeline Pipeline — паттерн конкурентной обработки данных в Go. Суть: данные проходят через цепочку независимых стадий, каждая из которых работает в своей горутине и общается с соседями через. . .	Свет внутри себя kumehtar 07.06.2026 Пусть это будет здесь lIs4oanZS9Y	Программа для com-порта Uhbif79 05.06.2026 Всем привет, давно хотел изучить Qt, начинал, бросал, потом снова начинал. И сейчас вот смог написать свою первую программу. До этого имел опыт программирования микроконтроллеров, писал прошивки на. . .	Транскрипция 55-минутного видео через Whisper: WhisperDesktop облажался, спас Google Colab[ anaschu 01.06.2026 Понадобилось получить текст из свежезагруженного видео на YouTube. Казалось бы, задача на пять минут. Заняла полтора часа. Делюсь опытом — может кому пригодится последовательность решений. . . .

@Дмитрий Дмитрий 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