Jquery send request to php

Simple Ajax request example with JQuery and PHP.

Back when I was first starting out with JavaScript and JQuery, I was a bit frustrated by the lack of simple introductory JQuery Ajax examples. Most of the tutorials that I found back then were needlessly complicated or incredibly specific. In most cases, they used features that a beginner developer doesn’t need to know about (yet).

Firstly, you need to understand that an Ajax request is just like any request. The only difference is that the user doesn’t have to reload the page. For example: Instead of sending a POST request with a form, you could send off a POST request via Ajax. This would allow the user to submit the form without having to navigate to another page.

OK, let’s get started. This is a basic JQuery Ajax GET request:

In the code above, there are three parameters / options:

• type: This is type of HTTP request that you want to perform. In this example, I am sending a GET request. If you want to send a POST request instead, simply change “GET” to “POST”.
• url: This is the URL that we want to send an Ajax request to. In this case, it is “test.php”. You can change this to “example.php” or “folder/example.php” if you want to. Remember that the URL is relative to the page that the user is on.
• success: This is the function that gets called if the request has been successful. Note that this function has a parameter called data, which will contain the output from test.php. i.e. If test.php prints out the string “OK”, then this data variable will contain the string “OK”.

It is important that you play around with the code above. i.e. Change “GET” to “POST” and modify the URL. Remember: You should use the built-in developer tools in Firefox / Chrome to debug your Ajax requests. Typically, these requests will show up in the networks tab under XHR. Without these developer tools, it can be incredibly difficult to figure out what is actually going on. These developer tools will allow you to visualize the request. They will also let you know if a request is failing.

What if we want to add GET parameters (query string parameters) to our Ajax request?

$.ajax(< type: "GET", url: 'test.php', data: , success: function(data) < alert(data); >>);

As you can see, I’ve added a new parameter called “data”. This is a JavaScript object containing the data that we want to send in the request. In this case, because we are sending a GET request, these parameters will be automatically appended to the query string like so: test.php?name=Wayne

If I want to add multiple GET variables, I can do it like so:

$.ajax(< type: "GET", url: 'test.php', data: , success: function(data) < alert(data); >>);

This will send a GET request to: test.php?name=Wayne&age=27&country=Ireland

As always, you should play around with the code a bit, just to get your head around it. Try adding and removing parameters, just to see if you fully understand how to send data via a JQuery Ajax request.

OK, but what if we want to send a POST request to a file called submission.php?

$.ajax(< type: "POST", url: 'submission.php', data: , success: function(data) < alert(data); >>);

As you can see, I’ve changed the type from “GET” to “POST” and I have changed the url to submission.php. In this particular example, both name and age will be sent as POST variables (because we set the request to “POST”). This means that they can be accessed in submission.php like so:

$name = $_POST['name']; $age = $_POST['age'];

If this was a GET request, then the variables would have been sent via the query string, which would have made them accessible like so:

$name = $_GET['name']; $age = $_GET['age'];

As you can see, these variables are accessed the same way that they are accessed in a regular request.

The last piece of the puzzle is the success function, as this is the function that gets called if the Ajax request is completed successfully. In the examples above, I am simply alerting the returned data. However, in most situations, you will be using the function to show UI messages to the user. For example, if the user submits the form via Ajax, then you would use this success function to check the response and provide them with confirmation that the form was submitted successfully.

Hopefully, this article taught you the basics!

Источник

Примеры отправки AJAX JQuery

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

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

$.ajax(< url: '/index.php', /* Куда пойдет запрос */ method: 'get', /* Метод передачи (post или get) */ dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */ data: , /* Параметры передаваемые в запросе. */ success: function(data) < /* функция которая будет выполнена после успешного запроса. */ alert(data); /* В переменной data содержится ответ от index.php. */ >>);

Код можно сократить используя функцию $.get

$.get('/index.php', , function(data)< alert(data); >);

Код файла index.php

echo 'Данные приняты - ' . $_GET['text'];

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

POST запросы

$.ajax(< url: '/index.php', method: 'post', dataType: 'html', data: , success: function(data) < alert(data); >>);

Или сокращенная версия – функция $.post

$.post('/index.php', , function(data)< alert(data); >);

Код файла index.php

echo 'Данные приняты - ' . $_POST['text'];

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

• Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
• serialize можно применить только к тегу form и полям формы, т.е. $(‘div.form_container’).serialize(); – вернет пустой результат.

Пример отправки и обработки формы:

Код файла handler.php

