Ответы пользователя по тегу AJAX
  • Почему не отрабатывает js в шаблоне загруженным через fetch()?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Что-то дописать) Не все так просто. В подгруженном html-коде отсутствуют обработчики, в этом проблема. Вам надо заново установить все необходимые для работы скриптов обработчики заново.
    Ответ написан
  • Можно ли написать универсальный обработчик формы ajax+php?

    zkrvndm
    @zkrvndm
    Архитектор решений
    На стороне php обработчика берете массив $_POST и обходите его при помощи foreach. Внутри цикла уже формируйте письмо-уведомление с теми полями, которые пришли из вашей формы.
    Ответ написан
  • Как сделать последовательный вывод данных ajax по нажатию на одну кнопку?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Используйте асинхронные функции:
    let result = document.querySelector('#result');
    let button = document.querySelector('#button');
    
    button.addEventListener('click', async function() {
        result.innerHTML = await (await fetch('ajax/first-p')).text();
        result.innerHTML = await (await fetch('ajax/second-p')).text();
    });

    Запросы будут сделаны последовательно, сначала первый, потом второй. Только учтите, что в такой схеме второй запрос потом перезапишет вывод от первого запроса, но как я понял вы этого и хотите. Плюс, если у вас быстрый интернет, вы можете даже не успеть увидеть вывод от первого запроса, имеет смысл добавить задержку:

    let result = document.querySelector('#result');
    let button = document.querySelector('#button');
    
    button.addEventListener('click', async function() {
        result.innerHTML = await (await fetch('ajax/first-p')).text();
        await wait(2000); // Ждём 2 секунды, только потом продолжаем
        result.innerHTML = await (await fetch('ajax/second-p')).text();
    });
    
    // Функция для выставления задержек:
    
    function wait(ms) {
        return new Promise(function(success) {
            setTimeout(function() {
                success(true);
            }, ms);
        });
    }
    Ответ написан
  • Отправить данные формы после редиректа?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Никак. Закрытие сайта прервет загрузку файла неизбежно. Единственный адекватный выход это добавить прогресс бар, чтобы пользователь видел процесс загрузки файла и не покидал страницу преждевременно.
    Ответ написан
    Комментировать
  • Как остановить цикл до выполнения ajax?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Проще простого. Запустите в консоли:
    for (key in jsonData.checkList) {
    
    	var response = await $.ajax({
    		type: 'POST',
    		url: '/action/action.php',
    		data: jsonData.checkList[key],
    		dataType: 'json' // Указываем, что ответ надо сразу распарсить, как JSON
    	});
    	
    	console.log('Получены данные:');
    	console.dir(response);
    	
    }

    При использовании в коде не забудьте цикл обернуть в асинхронную функцию.
    Ответ написан
    Комментировать
  • Как повторно использовать функцию с объектом xmlhttprequest?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Попробуйте так:
    async function getNews(fileName, className, key, limit, offset) {
    	
    	var params = new URLSearchParams();
    	
    	params.append('key', key);
    	params.append('limit', limit);
    	params.append('offset', offset);
    	
    	var body = params.toString();
    	
    	var news = await (await fetch('server/' + fileName, {
    		'method': 'POST',
    		'headers': {
    			'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    		},
    		'body': body
    	})).text();
    	
    	if (document.querySelector(className)) {
    		document.querySelector(className).insertAdjacentHTML('beforeEnd', news);
    	} else {
    		console.log('Элемент соответствующий селектору '+className+' отсутствует на странице!');
    	}
    	
    	console.log("Ответ сервера:\n" + news);
    	
    }
    Ответ написан
    1 комментарий
  • Как передать данные из формы через cURL?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Если вам просто нужно переслать форму со своего сайта на какой-то левый сайт, делайте так.

    Создайте файл test.php со следующим содержимым:
    Нажмите здесь, чтобы развернуть скрытый текст
    <?php
    
    // Указываем браузеру, что ответ будет текстом:
    header('Content-Type: text/plain; charset=utf-8');
    
    // Включаем показ ошибок:
    
    ini_set('error_reporting', E_ALL);
    ini_set('display_errors', 1);
    ini_set('display_startup_errors', 1);
    
    // Если это POST-запрос:
    
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    
    	// Адрес для пересылки формы:
    	$url = 'http://diplom/example.php';
    
    	// Конвертируем все полученные данные с формы
    	// в строку application/x-www-form-urlencoded:
    
    	$vars = http_build_query($_POST);
    
    	// Создаём новый сеанс:
    	$curl = curl_init();
    
    	// Указываем адрес целевой страницы:
    	curl_setopt($curl, CURLOPT_URL, $url);
    
    	// О отключаем проверку SSL сертификата:
    	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
    	curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
    
    	// Устанавливаем заголовки для имитации браузера:
    
    	$headers = array(
    		'Accept: */*',
    		'Accept-Encoding: identify',
    		'Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7',
    		'Connection: keep-alive',
    		'Content-Length: '.strlen($vars),
    		'Content-Type: application/x-www-form-urlencoded',
    		'Host: '.parse_url($url)['host'],
    		'Origin: '.parse_url($url)['scheme'].'://'.parse_url($url)['host'],
    		'Referer: '.parse_url($url)['scheme'].'://'.parse_url($url)['host'].'/',
    		'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"',
    		'sec-ch-ua-mobile: ?0',
    		'Sec-Fetch-Dest: empty',
    		'Sec-Fetch-Mode: cors',
    		'Sec-Fetch-Site: cross-site',
    		'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36'
    	);
    
    	curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    
    	// Указываем, что у нас POST запрос:
    	curl_setopt($curl, CURLOPT_POST, 1);
    
    	// Разрешаем переадресацию:
    	curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
    
    	// Запрещаем прямяой вывод результата запроса:
    	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    
    	// Добавляем данные для отправки:
    	curl_setopt($curl, CURLOPT_POSTFIELDS, $vars);
    
    	// Делаем сам запрос:
    	$result = curl_exec($curl);
    
    	// Завершаем сеанс:
    	curl_close($curl);
    
    	// Выводим результат:
    	echo $result;
    
    }

    Далее, на этот файл test.php отсылайте свою форму и php-скрипт внутри него перешлет форму туда, куда вы указали.
    Ответ написан
    Комментировать
  • Почему не скачивается файл?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Artem Kirsov, делайте так. Все ваши параметры засуньте в FormData и уже его отправляйте:
    async function getFile() {
    	
    	var formData = new FormData();
    	formData.append('id', 'Ваш ID');
    	formData.append('test', 'Значение параметра test');
    	
    	var blob = await (await fetch('https://адрес_для_совершения_запроса', {
    		method: 'POST',
    		body: formData
    	})).blob();
    	
    	console.log('Файл успешно скачан:');
    	console.dir(blob);
    	
    	var link = document.createElement('a');
    	link.download = 'filename.xlsx';
    	link.href = URL.createObjectURL(blob);
    	link.click();
    	
    	return blob;
    	
    }

    Вызов функции getFile() будет возвращать промис результатом которого будет файл. Обратите внимание, что в FormData у меня всего лишь пример, как указывать параметры - вы должны там добавить свои параметры и их значения.
    Ответ написан
    4 комментария
  • Как выполнить PHP скрипт через ajax?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Все достаточно просто. PHP такой язык, что код в нем выполняется всякий раз, когда мы открывает страницу. Иными словами, для того чтобы выполнился код в некой условном файле test.php достаточно открыть его (скачать). На JavaScript для этого можно использовать fetch. Просто сделайте запрос по адресу вашего скрипта через fetch:
    https://learn.javascript.ru/fetch
    Ответ написан
    Комментировать
  • Как отправлять файлы через AJAX?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Все куда проще. Попробуйте так:
    $('form').submit(async function(event) {
    	
    	event.preventDefault(); // Предотвращаем отправку формы
    	var form = new FormData($('form')[0]); // Получаем форму
    	
    	// Отправляем форму AJAX-ом:
    	
        var response = await $.ajax({
            type: 'POST',
            url: 'mail.php',
            cache: false,
            data: form,
        });
    	
    	alert(response); // Выводим ответ
    	
    });
    Ответ написан
    4 комментария
  • Как предотвратить повторную отправку формы через enter?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Заведите переменную для записи состояния - отправлено / не отправлено. Перед отправкой формы используя банальный if проверяйте состояние этой переменной и отправляйте форму только, если она не отправлялась ранее.
    Ответ написан
  • AJAX-запрос на загрузку новой страницы?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Ниже пример функции для загрузки страниц по AJAX, без перезагрузки страницы:
    async function pageUpdate(event) {
    	
    	// Если функция вызвана без аргументов:
    	
    	if (typeof event == 'undefined') {
    		
    		// Устанавливаем обработчики
    		// на все ссылки на странице:
    		
    		$('a[href]').click(pageUpdate);
    		
    	}
    	
    	// Если функция вызвана
    	// в результате клика
    	// по ссылке:
    	
    	else {
    		
    		// Берём адрес с нажатой ссылки
    		// и записываем в переменную link:
    		
    		var link = event.target.href;
    		
    		// Если ссылка ведет на наш сайт:
    		
    		if (link.includes(location.host)) {
    			
    			// Предотвращаем переход:
    			
    			event.preventDefault();
    			
    			// Блокируем страницу, чтобы
    			// больше нельзя было кликать:
    			$('body').css('pointer-events', 'none');
    			
    			// Активируем анимацию
    			// постепенного исчезновения
    			
    			await $('body').animate({ opacity: 0 }, 1000).promise();
    			
    			// Грузим новую страницу AJAX-ом без
    			// фактической перезагрузки текущей:
    			
    			var html = await $.ajax(link);
    			var doc = new DOMParser().parseFromString(html, 'text/html');
    			var html = $('body', doc).html();
    			history.pushState(null, null, link);
    			$('body').html(html);
    			
    			// Заново ставим
    			// обработчики:
    			
    			pageUpdate();
    			
    			// Активируем анимацию
    			// постепенного появления:
    			
    			await $('body').animate({ opacity: 1 }, 1000).promise();
    			
    			// Снимаем блокировку с документа:
    			
    			$('body').css('pointer-events', '');
    			
    		}
    		
    	}
    	
    }
    
    pageUpdate();

    Функция перехватывает клики по ссылкам, добавляет анимацию и обновляет контент страницы без перезагрузки.
    Ответ написан
    8 комментариев
  • Как получить return из ajax запроса?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Используйте async / await - это наиболее просто и удобный способ.

    Пример:
    $('.post-like').click(async function(){
    	
    	var response = await $.ajax({
    		url: '/ajax/post_like.php',
    		type: 'POST',
    		dataType: 'json',
    		data: {
    			action: 'check',
    			post_id: $(this).parents('.item').attr('id')
    		}
    	});
    	
    	if (response.already_vote == 1) {
    		alert('Еденица!');
    	} else {
    		alert('Не еденица!');
    	}
    	
    });
    Ответ написан
    Комментировать
  • Как отправить массив через ajax?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Попробуйте мой вариант:
    // Функция для преобразования объекта
    // в строку формата x-www-form-urlencoded:
    
    function httpBuildQuery(object_to_convert) {
    	
    	var params = new URLSearchParams();
    	
    	var paramsGenerator = function(parent_key, iterate_object) {
    		
    		for (var current_key in iterate_object) {
    			
    			if (typeof iterate_object[current_key] == 'string' || typeof iterate_object[current_key] == 'number') {
    				
    				if (parent_key.length > 0) {
    					var property_path = parent_key + '[' + current_key + ']';
    				} else {
    					var property_path = current_key;
    				}
    				
    				params.append(property_path, iterate_object[current_key]);
    				
    			} else if (typeof iterate_object[current_key] == 'object') {
    				
    				if (parent_key.length > 0) {
    					var property_path = parent_key + '[' + current_key + ']';
    				} else {
    					var property_path = current_key;
    				}
    				
    				paramsGenerator(property_path, iterate_object[current_key]);
    				
    			}
    			
    		}
    		
    	}
    	
    	paramsGenerator('', object_to_convert);
    	
    	return params.toString();
    	
    }
    
    // Протестируем работу функции на примере:
    
    var test_object = {
    	'raz' : 'Первое свойство',
    	'dva' : 'Второе свойство',
    	'tri' : {
    		'test' : 'Тест',
    		'proverka' : 'Проверка',
    		'massiv' : [
    			'aaa',
    			'bbb',
    			'ccc',
    			{
    				'lalala' : 'lololo',
    				'tratata' : 'trototo'
    			},
    			123,
    			345,
    			567
    		]
    	}
    };
    
    var send_string = httpBuildQuery(test_object);
    
    var response = await (await fetch('/NewAdvert', {
    	method: 'POST',
    	headers: {
    		'Content-Type' : 'application/x-www-form-urlencoded'
    	},
    	body: send_string
    })).text();
    
    console.log(response);

    Вставьте это в консоли.
    Ответ написан
    Комментировать
  • Как сделать отправку ajax формы?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Здесь у вас вопрос больше по серверной части, при этом с учетом того, отправка уведомления у вас отложенная, никак не обойтись без CRON.

    В моем видении все это можно реализовать так:
    1. При отправке первой формы создаем в БД определенную запись
    2. При отправке второй формы эту запись дополняем новыми данными
    3. Каждую минуту проверяем кроном БД на наличие новых записей и если есть записи старше 3 минут (с момента последнего изменения), то шлем инфу по этой записи на почту
    Ответ написан
    Комментировать
  • Как вернуть результат асинхронного запроса?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Используйте промисы:
    async function dictionary(word) {
        var response = await $.ajax({
            type: "POST",
            url: "php/post.php",
            data: {'word':word},
            dataType: 'json'
        });
        console.log('Получен ответ сервера:');
        console.dir(response);
        return response;
    }

    Но нужно понимать как все это работает, иначе прострелите себе ногу, образно.
    Ответ написан
    Комментировать
  • Как повторно инициировать Fotoram'у после загрузки ajax контента?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Попробуйте по простому в лоб вызывать код каждую секунду:
    $(function() {
        setInterval(function() {
            $('.fotorama').fotorama();
        }, 1000);
    })

    Если ваша фоторама правильно написана, уже инициированные элементы он будет пропускать при повторных запусках, а значит способ выше допустим, хоть и не идеален. В идеале здесь надо использовать MutationObserver для отслеживание факта подгрузки контента, но мне лень писать код с ним)
    Ответ написан
  • Как по нажатию на ссылку показать адрес на карте?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Все очень просто. Допустим у вас есть 9 адресов, соответственно вы берёте и через конструктор карт Яндекса формируйте 9 разных карт девятью разными адресами. Далее, на своем сайте выводите один из адресов в виде iframe, как основной адрес и при клике на другие ваши адреса, просто меняйте атрибут src у фрейма на нужный - карта будет сама перерисовываться.

    P. S. Я практически уверен, что существует способ управлять отображением, через API самих Яндекс.Карт, но я с этим API не знаком и ничего дельного посоветовать не смогу. Вариант выше, самый простой, на мой взгляд.
    Ответ написан
    Комментировать
  • Почему не выводится alert?

    zkrvndm
    @zkrvndm
    Архитектор решений
    function send () {
                $.ajax({
                    type: "POST",
                    url: "pasha.php",
                    data: "test=1",
                    success: function(data) {
                            alert(data);
                    }
                })
            }
    Ответ написан
    Комментировать