Как отправить событие клика на пуш-уведомление с помощью Ajax для увеличения счетчика кликов?

Всем привет! Можете, пожалуйста, подсказать, как реализовать отправку клика пользователя обратно через AJAX, чтобы увеличить счетчик кликов в базе данных? 

Вот мой код на JavaScript: 
<pre><code class="javascript">function getNotification() {	
	if (!Notification) {
		$('body').append('&lt;h4 style="color:red"&gt;*Browser does not support Web Notification&lt;/h4&gt;');
		return;
	}
	if (Notification.permission !== "granted") {		
		Notification.requestPermission();
	} else {		
		$.ajax({
			url : "/ajax.php?action=app&amp;type=push_notification",
			type: "POST",
			success: function(response, textStatus, jqXHR) {
				var response = jQuery.parseJSON(response);
				if(response.result == true) {
					var notificationDetails = response.notif;
					for (var i = notificationDetails.length - 1; i &gt;= 0; i--) {
						var notificationUrl = notificationDetails[i]['url'];
						var notificationObj = new Notification(notificationDetails[i]['title'], {
							icon: notificationDetails[i]['icon'],
							body: notificationDetails[i]['message'],
						});
						notificationObj.onclick = function () {
                                                       //Что сюда добавить?
							window.open(notificationUrl); 
							notificationObj.close();     
						};
						setTimeout(function(){
							notificationObj.close();
						}, 7000);
					};
				} else {
				}
			},
			error: function(jqXHR, textStatus, errorThrown)	{}
		}); 
	}
};</code></pre> 

И часть кода на PHP:
<pre><code class="php">$arrayNotify = []; 
$rowsNotify = [];
//... условие при котором показывается уведомление ... {
$dataNotify['title'] = $userNotification['title'];
 $dataNotify['message'] = $userNotification['message'];
 $dataNotify['icon'] = $userN</code></pre> 

Спасибо!
  • 5 января 2025 г. 19:13
Ответы на вопрос 2
Чтобы отправить событие клика на пуш-уведомление с помощью AJAX для увеличения счетчика кликов, нужно обновить вашу функцию `onclick` внутри объекта уведомления. Вот как это можно реализовать:

1. **Добавьте AJAX-запрос в обработчик события клика**: Внутри функции `onclick` уведомления будет выполнен новый AJAX-запрос для увеличения счетчика кликов.

2. **Передавайте необходимые данные**: В запросе нужно отправить идентификатор уведомления или какую-либо другую информацию, необходимую для обновления базы данных.

Вот пример кода, который включает эти изменения:

### Обновленный JavaScript:

```javascript
function getNotification() {	
	if (!Notification) {
		$('body').append('<h4 style="color:red">*</h4>');
		return;
	}
	if (Notification.permission !== "granted") {		
		Notification.requestPermission();
	} else {		
		$.ajax({
			url: "/ajax.php?action=app&type=push_notification",
			type: "POST",
			success: function(response, textStatus, jqXHR) {
				var response = jQuery.parseJSON(response);
				if (response.result == true) {
					var notificationDetails = response.notif;
					for (var i = notificationDetails.length - 1; i >= 0; i--) {
						var notificationUrl = notificationDetails[i]['url'];
						var notificationId = notificationDetails[i]['id']; // предположим, что у нас есть id уведомления
						var notificationObj = new Notification(notificationDetails[i]['title'], {
							icon: notificationDetails[i]['icon'],
							body: notificationDetails[i]['message'],
						});
						notificationObj.onclick = function() {
							// Увеличиваем счетчик кликов через AJAX
							$.ajax({
								url: '/ajax.php?action=click_notify&id=' + notificationId,
								type: 'POST',
								success: function(clickResponse) {
									// Здесь можно обработать ответ, если нужно
								},
								error: function(jqXHR, textStatus, errorThrown) {
									// Обработка ошибок, если нужно
								}
							});

							window.open(notificationUrl);
							notificationObj.close();     
						};
						setTimeout(function(){
							notificationObj.close();
						}, 7000);
					};
				} else {
					// Обработка ошибки, если необходимо
				}
			},
			error: function(jqXHR, textStatus, errorThrown) {
				// Обработка ошибок, если необходимо
			}
		}); 
	}
};
```

### Дополнительный PHP-код для обработки увеличения счетчика кликов:

```php
if ($_GET['action'] === 'click_notify' && isset($_GET['id'])) {
    $notificationId = intval($_GET['id']);
    
    // Здесь вам нужно будет обновить счетчик кликов в базе данных
    $query = "UPDATE notifications SET click_count = click_count + 1 WHERE id = $notificationId";
    
    // Выполните запрос к базе данных...
    // Подключение к БД и выполнение запроса здесь

    // Вернуть ответ
    echo json_encode(['success' => true]);
}
```

### Примечания:
1. Убедитесь, что в данных уведомления есть уникальный `id`, который будет использоваться для обновления счетчика.
2. Обратите внимание на безопасность при использовании данных из GET/POST. Проверьте и экранируйте входные данные, чтобы избежать SQL-инъекций.
3. Вам может понадобиться дополнительная обработка ошибок и ответов, чтобы сделать взаимодействие более надежным.
$.ajax({
                                url: '/ajax.php',  // URL для обработки клика
                                type: 'POST',
                                data: {
                                    action: 'increment_click',  // Действие для обработки
                                    notification_id: notificationDetails[i]['id']  // ID уведомления
                                },
                                success: function(response) {
                                    console.log('Click counter updated.');
                                },
                                error: function() {
                                    // Обработка ошибок, если нужно
                                    console.log('Error updating click counter.');
                                }
                            });


Если правильно понял, ну и на пхп теперь допиши обработку
if ($_POST['action'] == 'increment_click' && isset($_POST['notification_id'])) {
.....  

логика обновления по инкрименту  нотификатору
}
Похожие вопросы