Как сделать trim в http запросе javascript

Отправка httpdelete запроса на сервер

На странице написал JS функцию, которая перебирает все строки body table, выбирает помеченные на удаление, и отправляет запрос на сервер для удаления выбранных записей:

 function deleteSelected(idObject) < var table = document.getElementById(idObject); var rows = table.rows; var total = 0; for (var i = 1, iLen = rows.length - 1; i < iLen; i++) < var checked_ = table.rows[i].cells[21].getElementsByTagName('input')[0].checked; if (checked_ == true) < var idFriend = table.rows[i].cells[1].innerHTML; var url = "http://localhost:48329/api/APIFriends/DeleteFriend/" + idFriend; fetch(url, < method: 'DELETE', // body: JSON.stringify(data) >); > > >

Функция JS падает на

fetch(url, < method: 'DELETE', // body: JSON.stringify(data) >);

DELETE http://localhost:48329/api/APIFriends/DeleteFriend/%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%206 net::ERR_ABORTED 404 (Not Found)

Почему-то вместо корректного найденного id объекта при отправки получается такая вот абракадабра

%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%206

Но причина наверное не только в этом. Проблему со строкой запроса удалось решить удалив лишние пробелы. Новый вариант JS-функции:

function deleteSelected(idObject) < var table = document.getElementById(idObject); var rows = table.rows; var total = 0; for (var i = 1, iLen = rows.length - 1; i < iLen; i++) < var checked_ = table.rows[i].cells[21].getElementsByTagName('input')[0].checked; if (checked_ == true) < var idFriend = table.rows[i].cells[1].innerHTML; idFriend = idFriend.trim(); var url = "http://localhost:48329/api/APIFriends/DeleteFriend/" + idFriend; fetch(url, < method: 'DELETE', // body: JSON.stringify(data) "Content-Type" header >); > > >

Ошибка осталась:

DELETE http://localhost:48329/api/APIFriends/DeleteFriend/6 net::ERR_ABORTED 404 (Not Found) deleteSelected @ Friends:741 onclick @ Friends:84

Попробовал использовать вместо функции fetch() ajax() — ошибка осталась прежней:

 $.ajax(< url: url_, type: 'DELETE', success: function (response) < alert('Пользователи удалены'); console.log(response); >, error: function (result, status, er) < alert("error: " + result + " status: " + status + " er:" + er); >>);

Как отправлять запросы на сервер, при этом не перезагружая страницу

Ниже приведены несколько примеров, для которых может быть полезна отправка запросов на сервер без перезагрузки страницы:

Динамическое обновление содержимого страницы: например, приложения вроде Facebook и Twitter обновляют содержимое ленты новостей без перезагрузки страницы, используя AJAX.
Проверка допустимости формы: AJAX может использоваться для отправки данных формы на сервер для проверки их корректности, без перезагрузки страницы.
Поиск: AJAX может использоваться для предоставления результата поиска на основе параметров, введенных пользователем, без перезагрузки страницы.
Добавление товаров в корзину: AJAX может использоваться для добавления товаров в корзину без перезагрузки страницы.
Динамическое создание элементов на странице: AJAX может использоваться для создания элементов на странице на основе данных, полученных с сервера, без перезагрузки страницы.

Подключение js jquery

Для того, чтобы подключить js jquery к вашей HTML воспользоваться кодом ,который нужно вставить в теге :

Написание первого ALAX запроса

Чтобы отправить ALAX запрос , нужно вставить следующий js код на страницу:

$.ajax(< type: "POST", // Метод запроса url: "/musik/like/1", // url запроса data: < // Параметры для запроса 'id': id, >, success: function(response) < // Код который выполнится для удачного запроса console.log(response); >, error: function(response) < // Код который выполнится при ошибке запроса console.log(response); >>);

Это и весь код для выполнения асинхронного запроса ,который вставляется в тег или в раннее подключенный js файл

CSRFTOKEN

CSRF токен (Cross-Site Request Forgery) — это механизм защиты от атак подделки межсайтовых запросов.

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

CSRF токен решает эту проблему, добавляя уникальный токен к каждому запросу, который проверяется на сервере. Таким образом, если запрос не содержит действительного CSRF токена, сервер отклонит его. Это позволяет защитить веб-приложение от атак подделки межсайтовых запросов.

Тот, кто работает с Python Django, знает, что для отправки POST запросов нужен CSRF токен, поэтому нужно получить этот токен и вставить его в параметры запроса.

Функция для получения токена:

function getCookie(name) < /*"Эта функция для получения куки по имени" */ var cookieValue = null; if (document.cookie && document.cookie !== '') < var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) < var cookie = cookies[i].trim(); if (cookie.substring(0, name.length + 1) === (name + '=')) < cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; >> > return cookieValue; >

Присваиваем переменной csrftoken значение CSRFTOKEN

var csrftoken = getCookie('csrftoken');

Затем мы используем $.ajaxSetup() для определения функции обратного вызова beforeSend , которая вызывается перед отправкой каждого асинхронного запроса. В этой функции мы проверяем, не является ли запрос типом GET , HEAD , OPTIONS или TRACE , и не является ли запрос пересечением доменов, и если нет, то мы устанавливаем заголовок X-CSRFToken в значение токена CSRF.

$.ajaxSetup( >

Передаем параметры в запрос ALAX

data: < 'X-CSRFToken': csrftoken>,

function getCookie(name) < var cookieValue = null; if (document.cookie && document.cookie !== '') < var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) < var cookie = cookies[i].trim(); // Найти имя куки, начинающееся с переданного имени if (cookie.substring(0, name.length + 1) === (name + '=')) < cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; >> > return cookieValue; > function like(id) < var csrftoken = getCookie('csrftoken'); $.ajaxSetup(> >); $.ajax(< type: "POST", // Метод запроса url: "/musik/like/1", // url запроса data: < // Параметры для запроса 'id': id, 'X-CSRFToken': csrftoken >, success: function(response) < // Код который выполнится для удачного запроса console.log(response); >, error: function(response) < // Код который выполнится при ошибке запроса console.log(response); >>); >

Обработчик на сервере

Обработчик асинхронного запроса и обычного ничем не отличаются, кроме возвращаемого объета.Так ,например обычный обработчик возвращает шаблон HTML,то обработчик асинхронного запроса должен возвращать json объект.Пример написан на Python Django.

def home(request): return render(request, 'main/home.html') #Возвращает обькт render (шаблон)

def like_musik(request, id): if request.method == "POST": #Логика функции return JsonResponse()#Возвращаем Json объект

Заключение

В ходе этой статьи мы узнали о технологии AJAX и научились при помощи него отправлять асинхронные запросы.

Запрос — JS: HTTP Server

После того, как клиент делает запрос на сервер, node.js формирует объект request и передает его в наш обработчик. Request является инстансом IncomingMessage и содержит всю возможную информацию о соединении. Нас интересует только небольшая часть этих данных.

// http://localhost:4000/search?q=php console.log(request);  url: '/search?q=php', method: 'GET', headers:  host: 'localhost:4000', connection: 'close', >, /* . */ >

Важно упомянуть, что все заголовки в объекте headers представлены в нижнем регистре, причём не важно, в каком виде они были посланы на сервер. Это сильно упрощает дальнейшую работу с заголовками. Если некоторые заголовки повторяются, их значения будут перезаписаны или объединены в строчки разделённые точкой запятой, в зависимости от заголовка. В некоторых случаях это может быть нежелательным, поэтому всегда можно получить сырые заголовки, используя объект rawHeaders .

С одной стороны видно, что здесь есть все параметры запроса, с другой – есть маленькие неудобства. Выражаются они в том, что http не предоставляет возможность получить query params в виде объекта js. Для этого мы можем создать объект URL и воспользоваться его свойством searchParams .

const url = new URL(request.url, `http://$request.headers.host>`); const q = url.searchParams.get('q'); console.log(q); // => 'php'

Существует и другой способ работы с сервером ноды:

const server = http.createServer(); server.on('request', (request, response) =>  // the same kind of magic happens here! >); server.listen(port);

Как и многое другое в node.js , сервер является EventEmitter . Событие request соответствует входящему запросу.

Request EventEmitter

Объект Request так же является EventEmitter . Изучим подробнее генерируемые им события.

end

Событие end генерируется в тот момент, когда запрос целиком получен. Обычно обработчик именно на это событие содержит логику обработки запроса.

request.on('end', () =>  const message = 'Welcome to The Phonebook'; response.end(message); >);

error

В случае ошибок это будет событие error . Если это событие не будет прослушано, то возникшая ошибка превращается в исключение, что приведёт к падению программы. Таким образом, будет хорошей практикой всегда слушать это событие и, как минимум, логгировать его, а еще лучше отвечать вызывающей стороне правильным кодом ошибки.

request.on('error', err =>  // This prints the error message and stack trace to `stderr`. console.error(err.stack); >)

data

Событие, которое вызывается при получении данных. Будет рассматриваться в соответствующем уроке.

В случае, если данные не принимаются и это событие не слушается, необходимо обязательно делать вызов функции resume на объекте request , иначе запрос не начнёт обрабатываться.

Response

В общем виде запись ответа в response выглядит так:

response.write('hello world'); response.end();

response.end('hello world');

То есть в зависимости от ситуации можно передавать данные либо сразу в end , либо, если они большие, отдавать порциями через write .

По умолчанию код ответа всегда 200 . Конечно, не каждому запросу гарантируется такой ответ, в некоторых случаях нужно отправлять совсем другой код. Самый простой способ сделать это — напрямую поменять свойство statusCode .

response.statusCode = 404; // Tell the client that the resource wasn't found.

Установка заголовков делается уже через специальный метод:

response.setHeader('Content-Type', 'application/json'); response.setHeader('X-Powered-By', 'bacon');

Важно не забывать установить все заголовки до того, как начнёт отправляться тело. Это логично, ведь заголовки в http идут перед телом, а поменять порядок после отправки уже нельзя.

Всё вместе

import http from 'http'; http.createServer((request, response) =>  request.on('error', err =>  // Обрабатываем ошибки console.error(err); >).on('end', () =>  response.on('error', err =>  // Обрабатываем ошибки console.error(err); >); // Устанавливаем код ответа response.statusCode = 200; // Устанавливаем заголовки response.setHeader('Content-Type', 'application/json'); const message = 'Welcome to The Phonebook'; // Устанавливаем данные в ответе response.write(message); // Завершаем соединение response.end();

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Наши выпускники работают в компаниях:

String.prototype.trim()

Метод trim() удаляет пробельные символы с начала и конца строки. Пробельными символами в этом контексте считаются все собственно пробельные символы (пробел, табуляция, неразрывный пробел и прочие) и все символы конца строки (LF, CR и прочие).

Синтаксис

str.trim()

Описание

Метод trim() возвращает строку с вырезанными пробельными символами с её концов. Метод trim() не изменяет значение самой строки.

Примеры

Пример: использование метода trim()

Следующий пример покажет строку ‘foo’ :

var orig = " foo "; console.log(orig.trim()); // 'foo' // Другой пример, в котором .trim() убирает пробельные символы только с одной стороны. var orig = "foo "; console.log(orig.trim()); // 'foo'

Полифил

Запуск следующего кода до любого другого создаст метод trim() , если он ещё не реализуется браузером.

if (!String.prototype.trim)  (function ()  // Вырезаем BOM и неразрывный пробел String.prototype.trim = function ()  return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ""); >; >)(); >

Спецификации

Specification
ECMAScript Language Specification # sec-string.prototype.trim

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

String.prototype.trimLeft() Non-standard
String.prototype.trimRight() Non-standard

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Product help
Report an issue

Our communities

Developers

Web Technologies
Learn Web Development
MDN Plus
Hacks Blog

Website Privacy Notice
Cookies
Legal
Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Читать:

Почему в презентации не воспроизводится видео