Обработка нажатия на картинку

@fidel42rus · Регистрация: 24.10.2015

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

Друзья опять я к вам) Суть заключается в следующем, при нажатии на одну из картинок в базу должно заносится то что выбрал пользователь, не могу понять как определить куда он нажал на первую картинку или на вторую, и занести результат в БД, к примеру в 1 поле если 1 картинка или во 2 если 2 картинка соответственно.

код прилагаю:

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
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Заголовок)</title> 
<link href="styles.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/custom.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
 
</head> 
<body> 
  <div id="content"> 
  <div id="about"></div> 
  <div id="latest_work"> 
  <div  id="latest_work_title" align="center"><span class="title_color1 " align="center"><p align="center">Вам понравилось у нас?</p></span> <span class="title_color2"></span></div> 
  <div id="images"><a href="#" id="up"><img src="images/01.png" alt="aetuts" width="260" height="350" border="0" class="latest_img" onClick="chg(this.id)"/></a><a href="#" id="down"><img src="images/02.png" alt="audiotuts" width="260" height="350" class="latest_img" /></a></div> 
  </div>  
  <div id="about"></div> 
  <div id="latest_work"> 
  <div id="latest_work_title"><span class="title_color1">Дополнительное</span> <span class="title_color2">Описание</span></div> 
  <div id="text"><p>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p></div> 
  </div>  
  <div id="about"></div> 
  </div> 
  </div> 
  
</body> 
</html>

В общем не могу понять куда вставлять обработчик, и если еще такой вопрос, допустим после зенесения данных в БД, можно ли показать модальное окно с инпутами и туда еще один обработчик запихать, с инпутами я более менее научился работать.

@Balanaar · 19.10.2016, 10:04

Чтобы обновить данные в базе из JS, нужно отправлять ajax-запрос на php-скрипт с обработчиком.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('#images a').on('click', function() {
    var id = $(this).attr('id');
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
            imgid: id,
            user: userId  // userId - некий идентификатор, определяющий пользователя (как вариант id сессии)
        },
        success: function(response) {
            console.log(response);
        },
        error: function() {
            console.log('Произошла ошибка');
        }
    });
});

Файл ajax.php:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
 
if ($mysqli->connect_errno) {
    echo "Не удалось подключиться: " . $mysqli->connect_error;
    exit();
}
$uid = $_POST['uid'];
$imgid = $_POST['imgid'];
 
$mysqli->query("INSERT INTO `table_name` (`uid`,`imgid`) VALUES ('$uid', '$imgid')");
$mysqli->close();
echo 'Успешно';

@fidel42rus · 19.10.2016, 11:33 **[ТС]**

Спасибо)) уже сделал) не знал что такое ajax) оказывается удобная штука и легкая в понимании

Добавлено через 1 минуту
правда я немного по другому сделал, через функцию отловил нажатие, и передал аяксом выполнение в php файл, он внес изменения в БД, и также со второй картинкой, а обратную связь вообще легко оказалось сделать)

@Balanaar · 19.10.2016, 11:40

fidel42rus, не за что.
Перечитал свой код и заметил ошибку. В 7ой строке ajax.php, конечно же, должно быть так:

PHP
1
$uid = $_POST['user'];

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

@fidel42rus 40 / 42 / 15 Регистрация: 24.10.2015 Сообщений: 598
	19.10.2016, 11:33 [ТС]
	Спасибо)) уже сделал) не знал что такое ajax) оказывается удобная штука и легкая в понимании Добавлено через 1 минуту правда я немного по другому сделал, через функцию отловил нажатие, и передал аяксом выполнение в php файл, он внес изменения в БД, и также со второй картинкой, а обратную связь вообще легко оказалось сделать) 0