Подключить таблицу при нажатии кнопки методом 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?

@atanov · 19.05.2018, 13:14

Дмитрий Дмитрий, возможно. 1-й костыльный, если таблицы не очень большие, вывести их сразу с display:none, а при нажатии на кнопку показывать ту или иную таблицу. 2-й вариант, ajax - серверный скрипт при запросе возвращает json, на клиенте распарсиваете как нужно.

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

Первый не подходит, таблицы большие объем страницы будит огромный, нужно подгружать.
По 2 му варианту пример можно если не сложно?

@tarasalk · 19.05.2018, 15:06

Сообщение от Дмитрий Дмитрий

По 2 му варианту пример можно если не сложно?

Вы не поверите, очень сложно. Просто вбиваем в гугл ajax пример и целая куча вываливается.
Предвижу что вам нужно конкретно под ваш пример. Уверяю, у вас задача тривиальная. Кстати, тут может быть очень удобно использовать datatables, там и ajax есть.

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

Это понятно что куча) только под мою задачу подогнать не выходит

@atanov · 19.05.2018, 16:43

Дмитрий Дмитрий, вот так попробуйте:

CSS
1
td{border: solid black 1px;}

HTML5
1
2
3
4
5
6
<link rel = "stylesheet" type = "text/css" href = "54.css">
<head><meta charset="UTF-8"></head>
<button id = "rol_but">Рулонки</button>
<button id = "vertical_but">Вертикалки</button>
<div id = "whereToPasteTable"></div>
<script src = "54.js"></script>

JavaScript
1
2
3
4
5
6
7
8
9
10
document.getElementById('rol_but').onclick = sendRequest;
document.getElementById('vertical_but').onclick = sendRequest;
function sendRequest(e){
    var targetId = e.target.id;
    var request = new XMLHttpRequest();
    request.open('POST', '54.php',false);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send('tableToShow='+targetId);
    document.getElementById('whereToPasteTable').innerHTML = request.responseText;
}

PHP
1
2
3
4
5
<?php
if ($_POST['tableToShow'] == 'rol_but')
{echo '<table><tbody><tr><td>Рулонки</td></tr></tbody></table>';}
else{echo '<table><tbody><tr><td>Вертикалки</td></tr></tbody></table>';}
?>

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

54.php тут что должно быть?

Добавлено через 11 минут
Что то я понять не могу))
Мне нужно вывести таблицу из БД на сервере в зависимости от нажатия кнопки, у вас этот код

PHP
1
2
3
if ($_POST['tableToShow'] == 'rol_but')
{echo '<table><tbody><tr><td>Рулонки</td></tr></tbody></table>';}
else{echo '<table><tbody><tr><td>Вертикалки</td></tr></tbody></table>';}

выводит

HTML5
1
<table><tbody><tr><td>Рулонки</td></tr></tbody></table>

при условии, что значение переменной tableToShow равно rol_but, если нет то выводит

HTML5
1
<table><tbody><tr><td>Вертикалки</td></tr></tbody></table>

А как вывести то таблицы БД?

Добавлено через 3 минуты
У меня таблица table1 подключается к БД в файле tkani/table1_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
$result = mysql_query("SELECT * FROM table1",$link); 
if (mysql_num_rows($result) > 0)//проверка, если значение больше 0, то ошибка не выводиться
{
 $row = mysql_fetch_array($result); 
 do 
 {
 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));//вывод цыклом
}

Таблица table2 подключается в файле tkani/table2_tkani.php аналогично первой.

Добавлено через 3 минуты
Возможно выводить переменные которые передают ссылку в include()? Ну или другой способ для подключения таблиц тоже рассмотрю.

@atanov · 19.05.2018, 17:29

Дмитрий Дмитрий, ну и подключайте в обработчике:

PHP
1
2
3
if ($_POST['tableToShow'] == 'rol_but')
{include ("tkani/table1_tkani.php");}
else{include ("tkani/table2_tkani.php");}

На клиент вернётся тот html, который выведётся echo'ом в обработчике.

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

Ошибку выдает Uncaught TypeError: Cannot set property 'onclick' of null
тут

JavaScript
1
document.getElementById('rol_but').onclick = sendRequest;

@tarasalk · 19.05.2018, 17:43

Сообщение от Дмитрий Дмитрий

Это понятно что куча) только под мою задачу подогнать не выходит

В смысле не выходит? Они все подходят, т.к. решают одну и ту же задачу. Это запрос на сервер без перезагрузки страницы.
То как именно сервер обработает страницу это уже совсем другая задача.

То что вам написал atanov это ajax на чистом js, описание и примеры есть в документации.

Сообщение от Дмитрий Дмитрий

А как вывести то таблицы БД?

