Post запрос - Пример 1
Автор Сообщение
all__ Не на форуме
Админ
*******

Сообщений: 865
Зарегистрирован: 01.2010
Сообщение: #1
Post запрос - Пример 1
Покопался в интернете и обнаружил, что в сети валяется масса нерабочих примеров применения Post запроса в JavaScript. Поэтому, решил восполнить этот недостаток, и подготовить рабочий пример.

Приложение будет отправлять число на сервер, php скрипт его умножит и вернет обратно клиенту. В этом примере кодировка windows-1251.
Создаем index.html
Код:
<HTML><HEAD>
<META content="text/html; charset=utf-8" http-equiv="Content-Type"><TITLE>Пример POST-запроса в технологии AJAX</TITLE>
</HEAD><BODY>
Введите данные: <INPUT type="text" id="data"> <INPUT type="button" value="Отправить" onclick="SendPOST()"><BR><BR>
Результат:<br>x = <span id="x1"></span><br>x^2 = <span id="x2"></span>
<script type="text/javascript" src="send.js"></script>
</BODY></HTML>

Вводить данные мы будем в input с id="data" , при нажатии кнопки будет выполняться SendPOST().
send.js - это наш скрипт
Код:
function SendPOST()
{
var data = document.getElementById('data').value; //получаем данные из текстового поля
ajaxSendPOST('post.php','q='+encodeURI(data), SendCallback);
}
function SendCallback(answer) {
    var ans = eval( '(' + answer + ')' ); // Преобразуем полученный в данных объект из текстового вида
    if (ans.res=='error') { alert(ans.msg);return; }
    if (ans.res!='ok') { alert('Странный ответ… И не "error", и не "ok"…');return; }
    document.getElementById('x1').innerHTML=ans.x1;
    document.getElementById('x2').innerHTML=ans.x2;
}

/*
Параметр data – передаваемые данные, формат:
data = 'var1='encodeURI(var1) +'&var2='encodeURI(var2);
*/
function ajaxSendPOST(xmlpage,data,callback)
{
var xmlh = null;
if(window.XMLHttpRequest)
xmlh = new XMLHttpRequest();
else
try
{ xmlh = new ActiveXObject('Msxml2.XMLHTTP'); }
catch(ex) { xmlh = new ActiveXObject('Microsoft.XMLHTTP'); }
if(xmlh)
{
xmlh.open('post', xmlpage, true);
xmlh.onreadystatechange = function(x) { if(xmlh.readyState==4) callback(xmlh.responseText); }
xmlh.setRequestHeader("Accept-Charset", "windows-1251");
xmlh.setRequestHeader("Accept-Language","ru, en");
xmlh.setRequestHeader("Connection", "close");
xmlh.setRequestHeader("Content-length", data.length); // Длинна отправляемых данных
xmlh.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlh.send(data); // отправляем данные
}
}

Осталось написать скрипт post.php
Код:
<?php
$q=$_POST['q'];
if(!$q) die('{"res":"error", "msg":"Не пришло никаких данных!"}');
echo '{"res":"ok", "x1":"'.$q.'", "x2":"'.$q*$q.'"}';
?>

Рабочий пример вы можете скачать в прикреплении.


Прикрепления
.zip  post-x2.zip (Размер: 1.59 Кб / Загрузок: 510)





Лучшая благодарность - "Мне нравится", +1 или Like! Вверху страницы.
16.02.2010 16:43
Вебсайт Найти все сообщения Цитировать это сообщение
Гость
Unregistered

 
Сообщение: #2
RE: Post запрос - Пример 1
в комментари ошибка Smile

data = 'var1='encodeURI(var1) +'&var2='encodeURI(var2);

плюсы потерялись
25.08.2011 14:54
Цитировать это сообщение
Создать ответ 


Похожие темы
Тема: Автор Ответов: Просмотров: Посл. сообщение
  Работа с canvas - простейший пример all__ 0 4 023 12.07.2011 14:30
Посл. сообщение: all__
  Post запрос timeout - Пример 2 all__ 77 10 190 16.02.2010 17:00
Посл. сообщение: all__
  Простейший пример DOM (Document Object Model) all__ 52 8 116 16.02.2010 16:33
Посл. сообщение: all__