POST запрос на AJAX

yeaahhh · 21 Май 2010

Друзья.. Хочу научиться делать добавление записи в таблицу и её моментальное отображение на странице(без перезагрузки).. Наслышан, что с этим может помочь AJAX. Начинался всяких основ(можно сказать, что принцип работы в целом понятен), но, из-за наличия большого кол-ва новых тегов, кипения мозгов, новой информации и т.п., никак не могу сделать post запрос с ajax'ом(всё-таки язык неслабо отличается от php, css, html(в которых я могу разобраться..)). Прошу Вашей помощи..
Допустим, структура следующая:

Здесь вывод инфы из MySQL..

Далее идёт форма добавления в MySQL:

HTML:

<form action='' method='post'>
<input name='login'>
<input type="submit" name="submit" value="Отправить" />
</form>

ниже php-скрипт обработки:

PHP:

if (isset($_POST['login']))
{
include ("config.php");
$login = trim(stripslashes(htmlspecialchars($_POST['login'])));
$query = mysql_query("INSERT INTO users (login) VALUES ('$login')",$db);
if ($query == 'true') { 
$status = "Юзер добавлен";
} else {$status = "Юзер не добавлен.";};
echo $status;
}

Как я понял, начало скрипта - стандартное..(совмещение с браузерами)

HTML:

 <script language="JavaScript">
    
      function createXMLHttp() {
        if(typeof XMLHttpRequest != "undefined") { // для браузеров аля Mozilla

          return new XMLHttpRequest();
        } else if(window.ActiveXObject) { // для Internet Explorer (all versions)
          var aVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
                   "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp",
                   "Microsoft.XMLHttp"
                   ];
          for (var i = 0; i < aVersions.length; i++) {
            try { //
              var oXmlHttp = new ActiveXObject(aVersions[i]);

              return oXmlHttp;
            } catch (oError) {

            }
          }
          throw new Error("Невозможно создать объект XMLHttp.");
        }
      }
</script>

Приведите, пожалуйста, остальную, полную рабочую AJAX-часть этого процесса, опираясь на мой набросок, чтобы я смог раскурить эту тему..
Заранее огромное спасибо! :thenks:

polyetilen · 24 Май 2010

может лучше использовать какой нибудь яваскрипт фреймворк чтоб не мучится с совмещениями браузеров.
Например код с jquery такой, отпровлять данные из формы на сервер, сервер возвращает страницу в которой сообщение, это сообщение показать на странице. Плюс в этом варианте что минимум изменений а скрипт не изменился и может работать с яваскриптом или без если выключен

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script language="JavaScript" type="text/javascript">

$(document).ready(function(){
        $("#post_form").submit(function(){
            //проверка поля или можно всё проверять на сервере
            if($("#post_form input[name='login']").val()==""){
                $('#post_result').text("Заполните поле.");
                return false;
            }
            //отправляется post
            $.ajax({
                url: location.href, //пост на саму страницу
                data: $(this).serialize(), //собираем все поля и значения форы
                type: 'POST', //тип отправки
                cache: false, //не кэшировать в браузере ответ
                success: function(data){//если ответ получен запускается эта функция
                    //результат получен как вся страница это переменная data тогда выдираем из полученной страници сообщение в теге с id=post_result
                    var post_result = data.match(/<div id="post_result">(.+?)<\/div>/)[1];
                    //показываем сообщение
                    $('#post_result').text(post_result);
                    //если сообщение "Юзер добавлен." значит юзер добавлен в базу и можно обновить список юзеров на странице 
                    //можно скачать список заново через ajax или проще взять из формы значение login и добавить в список на странице в див с id=list
                    if(post_result=="Юзер добавлен."){
                        $('#list').append($("#post_form input[name='login']").val()+"<br>");
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown){//тут ошибки обрабатываются
                }
            });

            //запретить обновления страницы после нажатия кнопки
            return false;
        });
});

</script>
<title>JQuery ajax post</title>
</head>
<body>
<?
if (isset($_POST['login']))
{
    include ("config.php");
    $login = trim(stripslashes(htmlspecialchars($_POST['login'])));
    $query = mysql_query("INSERT INTO users (login) VALUES ('$login')",$db);
    if ($query == 'true') { 
    $status = "Юзер добавлен.";
} else {$status = "Юзер не добавлен.";};
    //echo $status;
} 
?>



<div id="post_result"><?=$status ?></div>

<form action='' method='post' id="post_form">
<input name='login'>
<input type="submit" name="submit" value="Отправить" />
</form>

<div id="list"></div>

</body>
</html>

другой вариан писать отдельный скрипт который будет обрабатывать только ajax запросы и отвечать только системными сообщениями (в xml, json...) а не целыми страницами. Вобщем чтото вроде api.

Zolinger · 2 Июн 2010

Есть хорошая AJAX-библиотека Для просмотра ссылки Войди или Зарегистрируйся.
Весит мало - 8 кБ. Принцип передачи данных в базу и выборка из неё достаточно просто реализуется.
Попробуй посмотреть примеры на оффсайте. Просто и информативно.

POST запрос на AJAX

yeaahhh

Старатель

polyetilen

Заблокирован

Zolinger

Постоялец