Подскажите как добавить запись без перезагрузки страницы

Тема в разделе "JavaScript", создана пользователем StrikeOFF, 22 май 2013.

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

    StrikeOFF ♥kan inte lyfta utan lift♥

    Регистр.:
    20 мар 2010
    Сообщения:
    362
    Симпатии:
    200
    Нужна формочка(Nickname, Mail, Text) которая добавляет запись на страницу.

    Мы пишем комментарий, нажимаем Submit и надпись появляется в определенном месте.
    Пишем еще один - добавляется под ней. Тоесть чтобы можно было выводить вводимую инфу с учетом что вокруг будет появлятся нужный html, чтобы не портить внешний вид.

    Сохранение коммента на странице не нужно, перезагрузил - все исчезло.
     
  2. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.723
    Симпатии:
    2.098
    это делается с помощью ajax и манипуляций с DOM, посмотрите в сторону jquery или prototype, примеров предостаточно. пример очень уж общий, чтоб что либо более конкретное советовать.
     
  3. StrikeOFF

    StrikeOFF ♥kan inte lyfta utan lift♥

    Регистр.:
    20 мар 2010
    Сообщения:
    362
    Симпатии:
    200
    А можно тыкнуть в меня урлом или примером? я бы не постил сюда, если бы не искал
     
  4. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.723
    Симпатии:
    2.098
    http://api.jquery.com/jQuery.ajax/ (это подразумевает, что запрос будет идти на сервер и там что-то исполняться и возращаться результатом)
    http://api.jquery.com/category/manipulation/

    ну и http://ruseller.com/lessons.php?rub=32&id=1452
    http://codething.ru/ajax.php
    http://www.koz1024.net/interfaces/jquery-ajax.html
     
  5. StrikeOFF

    StrikeOFF ♥kan inte lyfta utan lift♥

    Регистр.:
    20 мар 2010
    Сообщения:
    362
    Симпатии:
    200
    На сервер как раз не желательно. Хотелось бы чтобы за рамки страницы не выходило. Ajax просто не знаком мне ни разу. Подожду может что-то точно списывающееся сбросят. Если нет - наверное прийдется учить
     
  6. COLOBOCman

    COLOBOCman Постоялец

    Регистр.:
    26 апр 2013
    Сообщения:
    122
    Симпатии:
    30
  7. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    110
    Симпатии:
    479
    Какая, собственно цель? Мне не особо понятен смысл такого скрипта, в котором вся информация теряется при обновлении страницы. Это что-то в стиле "сижу, флужу сам с собой" получается... :conf:
     
    StrikeOFF нравится это.
  8. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    110
    Симпатии:
    479
    HTML:
    <html>
        <head>
            <title>Test</title>
            
            <script type="text/javascript">
                function placeMessage ( ) {
                    
                    var _nickname = document.getElementById('nickname').value; // Получаем ник
                    if (_nickname.length == 0) { // Проверка наличия текста
                        alert ('Enter your nickname!');
                        return false;
                    }
                    
                    var _mail = document.getElementById('mail').value; // Получаем почту
                    if (_mail.length == 0) { // Проверка наличия текста
                        alert ('Enter your mail!');
                        return false;
                    }
                    
                    var _text = document.getElementById('text').value; // Получаем текст
                    if (_text.length == 0) { // Проверка наличия текста
                        alert ('Enter the text!');
                        return false;
                    }
                    
                    var _code = '<div><a href="mailto:' + _mail + '">' + _nickname + '</a> says: ' + _text + '</div><hr />'; // формируем код
                    var _obj = document.getElementById('messages-content'); // выбираем слой для вставки кода
                    _obj.innerHTML = _obj.innerHTML + _code;  // добавляем код 
                    
                    document.getElementById('nickname').value = ''; // очищаем поля формы
                    document.getElementById('mail').value = '';
                    document.getElementById('text').value = '';
                }
            </script>
        </head>
        <body>
            <div id="messages-content"></div>
            
            <div id="message-form">
                <form action="index.html" onSubmit="javascript:placeMessage();return false;">
                    <p>Nickname:</p>
                    <input id="nickname" name="nickname" type="text" />
                    
                    <p>Mail:</p>
                    <input id="mail" name="mail" type="text" />
                    
                    <p>Text:</p>
                    <textarea id="text" name="text" rows="3"></textarea><br />
                    
                    <input name="submit" type="submit" value="Submit" />
                </form>
            </div>
        </body>
    </html>
    Самый простой пример, без использования сторонних библиотек. В примере отсутствуют любые проверки на наличие xss, валидатор почтового адреса, и вообще, это самый примитивный пример. Так что, я бы не советовал использовать его для чего-то серьезного.
     
    StrikeOFF нравится это.
Статус темы:
Закрыта.