Success ajax jquery php

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

Источник

AJAX jQuery PHP Return Value

I am new to AJAX and am kind of confused by what PHP passes back to the jQuery. So you have an AJAX function like this:

 $.ajax(< url: '/my/site', data: , type: 'post', success: function(output) < alert(output); >>); 

(I took this from ajax another StackOverflow page.) But on various other resources they will have the success section look like this:

I am just confused as to what dictates the naming of this variable? If the PHP ultimately echoes an array:

The data variable of the success method will hold anything you echo in PHP. You can not pass an array directly; you have to convert it to JSON first.

The variable that contains the returning php information. So it just doesn’t matter? the .ajax command will know that anything within the function () arguments is returning php information?

Also: you can’y echo an array in PHP, you can print_r or var_dump or serialize it, but echo is meant for strings or ints, etc.

4 Answers 4

An Ajax-Requests fetches a whole site. So you’ll not get any data in variables, but the whole site in the data-parameter. All echos you made together will be in this parameter. If you want to retrieve an array, you should transform it to json before.

Then you can receive it via Ajax in this way

$.ajax(< url: '/my/site', data: , dataType: 'json', type: 'post', success: function(output) < alert(output); >>); 

echo does not show anything to the user it only writes data in the response of the server, so it is sent to the client. After the ajax call received the output , It is up to you whether you show this response to the user or not.

In you PHP file, use json_encode to turn the array into a more convenient format for use in Javascript. So you would have something like:

Then, in your JavaScript, the data variable of the success method will hold the JSON. Use jQuery’s parseJSON to convert this to a JavaScript object, which will then be very easy to manipulate. I don’t know what you array contains, but you might do something like this:

$.ajax(< url: '/my/site', data: , type: 'post', success: function(data) < var obj = jQuery.parseJSON(data); alert(obj.name[0] === "John"); >>); 

Again, the data variable here will contain anything your PHP outputs, but JSON is a common and convenient way to transfer data back to your JavaScript.

Источник

How do I return a proper success/error message for JQuery .ajax() using PHP?

You need to provide the right content type if you’re using JSON dataType. Before echo-ing the json, put the correct header.

Additional fix, you should check whether the query succeed or not.

success: function(data) < if(data.status == 'success')< alert("Thank you for subscribing!"); >else if(data.status == 'error') < alert("Error on query!"); >>, 

Oh, and you should differentiate server side error and transmission error. I put the check on success part of the AJAX to check the value sent by server (so it is not transmission error).

how do store multiple varriable like $response_array[‘status’]=’success’, $response_array[‘userid’] = $userid; etc.

Just so you know, you can use this for debugging. It helped me a lot, and still does

error:function(x,e) < if (x.status==0) < alert('You are offline!!\n Please Check Your Network.'); >else if(x.status==404) < alert('Requested URL not found.'); >else if(x.status==500) < alert('Internel Server Error.'); >else if(e=='parsererror') < alert('Error.\nParsing JSON Request failed.'); >else if(e=='timeout') < alert('Request Time out.'); >else < alert('Unknow Error.\n'+x.responseText); >> 

Some people recommend using HTTP status codes, but I rather despise that practice. e.g. If you’re doing a search engine and the provided keywords have no results, the suggestion would be to return a 404 error.

However, I consider that wrong. HTTP status codes apply to the actual browserserver connection. Everything about the connect went perfectly. The browser made a request, the server invoked your handler script. The script returned ‘no rows’. Nothing in that signifies «404 page not found» — the page WAS found.

Instead, I favor divorcing the HTTP layer from the status of your server-side operations. Instead of simply returning some text in a json string, I always return a JSON data structure which encapsulates request status and request results.

$results = array( 'error' => false, 'error_msg' => 'Everything A-OK', 'data' => array(. results of request here . ) ); echo json_encode($results); 

Then in your client-side code you’d have

Источник