Php post data with jquery

jQuery.post()

Загружает данные с сервера, используя HTTP POST запрос.

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

url — адрес, на который отправляется запрос.
data — данные, отправляемые на сервер в виде формате map (наборы ключ:значение) или string (строка)
success(data, textStatus, jqXHR) — функция, вызываемая при успешном завершении ajax-запроса.
dataType — Тип данных, ожидаемых от сервера. По умолчанию jQuery определит сам.

$.post() эквивалетна:

Функция обратного вызова success, принимает ответ от сервера, который может быть в виде XML, строки, JavaScript файла или объекта JSON, в зависимости от MIME типа ответа. Это значение так же помещается в статус ответа.

Начиная с версии 1.5, функция обратного вызова success принимает объект jqXHR (в ранних версиях объект XMLHttpRequest). Классическое использование метода:

$.post('ajax/test.html', function(data) < $('.result').html(data); alert('Загрузка завершена.'); >);

Данный код делает запрос к HTML файлу и выводит его содержимое.

Страницы полученные в результате POST запроса не кэшируются ни при каких условиях.

Объект jqXHR

Начиная с версии 1.5, $.post() возвращает объект jqXHR, реализующий интерфейс deferred, что позволяет задавать дополнительные обработчики. Помимо стандартных для объекта deferred методов .done(), .fail() и .then(), с помощью которых можно устанавливать обработчики, в jqXHR реализованы их копии: .success(), .error() и .complete(). Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов.

// запускаем ajax-запрос, устанавливаем обработчики событий. // Возвращаемые методом $.get объект сохраним в переменной jqxhr для дальнейшего использования var jqxhr = $.post("example.php", function() < alert("success"); >) .done(function() < alert("second success"); >) .fail(function() < alert("error"); >) .always(function() < alert("finished"); >); // установим еще один обработчик завершения запроса jqxhr.always(function()< alert("second finished"); >);

Заметка об устаревших методах

Функции обратного действия, введённые в jQuery 1.5 устарени в версии 1.8. Вместо jqXHR.success(), jqXHR.error() и jqXHR.complete() теперь следует использовать jqXHR.done(), jqXHR.fail() и jqXHR.always().

Примеры

Сделать запрос к test.php, игнорируя ответ:

Сделать запрос к test.php, передать данные, игнорировать ответ:

Передать массив данных на сервер, игнорируя ответ:

Обработать ответ от сервера (HTML или XML в зависимости от того, что пришло):

Сделать запрос к test.cgi, предать данные, обработать ответ (HTML или XML в зависимости от того, что пришло):

$.post("test.cgi", < name: "John", time: "2pm" >) .done(function(data) < alert("Data Loaded: " + data); >);

Получить от сервера ответ в JSON формате и вывести его на страницу («John»,»time»=>»2pm»)); ?>):

$.post("test.php", function(data) < $('body').append( "Name: " + data.name ) // John .append( "Time: " + data.time ); // 2pm >, "json");

Отправка формы POST запросом и отображение результата в div

$.ajax( <      
  
    

Источник

How to Create a jQuery Ajax Post with PHP

In this short tutorial, we are going to share with you how to create a jQuery Ajax post request with PHP.

Also, you can see how to post JSON data with jQuery easily and quickly.

After checking out this tutorial, you will be able to create ajax post requests much more easily. What you need is looking through the options below.

jQuery Post Form Data with .Ajax() Method

Using the .ajax() method is one of the best solutions to the problem. Here is how you should act to create a jQuery post request with this method:

html> html> head> title>jQuery post form data with .ajax() method by codeofaninja.com title> style> div < margin: 10px; > style> head> body> h1>jQuery post form data with the .ajax() method h1> div>Filling out and submitting the form below to receive a response. div> form id="userForm" action="/form/submit" method="post"> div> input type="text" name="firstname" placeholder="Firstname" /> div> div> input type="text" name="lastname" placeholder="Lastname" /> div> div> input type="email" name="email" placeholder="Email" /> div> div> input type="submit" value="Submit" /> div> form> div id="response"> div> script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> script> script> $(document).ready(function( ) < $('#userForm').submit(function( ) < // showing that something is loading $('#response').html("Loading response. "); /* * 'post_receiver.php' - where you will be passing the form data * $(this).serialize() - for reading form data quickly * function(data) <. - data includes the response from post_receiver.php */$.ajax(< type: 'POST', url: 'post_receiver.php', data: $(this).serialize() >) .done(function(data) < // demonstrate the response $('#response').html(data); >) .fail(function( ) < // if posting your form failed alert("Posting failed."); >); // to restrain from refreshing the whole page, it returns false; >); >); script> body> html>

JQuery Post Form Data with .Post() Method

The .post method is considered a shorthand for the .ajax method. Its syntax is more descriptive. See how to use it correctly:

html> html> head> title>jQuery post form data using .post() method by codeofaninja.com title> style> div < margin: 15px; > style> head> body> h1>jQuery post form data using .post() method h1> div>Filling out and submitting the form below to receive a response. div> form id="userForm" action="/form/submit" method="post"> div> input type="text" name="firstname" placeholder="Firstname" /> div> div> input type="text" name="lastname" placeholder="Lastname" /> div> div> input type="email" name="email" placeholder="Email" /> div> div> input type="submit" value="Submit" /> div> form> div id="response"> div> script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> script> script> $(document).ready(function( ) < $('#userForm').submit(function( ) < // showing that something is loading $('#response').html("Loading response. "); /* * 'post_receiver.php' - where you will be passing the form data * $(this).serialize() - for reading form data quickly * function(data) <. - data includes the response from post_receiver.php */$.post('post_receiver.php', $(this).serialize(), function(data) < // demonstrate the response $('#response').html(data); >).fail(function( ) < //if posting your form fails alert("Posting failed."); >); // to restrain from refreshing the whole page, the page returns false; >); >); script> body> html>

jQuery Post JSON Data with .Post() Method

As an additional information, here, we provide you with an example on how to post JSON data. For that purpose, you need to generate a JSON string and post it as shown below:

html> html> head> title>jQuery post JSON data using .post() method by codeofaninja.com title> head> body> h1>jQuery post JSON data with .post() method h1> div>Click the button below to receive a response. div> input type="button" value="Post JSON" id="postJson" /> div id="response"> div> script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> script> script> $(document).ready(function( ) < $('#postJson').click(function( ) < // showing that something is loading $('#response').html("Loading response. "); /* * 'post_receiver.php' - where you will be passing the form data * $(this).serialize() - for reading form data easily * function(data) <. - data includes the response from post_receiver.php */$.post('post_receiver.php', < user_id: "143", username: "ninjazhai", website: "https://codeofaninja.com/" >, function(data) < // demonstrate the response $('#response').html(data); >).fail(function( ) < // if posting your form failed alert("Posting failed."); >); // to restrain from refreshing the whole page page returns false; >); >); script> body> html>

Why to Use jQuery for Ajax Requests?

In this snippet, we represented to you several ways of making ajax post requests with jQuery. You may ask why to use it. The reason to use it in your practice is apparent: it provides you with the simplest, short and readable code.

About jQuery Ajax Get() and Post() Methods

These methods are used for requesting data from the server using HTTP get or post request.

They are mainly applied for implementing request and response between the client and the server.

Get is used for requesting data from a particular resource. Post is used for submitting data to be processed to a particular resource.

Источник

Примеры отправки 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’,» и всё сразу заработало после этого. А я ведь ни один день ломал голову из-за этой ошибки!

Источник