Точно также как и без ajax. Вы явно не понимаете как оно работает. Уберите пока базу и выведете просто hello world через ajax.
Алгоритм такой:
1) Через js делаете ajax запрос на сервер,
2) Сервер возвращает вам hello world.
3) В js вы получаете строку hello world и выводите на экран.

А вот дальше у вас 2 варианта:
1) вместо hello world вернуть данные из БД, а на js сформировать html разметку.
2) либо сразу на сервере сформировать html разметку и вернуть его клиенту. В js остается только вставить эту разметку где-нибудь на странице.

У вас щас в коде вариант 2.

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

tarasalk я понимаю, что у меня вариант 2) и hello world я уже делал)), то что написано на js, а не на jq я то же молясь понимаю, с php только разбираюсь, как видите с get запросом понятно, не понятно как сделать то же на ajax но конкретно с моей ситуацией.
Код который дал atanov выводит ошибку.

Добавлено через 2 минуты
А можно js в jq переделать, а то совсем не понятно)

@atanov · 19.05.2018, 18:35

Сообщение от Дмитрий Дмитрий

Ошибку выдает Uncaught TypeError: Cannot set property 'onclick' of null
тут

document.getElementById('rol_but').oncli ck = sendRequest;

А у кнопки id = 'rol_but'?

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

Сделал так но не работает

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    $(document).ready(function() {
    $('#rol_but').click( function() {
        $.ajax({
      type: 'POST',
          url: 'index.php',
          data: 'name=rol_but',
        });
});
    });
</head>
<body>
<div id="tkani">
    <p><strong>Выбираем ткани</strong></p>
    <button id="rol_but">Рулонки</button>
    <button id="vertical_but">Вертикалки</button>
</div>
 <div id="block-tovar-grid">

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

HTML5
1
2
3
4
 </div>
 
 </body>
</html>

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

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

А у кнопки id = 'rol_but'?

да такой

@atanov · 19.05.2018, 18:48

Дмитрий Дмитрий, а обработчик index.php? И что консоль показывает?

Чёрт, а зачем в include'ах скобки

, вот так правильно:

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

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

Обработчик index.php, консоль молчит. Код который выше он весь в index.php

Добавлено через 3 минуты
Убрал скобки, всё также), нажимаю на кнопку Рулонки тишина, Вертикалки тишина)

Добавлено через 37 секунд
Консоль молчит

@atanov · 19.05.2018, 18:59

Дмитрий Дмитрий, для эксперимента замените include на echo. Что теперь выводит?

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

PHP
1
2
3
4
if ($_POST['name'] == 'rol_but')
 {echo '"tkani/role_tkani.php"';}
else
 {echo '"tkani/vertical_tkani.php"';}

Тишина

@atanov · 19.05.2018, 19:14

Дмитрий Дмитрий, а Вы мой код использовали или свой jquery? В Вашем нет ответа сервера и размещения ответа в DOM.

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

Свой

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

@atanov · 19.05.2018, 19:27

Дмитрий Дмитрий, ну и где ответ от сервера?

Новые блоги и статьи Все статьи Все блоги /
изучаю 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% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 13:14
	Дмитрий Дмитрий, возможно. 1-й костыльный, если таблицы не очень большие, вывести их сразу с display:none, а при нажатии на кнопку показывать ту или иную таблицу. 2-й вариант, ajax - серверный скрипт при запросе возвращает json, на клиенте распарсиваете как нужно. 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	19.05.2018, 13:55 [ТС]
	Первый не подходит, таблицы большие объем страницы будит огромный, нужно подгружать. По 2 му варианту пример можно если не сложно? 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	19.05.2018, 16:11 [ТС]
	Это понятно что куча) только под мою задачу подогнать не выходит 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	19.05.2018, 17:52 [ТС]
	tarasalk я понимаю, что у меня вариант 2) и hello world я уже делал)), то что написано на js, а не на jq я то же молясь понимаю, с php только разбираюсь, как видите с get запросом понятно, не понятно как сделать то же на ajax но конкретно с моей ситуацией. Код который дал atanov выводит ошибку. Добавлено через 2 минуты А можно js в jq переделать, а то совсем не понятно) 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	19.05.2018, 18:55 [ТС]
	Обработчик index.php, консоль молчит. Код который выше он весь в index.php Добавлено через 3 минуты Убрал скобки, всё также), нажимаю на кнопку Рулонки тишина, Вертикалки тишина) Добавлено через 37 секунд Консоль молчит 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 18:59
	Дмитрий Дмитрий, для эксперимента замените include на echo. Что теперь выводит? 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 19:14
	Дмитрий Дмитрий, а Вы мой код использовали или свой jquery? В Вашем нет ответа сервера и размещения ответа в DOM. 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	19.05.2018, 19:27
	Дмитрий Дмитрий, ну и где ответ от сервера? 0