Html script get post

Отправка POST и GET запросов через JavaScript

Существует несколько способов отправки запросов на сервер через JavaScript. Но обычно нужно не только отправить данные, но и обработать ответ сервера. Указать тип данных, который он вернет. А еще нужно запустить функцию после успешного выполнения. И не забыть про обработку ошибок, если запрос не прошел. В общем много чего еще можно перечислять. Но я это к тому, что для разных задач нужен свой подход и способ реализации. Вот именно о существующих способах и их настройке мы поговорим в этой статье.

В JavaScript есть объект XMLHttpRequest, который позволяет отправлять асинхронные HTTP-запросы серверу. Еще есть всем известная библиотека JQuery, которая тоже имеет функции для отправки запросов на сервер.

На мой взгляд работать с библиотекой удобней всего. Поскольку редко когда на сайте используют чистый JavaScript. А раз библиотека уже подключена, то проще воспользоваться уже готовой функцией, чем использовать громоздкие конструкции как альтернативу. Поэтому для отправки запросов на сервер будем использовать функции этой библиотеки.

Запрос методом GET

Самый простой способ передать запрос на сервер:

$.get('/action.php', , function(data) < console.log(data); // ответ от сервера >) .success(function() < console.log('Успешное выполнение'); >) .error(function(jqXHR) < console.log('Ошибка выполнения'); >) .complete(function() < console.log('Завершение выполнения'); >);

Где action.php — адрес запроса, — данные запроса.

Этот вариант является сокрашением функции $.ajax() . Запрос через нее будет выглядеть так:

$.ajax(< type: 'GET', url: '/action.php', data: , dataType: 'text', success: function(data) < console.log(data); >, // обработка ответа от сервера error: function(jqXHR) < console.log('Ошибка выполнения'); >, complete: function() < console.log('Завершение выполнения'); >>);

Параметр dataType задает тип данных, которые ожидаются от сервера. Может принимать значения: xml, json, script, text или html. Если не указан, то определяется автоматически.

Запрос методом POST

Идентичный методу GET, только вызов осуществляется функцией $.post() :

$.post('/action.php', , function(data) < console.log(data); // ответ от сервера >) .success(function() < console.log('Успешное выполнение'); >) .error(function(jqXHR) < console.log('Ошибка выполнения'); >) .complete(function() < console.log('Завершение выполнения'); >);

$.ajax(< type: 'POST', url: '/action.php', // адрес запроса data: , // данные запроса dataType: 'json', // тип ожидаемых данных, success: function(data) < console.log(data); >, // обработка ответа от сервера error: function(jqXHR) < console.log('Ошибка выполнения'); >, complete: function() < console.log('Завершение выполнения'); >>);

Примечание: если нужно отправить поля формы, то данные для запроса можно упорядочить функцией serialize() (например, $(«form»).serialize() ).

Запрос методом PUT

Для PUT нет именной функции. Поэтому запросы строятся через $.ajax() :

$.ajax(< type: 'PUT', url: '/action.php', // адрес запроса data: , // данные запроса dataType: 'json', // тип ожидаемых данных, success: function(data) < console.log(data); >, // обработка ответа от сервера error: function(jqXHR) < console.log('Ошибка выполнения'); >, complete: function() < console.log('Завершение выполнения'); >>);

Следует помнить, что метод поддерживается не всеми браузерами.

Запрос методом DELETE

Для DELETE тоже нет своей функции отправки на сервер. Выполняется через $.ajax() :

$.ajax(< type: 'DELETE', url: '/action.php', // адрес запроса data: , // данные запроса dataType: 'json', // тип ожидаемых данных, success: function(data) < console.log(data); >, // обработка ответа от сервера error: function(jqXHR) < console.log('Ошибка выполнения'); >, complete: function() < console.log('Завершение выполнения'); >>);

И тоже, как и метод PUT, не всеми браузерами поддерживается.

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

Источник

JS HTTP GET/POST request

In this article we show how to create HTTP GET and POST requests in JavaScript. We use the Fetch API and the Axios library.

HTTP

The is an application protocol for distributed, collaborative, hypermedia information systems. HTTP protocol is the foundation of data communication for the World Wide Web.

HTTP GET

The HTTP GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

HTTP POST

The HTTP POST method sends data to the server. It is often used when uploading a file or when submitting a completed web form.

The Fetch API

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. The API originates in the browser.

The fetch is a global function which takes url and options parameters and returns a promise. The promise resolves to the response of the request.

let promise = fetch(url, [options])

If we do not provide the options , a simple GET request downloading the contents of the url is generated.

Axios

is a promise based HTTP client for the browser and Node.js. Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations. It can be used in plain JavaScript or with a library such as Vue or React.

JS fetch GET request

The following example creates a simple GET request and processes the result as text.

We get the contents of the webcode.me webpage.

let url = 'http://webcode.me'; let res = await fetch(url);

The fetch method takes only the URL as parameter. In such a case, the default request is the GET request.

We get the body from the request as plain text.

JS fetch POST request

In the next example we create a POST request with JSON data.

The POST request is sent to http://httpbin.org/post.

This is the data to be sent.

let res = await fetch(url, < method: 'POST', headers: < 'Content-Type': 'application/json', >, body: JSON.stringify(data), >);

We set the method parameter to POST and choose the application/json for the content type. The data is stringified to the body parameter.

let ret = await res.json(); return JSON.parse(ret.data);

We get the data back as JSON string and parse it into the JSON object.

JS GET request with Axios

The following example creates a GET reqeust with Axios library.

We install the Axios module.

const axios = require('axios'); async function doGetRequest() < let res = await axios.get('http://webcode.me'); let data = res.data; console.log(data); >doGetRequest();

The example retrieves a home page from a simple website. It uses the async/await syntax.

JS POST request with Axios

In the following example, we generate a POST request with form data.

We install the form-data module.

With application/x-www-form-urlencoded the data is sent in the body of the request; the keys and values are encoded in key-value tuples separated by ‘&’, with a ‘=’ between the key and the value.

const axios = require('axios'); const FormData = require('form-data'); async function doPostRequest() < const form_data = new FormData(); form_data.append('name', 'John Doe'); form_data.append('occupation', 'gardener'); let res = await axios.post('http://httpbin.org/post', form_data, < headers: form_data.getHeaders() >); let data = res.data; console.log(data); > doPostRequest();

To produce form data in the appropriate format, we use the FormData object.

In this article we created HTTP GET/POST requests in JavaScript.

Author

My name is Jan Bodnar and I am a passionate programmer with many years of programming experience. I have been writing programming articles since 2007. So far, I have written over 1400 articles and 8 e-books. I have over eight years of experience in teaching programming.

Источник

Что такое GET, POST, PUT, PATCH, DELETE? Пошаговое руководство с помощью JavaScript Fetch API.

GET, POST, PUT, PATCH и DELETE — пять наиболее распространенных методов HTTP для получения и отправки данных на сервер.

Мы будем использовать этот поддельный API для демонстраций с благодарностью typicode на GitHub: https://jsonplaceholder.typicode.com/todos

Мы также запачкаем руки, используя JavaScript Fetch API для выполнения запросов. Fetch API — это сверхпростой встроенный интерфейс JavaScript для выполнения запросов к серверам. (Прошли те времена, когда импортировали другие интерфейсы!)

Ключевые термины:

Сервер https://jsonplaceholder.typicode.com/todos содержит 200 ресурсов. Перейдите по ссылке и убедитесь в этом сами.

Метод GET

Метод GET используется для получения данных с сервера. Это метод только для чтения, поэтому он не имеет риска изменить или повредить данные. Например, если мы вызовем метод get в нашем API, мы вернем список всех задач.

Давай попробуем!

Давайте создадим HTML-файл, который вы сможете запускать локально в браузере. Создайте файл с именем index.html и добавьте следующий код:

   
Get hands on with JavaScript’s Fetch API
 
Write your requests in the script and watch the console and network logs.
   

Загрузка этого файла приведет к выполнению сценария. Посмотрим на первый запрос:

// GET retrieve all to-do’s fetch(‘https://jsonplaceholder.typicode.com/todos') .then(response => response.json()) .then(json => console.log(json)) // will return all resources

Этот запрос вернет все, что вы видите на сервере https://jsonplaceholder.typicode.com/todos. Ответ представляет собой список из 200 ресурсов, поэтому я не буду показывать его здесь. Но вы можете зайти в свой сетевой журнал, чтобы увидеть ответ. Если вы хотите увидеть определенный ресурс, просто укажите URI для URL-адреса, например:

// GET retrieves the to-do with specific URI (in this case => response.json()) .then(json => console.log(json)) /* will return this specific resource: < “userId”: 1, “id”: 5, “title”: “laboriosam mollitia et enim quasi adipisci quia provident illum”, “completed”: false >*/

Ответ — это только один ресурс.

Метод POST

Метод POST отправляет данные на сервер и создает новый ресурс. Ресурс, который он создает, подчиняется другому родительскому ресурсу. Когда новый ресурс отправляется родительскому элементу POST, служба API автоматически связывает новый ресурс, назначая ему идентификатор (новый URI ресурса). Короче говоря, этот метод используется для создания новой записи данных.

Давай попробуем!

Метод POST с Fetch API выглядит так:

// POST adds a random id to the object sent fetch(‘https://jsonplaceholder.typicode.com/todos', < method: ‘POST’, body: JSON.stringify(< userId: 1, title: “clean room”, completed: false >), headers: < “Content-type”: “application/json; charset=UTF-8” >>) .then(response => response.json()) .then(json => console.log(json)) /* will return < “userId”: 1, “title”: “clean room”, “completed”: false, “id”: 201 >*/

Добавьте этот код в раздел скриптов вашего index.html. Обновите страницу index.html и проследите за изменениями в сетевом журнале.

Обратите внимание, что нам нужно было передать метод запроса, тело и заголовки. Мы не передавали их ранее для метода GET, потому что по умолчанию эти поля настроены для запроса GET, но нам нужно указать их для всех других типов запросов. В теле мы присваиваем значения свойствам ресурса в строковом виде. Обратите внимание, что нам не нужно назначать URI — API сделает это за нас. Как видно из ответа, API присваивает вновь созданному ресурсу идентификатор 201. (Примечание: сервер, который мы используем, является службой-заполнителем, поэтому сервер просто моделирует правильные ответы. Фактических изменений в API не происходит, поэтому не запутайтесь, если вы перейдете на https: //jsonplaceholder.typicode .com / todos , но не находите добавленный новый ресурс.)

Метод PUT

Метод PUT чаще всего используется для обновления существующего ресурса. Если вы хотите обновить определенный ресурс (который поставляется с определенным URI), вы можете вызвать метод PUT для этого URI ресурса с телом запроса, содержащим полную новую версию ресурса, который вы пытаетесь обновить.

Давай попробуем!

Вот метод put, который запрашивает изменение имени задачи с идентификатором 5:

// PUT to the resource with to change the name of task fetch(‘https://jsonplaceholder.typicode.com/todos/5', < method: ‘PUT’, body: JSON.stringify(< userId: 1, id: 5, title: “hello task”, completed: false >), headers: < “Content-type”: “application/json; charset=UTF-8” >>) .then(response => response.json()) .then(json => console.log(json)) /* will return < “userId”: 1, “id”: 5, “title”: “hello task”, “completed”: false >*/

Еще раз добавьте этот код в свой файл index.html и наблюдайте за изменениями сети. Обратите внимание, что нам нужно указать метод как PUT, и нам нужно преобразовать объект JSON, который мы передали в тело. Обратите внимание, что URL-адрес запроса — это именно ресурс, который мы хотим изменить, а тело содержит все свойства ресурса, независимо от того, нужно ли изменять все свойства. В ответ будет новая версия ресурса. (Обратите внимание еще раз, что это смоделированный ответ.)

Метод PATCH

Метод PATCH очень похож на метод PUT, поскольку он также изменяет существующий ресурс. Разница в том, что для метода PUT тело запроса содержит полную новую версию, тогда как для метода PATCH тело запроса должно содержать только определенные изменения ресурса, в частности набор инструкций, описывающих, как этот ресурс должен быть изменен. , и служба API создаст новую версию в соответствии с этой инструкцией.

Давай попробуем!

// PATCH to the resource update that task is completed fetch(‘https://jsonplaceholder.typicode.com/todos/1', < method: ‘PATCH’, body: JSON.stringify(< completed: true >), headers: < “Content-type”: “application/json; charset=UTF-8” >>) .then(response => response.json()) .then(json => console.log(json)) /* will return < “userId”: 1, “id”: 1, “title”: “delectus aut autem”, “completed”: true >*/

Как вы можете видеть здесь, запрос очень похож на запрос PUT, но тело запроса содержит только свойство ресурса, которое необходимо изменить. Ответ — новая версия ресурса.

Метод DELETE

Метод DELETE используется для удаления ресурса, указанного в его URI.

Давай попробуем!

Запрос DELETE для удаления определенного ресурса выглядит просто так:

// DELETE task with < method: ‘DELETE’ >) // empty response: <>

Заключение

Любой, кто хочет создать законченное приложение, должен знать, как запрашивать базу данных. Практически все приложения требуют, чтобы вы извлекали и сохраняли данные из базы данных. Этих методов запроса более чем достаточно для полнофункционального приложения. Новый Fetch API Javascript чрезвычайно прост в использовании. Независимо от того, работали ли вы с API раньше, его легко освоить или адаптироваться. Тем не менее, фундаментальное понимание каждого из этих запросов позволит вам адаптироваться к другим видам методов HTTP-запросов.

Источник