Покопался в интернете и обнаружил, что в сети валяется масса нерабочих примеров применения 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.'"}';
?>
Рабочий пример вы можете скачать в прикреплении.
