POST запрос на AJAX

Тема в разделе "Другие языки", создана пользователем yeaahhh, 21 май 2010.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. yeaahhh

    yeaahhh

    Регистр.:
    8 май 2008
    Сообщения:
    278
    Симпатии:
    11
    Друзья.. Хочу научиться делать добавление записи в таблицу и её моментальное отображение на странице(без перезагрузки).. Наслышан, что с этим может помочь 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:
     
  2. polyetilen

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

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    может лучше использовать какой нибудь яваскрипт фреймворк чтоб не мучится с совмещениями браузеров.
    Например код с 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.
     
    yeaahhh нравится это.
  3. Zolinger

    Zolinger Постоялец

    Регистр.:
    29 сен 2008
    Сообщения:
    111
    Симпатии:
    69
    Есть хорошая AJAX-библиотека Sajax.
    Весит мало - 8 кБ. Принцип передачи данных в базу и выборка из неё достаточно просто реализуется.
    Попробуй посмотреть примеры на оффсайте. Просто и информативно.
     
Статус темы:
Закрыта.