Javascript отправка данных Ajax :
// Создание объекта XMLHttpRequest
let xhr = new XMLHttpRequest();
// Настройка обработчика события загрузки
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
// Обработка успешного ответа, выводим в консоль полученный текст
let response = JSON.parse(xhr.responseText);
console.log(response);
} else {
// Выводим ошибку в консоль
console.error('Ошибка :', xhr.status, xhr.statusText);
}
};
// Настройка обработчика события ошибки
xhr.onerror = function() {
console.error('Ошибка сети');
};
// Настройка и отправка запроса
xhr.open('POST', 'url страницы куда отправлять', true);
xhr.setRequestHeader('Content-Type', 'application/json');
let data = {
name: 'Name ',
age: 35
};
xhr.send(JSON.stringify(data));Кстати, везде в JS буду использовать объявление переменных let или const, а не как было ранее принято var
К слову сказать, как это выглядит на jQuery
$.ajax({
url: 'example.php', // URL
method: 'POST', // Метод запроса (GET, POST и т. д.)
data: {
name: 'Name',
age: 35
}, // Данные, которые нужно отправить
success: function(response) {
// Обработка успешного ответа от сервера
console.log(response);
},
error: function(xhr, status, error) {
// Обработка ошибок при выполнении запроса
console.log('Произошла ошибка: ' + error);
}
});
Тернарный оператор на Javascript
let a = (array.lenght >= 3) ? "длина массива больше 3 (условие true)" : "длина массива меньше трех (условия false (или иначе)";
Перебор массива на Javascript
let array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
let element = array[i];
// Обработка элемента массива
console.log(element);
}let array = [1, 2, 3, 4, 5];
array.forEach(element => {
// Обработка элемента массива
console.log(element);
});Перебор массива на Jquery
let array = [1, 2, 3, 4, 5];
$.each(array, function(index, value) {
console.log('Индекс: ' + index + ', Значение: ' + value);
});Запрос к удаленному серверу, предоставляющему API данные с авторизацией по API key на JavaScript с передачей параметров
const apiKey = 'your_api_key';
const params = { param: 'test' };
const url = new URL('https://api url nekiy/data');
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
fetch(,url {
headers: {
'Content-Type': 'application/json',
'API-Key': apiKey
}
})
.then(response => response.json())
.then(data => {
const dataArray = Array.isArray(data) ? data : [data];
console.log(dataArray);
})
.catch(error => {
console.error('Ошибка при выполнении запроса:', error);
});Вот пример подключения jQuery с авторизацией по API-key
$.ajax({
url: 'https://api url nekiy',
method: 'GET',
data: { param: 'test'},
headers: {
'Authorization': 'APIKEY'
},
dataType: 'json',
success: function(response) {
console.log(response);
let resp_data = JSON.parse(response.responseText);
},
error: function(xhr, status, error) {
console.log('Произошла ошибка: ' + error);
}
});jQuery получаем данные из полей на странице и передаем их php файлу (или куда там захотим)
$(document).ready(function() {
$('#myForm').submit(function(event) {
event.preventDefault(); // Предотвращение отправки формы по умолчанию
// Получение данных из формы
let formData = {
pole1: $('#text').val(),
pole2: $('#text2').val(),
pole3: $('input[name="checkbox"]:checked').val()
};
// Преобразование данных в JSON-массив
let jsonData = JSON.stringify(formData);
// Отправка данных посредством AJAX-запроса
$.ajax({
url: '/page.php',
method: 'POST',
data: jsonData,
contentType: 'application/json',
// Установка типа содержимого запроса
success: function(response) {
// Обработка успешного ответа от сервера
console.log(response);
},
error: function(xhr, status, error) {
// Обработка ошибок при выполнении запроса
console.log('Произошла ошибка: ' + error);
}
});
});
});
Собственно php
<?php
// Получение данных из POST-запроса
$jsonData = file_get_contents('php://input');
$formData = json_decode($jsonData, true);
// Получение данных из массива
$pole1 = $formData['pole1'];
$pole2 = $formData['pole2'];
$pole3 = $formData['pole3'];
// Обработка данных и генерация ответа
$response = 'Данные успешно получены: Данные1 - ' . $pole1 . ', Данные2 - ' . $pole2 . ', Данные3 - ' . $pole3;
// Возврат ответа в формате JSON
echo json_encode($response);
?>Простейший класс на JavaScript, который выведет введенное слово
class MyClass {
constructor(value) {
this.value = value;
}
printValue() {
const { value } = this; // Деструктуризация значения из свойства this.value
console.log(value);
}
}
// Использование класса
const instance = new MyClass('Hello, World!');
instance.printValue(); // Выведет: Hello, World!Работа с датой в JavaScript
const currentDate = new Date();
console.log('Год:', currentDate.getFullYear());
console.log('Месяц:', currentDate.getMonth() + 1); // Месяцы нумеруются с 0, поэтому добавляем 1
console.log('День:', currentDate.getDate());
console.log('Часы:', currentDate.getHours());
console.log('Минуты:', currentDate.getMinutes());
console.log('Секунды:', currentDate.getSeconds());
const tomorrow = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000); // Добавляем 1 день (24 часа * 60 минут * 60 секунд * 1000 миллисекунд)
console.log('Завтрашняя дата:', tomorrow);
const pastDate = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000); // Вычитаем 7 дней
console.log('Дата неделю назад:', pastDate);
const formattedDate = currentDate.toLocaleDateString('ru-RU');
console.log('Форматированная дата:', formattedDate);Сортировка JSON данных по дате в JavaScript
const jsonData = [
{ "name": "Объект 1", "date": "2023-01-15" },
{ "name": "Объект 2", "date": "2023-02-10" },
{ "name": "Объект 3", "date": "2023-03-05" },
{ "name": "Объект 4", "date": "2023-01-30" }
];
// Сортировка по дате
jsonData.sort((a, b) => new Date(a.date) - new Date(b.date));
// Вывод отсортированных объектов
jsonData.forEach(obj => console.log(obj));
В Node.JS есть специальный модуль FS который позволяет считать файл .json . здесь не рассматривается.
Для поиска в массиве JavaScript можно
- Метод indexOf() array.indexOf(target);
- Метод find() array.find(item => item.id === targetId);
- Метод filter() для поиска всех элементов, удовлетворяющих условию array.filter(item => item === target);
- Метод includes() (возвращает true или false если array.includes('значение') найдено
Простейшая проверка введенного текста в поле input и вывод сообщения в span, если его нет
function checkField() {
const inputField = document.getElementById('IdTextInput');
const warningSpan = document.getElementById('IdSpan');
const checkbox = document.getElementById('myCheckbox');
if (inputField.value === '') {
warningSpan.textContent = 'Поле не заполнено';
} else {
warningSpan.textContent = '';
// если поле заполнено
}
}
//проверим чекбоксы
if (checkbox.checked) {
warningSpan.textContent = 'Флажок установлен';
} else {
warningSpan.textContent = 'Флажок не установлен';
}
Как-то раз использовал Server-Sent Events. Простой пример SSE
const eventSource = new EventSource('/sse-endpoint', { headers: { 'Authorization': 'Bearer token' } });
eventSource.onmessage = (event) => {
// Обработка полученного события SSE
console.log('Получено событие SSE:', event.data);
};
eventSource.onerror = (error) => {
// Обработка ошибки SSE
console.error('Ошибка SSE:', error);
};Немножко регулярки JS + jquery
Допустим у нас есть форма, в которой нужно ввести номер телефона и поставить галочку на "я согласен". Проверяем, что в поле номер телефона (11,12 цифр и символ +) и, собственно, принято согласение. Если все верно по ajax отправляем данные в php файл, иначе ругаемся
submitButton.addEventListener('click', function() {
let phoneNumber = phoneInput.value;
let agreementChecked = agreementCheckbox.checked;
let phoneFormat = /^[0-9+]+$/;
if (phoneNumber && agreementChecked && phoneNumber.match(phoneFormat)) {
let xhr = new XMLHttpRequest();
xhr.open('POST', '/send.php', true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 || xhr.status === 200) {
phoneNumber.disabled = true;
successMessage.textContent = xhr.responseText.replace(/(<([^>]+)>)/gi, '');
} else {
}
};
xhr.send('phone=' + encodeURIComponent(phoneNumber));
} else {
errorMessage.textContent = "Пожалуйста, заполните правильно все поля и примите условия обработки персональных данных.";
}
});
Находит в тексте слово и присваиваем ему класс, другой кнопкой его сбрасываем. Например нам из кучи абзацев нужно выделить и подчеркнуть определенное слово
$(document).ready(function() {
$('#searchButton').click(function() {
var keyword = 'тест'; // Слово для поиска
var divContent = $('#IdDiv').text(); // Получение содержимого слоя
// Создание регулярного выражения с флагом 'gi' (глобальный и независимый поиск)
var regex = new RegExp(keyword, 'gi');
// Замена найденных совпадений на выделенный текст
var highlightedContent = divContent.replace(regex, function(match) {
return '<span class="highlighted">' + match + '</span>';
});
// Вставка выделенного текста обратно в слой
$('#IdDiv').html(highlightedContent);
});
$('#resetButton').click(function() {
// Удаление элементов <span> из слоя
$('#IdDiv').find('span.highlighted').contents().unwrap();
});
});ExtJS обработка нажатия на кнопку, где делаем запрос к удаленному API, получаем данные и заполняем поля в панели
handler: function () {
Ext.Ajax.useDefaultXhrHeader = false;
Ext.Ajax.cors = true;
Ext.Ajax.disableCachingParam = true;
Ext.Ajax.request({
url: 'https://api.url.org/3/' + Ext.getCmp('txtName').getValue()',
withCredentials: true,
method: 'get',
headers: 'Access-Control-Allow-Origin',
cors: true,
async: true,
success: function (response, options) {
let objAjax = Ext.decode(response.responseText);
//если там все разложено, то
Ext.getCmp('homepage').setValue(objAjax.homepage);
Ext.getCmp('name').setValue(objAjax.title);
//или
for (var j = 0; j < objAjax.results.length; j++) {
props_getid += 'Текст: ' + objAjax.results[j].id + ' - ' + objAjax.results[j].title + ' (' + objAjax.results[j].release_date.substring(0, 4) + 'г.)' + '\n';
}
//выводим все в одном поле
Ext.getCmp('result').setValue(props_getid);
//или перебираем массив в выдаче и также сплошняком заполняем
let a = ''
for (a = objAjax.genres.length; a--;) {
props += objAjax.genres[a].name + ', ';
}
Ext.getCmp('genres').setValue(props);
},
failure: function (response, options) {
alert("Ошибка: Проверьте данные в поле ввода. " + response.statusText);
}
})
}ExtJS
Как-то делая свою панель на ExtJS 3.0 для modx я долго искал как сделать выборку дат. Решил просто сделать текстовое поле с маской вводимых символов. Но оказывается достаточно просто сделать типа поля xtype: 'datefield' и тогда будет поле с календариком выбора дат, причем можно указать формат данных и формат отображения после выбора, например
items: [{
width: 133,
cls: 'container',
fieldLabel: 'Конец диапазона',
xtype: 'datefield',
format: 'd.m.Y', // Отображаем только день
submitFormat: 'Y-m-d', // Сохраняем полный формат даты (гггг-мм-дд)
emptyText: 'Дата',
name: 'to_date',
id: 'to_date',
}]Добавляем динамично или нет элементы в панель. Допустим у меня есть панель
id: 'panelActors',
xtype: "panel",
title: "Актерский состав",
А при выполнении запроса, например к API я хочу добавить в эту панель N элементов в зависимости от размера массива. Или, напримр удалить все итемы с панели. Или обновить. Для всего этого есть следующие вещи
Ext.getCmp('panelActors').removeAll();
Ext.getCmp('panelActors').update();
Ext.getCmp('panelActors').doLayout();
Ext.getCmp('panelActors').add(
{
layout: "table",
title: 'Актер ' + i + ' ',
id: 'actor' + i + '',
style: 'padding-top:10px;',
layoutConfig: {
columns: 6
},
defaults: {
bodyStyle: "padding:5px;",
style: "margin:5px;"
},
items: [
{
columnWidth: .3,
colspan: 2,
title: 'Имя',
items: [{
xtype: 'textfield',
fieldLabel: 'В главных ролях',
id: 'casts' + i + '_name',
name: 'casts' + i + '_name',
emptyText: '',
style: 'width:98%'
}]
}}]});В одной из моих задач было такое: при нажатии на кнопку в handler, идет ajax запрос, а точнее Ext.Ajax.request , который выполняет обмен данными между сервером с сайтом и удаленным сервером, получая xml, разбирая его и занося в базу. Выполнение такого запроса занимало достаточно много времени, при этом в самой панели ничего не видно и непонятно, что что-то происходит и менеджер видит только или Успех (success) или Ошибка (failure). Покопавшись в примерах ExtJS 3.4 и документации я нашел способ, показать окно анимации загрузки данных (можно даже анимацию прогресса) и даже в простом виде визуально выглядит лучше, чем простое ничего. Вот как это выглядит. При запуске handler мы делаем вначале показ Ext.MessageBox, потом делаем Ext.Ajax.request и в success и в failure просто делаем Ext.MessageBox.hide(). Таким образом мы создали некую анимацию и обращение к пользователю, что нужно ждать результата. Также можно указать еще и класс иконки, чтобы все было красиво. Вот простой код обращения. Еще обратите внимание, в request я добавил timeout, без него запрос может вернуть ошибку до того, как закончится выполнение скрипта и таймаутом мы задаем максимально время ожидания выполнения. Честно скажу, вначале меня это немного выбило из равновесия, что вроде бы скрипт на php выполняет все правильно, а request возвращает ошибку :-)
Итак, вывод информации о загрузке при запросах request в ExtJS 3.4. Класс иконок - font awesome
{
style: 'margin: 13px 0px;',
xtype: 'button',
id: 'updall',
text: '<i class="fas fa-sync"></i> Обновить расписание',
cls: 'primary-button',
handler: function () {
Ext.MessageBox.show({
msg: 'Идет обмен данными между двумя серверами, пожалуйста подождите...',
progressText: 'Обмен данными...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'fas fa-plug',
animEl: 'updall'
});
Ext.Ajax.request({
url: '/////////////',
timeout: 300000,
params: {
//здесь ваши параметры
action: 'mgr/update/all',
action: 'schedule',
},
success: function(response, options) {
//что-то делаем при успешном выполнении
Ext.getCmp('testfield-success').setText('Успешно');
Ext.MessageBox.hide();
},
failure: function (data) {
Ext.getCmp('testfield-error').setText('Ошибка');
Ext.MessageBox.hide();
console.log(data);
}
});
}
},Единственное, что стоит отметить, можно решить по разному задачу, это один из видом решения. А вот тут все варианты обработок таких окошек (MsgBox) при нажатии на кнопку в официальных примерах ExtJS 3
Перебор массива на VueJS
<template>
<div>
<ul>
<li v-for="item in array" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
array: [
{ id: 1, name: 'Элемент 1' },
{ id: 2, name: 'Элемент 2' },
{ id: 3, name: 'Элемент 3' }
]
};
}
};
</script>Запрашиваем данные у удаленного API и заполняем <li> данными при этом используем AXIOS
<template>
<div>
<button @click="fetchData">Загрузить данные</button>
<ul>
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
data: []
};
},
methods: {
fetchData() {
const params = {
param1: 'value1',
param2: 'value2'
};
const headers = {
'apikey': 'your-api-key'
};
axios.get('https://api.example.com/data', { params, headers })
.then(response => {
this.data = response.data;
})
.catch(error => {
console.error(error);
});
}
}
};
</script>Предположим, что я по cron получаю динамично некие данные в json файл. С помощью Vue мы будем перебирать файл json каждые 10 секунд и выведем информацию
<template>
<div>
<ul>
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
data: []
};
},
mounted() {
this.fetchData();
// Запускаем запрос при монтировании компонента
setInterval(this.fetchData, 10000);
// Запускаем запрос каждые 10 секунд
},
methods: {
fetchData() {
axios.get('path/to/data.json')
.then(response => {
this.data = response.data;
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