if (empty($_POST['login'])) < echo 'Укажите логин'; >elseif (empty($_POST['password'])) < echo 'Укажите пароль'; >else

Работа с JSON

Идеальный вариант когда нужно работать с массивами данных.

Короткая версия

$.getJSON('/json.php', function(data) < alert(data.text); alert(data.error); >);

$.getJSON передает запрос только через GET.

Код файла json.php

header('Content-Type: application/json'); $result = array( 'text' => 'Текст', 'error' => 'Ошибка' ); echo json_encode($result);

Возможные проблемы

При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:

Из-за них ответ считается не валидным и считается как ошибочный запрос. В таких случаях помогает очистка буфера вывода ob_end_clean (если он используется на сайте).

. // Очистка буфера ob_end_clean(); header('Content-Type: application/json'); echo json_encode($result, JSON_UNESCAPED_UNICODE); exit();

Выполнение JS загруженного через AJAX

В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.

Или

Дождаться выполнения AJAX запроса

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

var text = ''; $.ajax( < url: '/index.php', method: 'get', dataType: 'html', success: function(data)< text = data; >>); alert(text); /* Переменная будет пустая. */

Переменная text будет пустая, а не как ожидается текст который вернул index.php Чтобы включить синхронный режим нужно добавить параметр async: false .
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в страницы.

var text = ''; $.ajax( < url: '/index.php', method: 'get', dataType: 'html', async: false, success: function(data)< text = data; >>); alert(text); /* В переменной будет результат из index.php. */

Отправка HTTP заголовков

$.ajax(< url: '/index.php', method: 'get', dataType: 'html', headers: , success: function(data) < console.dir(data); >>);

В PHP они будут доступны в массиве $_SERVER , ключ массива переводится в верхний регистр с приставкой HTTP_ , например:

Обработка ошибок

Через параметр error задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.

$.ajax(< url: '/index.php', method: 'get', dataType: 'json', success: function(data)< console.dir(data); >, error: function (jqXHR, exception) < if (jqXHR.status === 0) < alert('Not connect. Verify Network.'); >else if (jqXHR.status == 404) < alert('Requested page not found (404).'); >else if (jqXHR.status == 500) < alert('Internal Server Error (500).'); >else if (exception === 'parsererror') < alert('Requested JSON parse failed.'); >else if (exception === 'timeout') < alert('Time out error.'); >else if (exception === 'abort') < alert('Ajax request aborted.'); >else < alert('Uncaught Error. ' + jqXHR.responseText); >> >);

Комментарии 4

В примере Отправка формы через AJAX страница перезагружается. Видимо нужно добавить return false после $.ajax(<>);

$("#form").on("submit", function() $.ajax( url: '/handler.php', 
method: 'post', 
dataType: 'html', 
data: $(this).serialize(), 
success: function(data) $('#message').html(data); 
> 
>); 
return false;
>);

$("#form").on("submit", function(e). 
e.preventDefault();
>)

У меня вообще не работали POST запросы, особенно для меня, для начинающего было очень сложно, работали только GET, очень долго голову ломал почему так происходит. Нашёл пример на другом сайте, который работал долго сравнивал и думал почему так. Здесь пример не работает, а на другом сайте рабочий пример оказался.
Так вот:
$.ajax( url: ‘/index.php’,
method: ‘post’,
dataType: ‘html’,
data: ,
success: function(data) alert(data);
>
>);
Оказывается чтобы у меня заработали именно POST запросы надо было поменять строчку:
«method: ‘post’,» на:
«type: ‘post’,» и всё сразу заработало после этого. А я ведь ни один день ломал голову из-за этой ошибки!

Источник

jQuery.post()

jQuery.post( url [, data ] [, success ] [, dataType ] ) Returns: jqXHR

Description: Send data to the server using a HTTP POST request.

version added: 1.0 jQuery.post( url [, data ] [, success ] [, dataType ] )

A callback function that is executed if the request succeeds. Required if dataType is provided, but can be null in that case.

The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).

version added: 1.12-and-2.2 jQuery.post( [settings ] )

A set of key/value pairs that configure the Ajax request. All properties except for url are optional. A default can be set for any option with $.ajaxSetup(). See jQuery.ajax( settings ) for a complete list of all settings. Type will automatically be set to POST .

This is a shorthand Ajax function, which is equivalent to:

$.ajax(
 type: "POST",
 url: url,
 data: data,
 success: success,
 dataType: dataType
>);

$.post( "ajax/test.html", function( data ) 
 $( ".result" ).html( data );
>);