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

Новые блоги и статьи Все статьи Все блоги /
попытка написать игровой сервер на C++ pyirrlicht 29.04.2026 попытка написать игровой сервер на плюсах с открытым бесконечным миром. возможно получится прикрутить интерпретатор питон для кастомизации игровой логики. что есть на текущий момент:. . .	Контроль уникальности выбранного документа-основания при изменении реквизита Maks 28.04.2026 Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРемонтСпецтехники", разработанного в КА2. Задача: уведомлять пользователя, если указанная заявка (документ-основание). . .	Благородство как наказание Maks 24.04.2026 У хорошего человека отношения с женщинами всегда складываются трудно. А я человек хороший. Заявляю без тени смущения, потому что гордиться тут нечем. От хорошего человека ждут соответствующего. . .	Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .

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