VPF::Впервые написал js=) - Форум программистов

Predator199

Дата 28.11.2012, 18:57 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 412
Регистрация: 1.2.2012

Репутация: -1
Всего: -4

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

Что я хотел получить и получил: Отправка формы без перезагрузки страницы.
Что я сделал и как все это чудо работает:
1)Подгружаем js:

Код


var add = {
    setup: function(appendTo, logName, msgOpacity) {
        add.msgID = 'add';
        if (appendTo == undefined)
            appendTo = 'body';            
        $(appendTo)
            .append($('<div>').attr('id',add.msgID).addClass('add')
                .append('<p></p>')
            )
    },
    displayMsg: function(msg,cl) {
        if (msg == '')
            return;
        $('#'+add.msgID).html(msg);
    }
};

$(document).ready(function(){
    add.setup();
})

    $(document).ready(function() {
        $('#add-s').submit(function() {
            var data = $(this).serialize();
            $.ajax({
                type:'POST',
                url:'ajax.php?do=ajax_s',
                data:data + '&go=1',
                success:function(result) {
                    add.displayMsg(result);                        
                }
            });
        return false;
        });                        
    });

Подгружаем форму:

Код


<form id="add-s" action="" method="post">
//Пишем все необходимые нам поля.
          <input   type="submit" class="submit" value="Отправить"/>
</form>

Нужно прописать в том месте где хотим видеть сообщении от скрипта.

Код


<table id="TABL" cellspacing="0" style="margin:10px 0 18px 0;">
 Изначальное сообщение при 1-ой подгрузки страницы.
</table>

Код php скрипта(ajax.php) к которому отсылаем форму:

Код


switch($_POST['go']) {
case "1":
echo <<<HTML
<script type='text/javascript'>                            
    document.getElementById("TABL").innerHTML ='Сообщение принято.';                                   
</script>
HTML;
break;
}

Все это бред и лабиринт. Подскажите как можно что нибудь сделать попроще и попонятней. Спс.

Это сообщение отредактировал(а) Predator199 - 28.11.2012, 18:58

Arantir

Дата 28.11.2012, 22:09 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 14
Всего: 55

Ох, ничего не понял...

Для начала.

Код

switch($_POST['go']) {
case "1":
echo <<<HTML
<script type='text/javascript'>                            
    document.getElementById("TABL").innerHTML ='Сообщение принято.';                                   
</script>
HTML;
break;
}

Зачем все так усложнять? Не проще просто проверить на той же странице, что вам ответил сервер?
При успешной обработке формы делайте в ней вывод единственного значения, например, "ОК", в случае успеха, ну и так "FAIL" для ошибок. И проверяйте на странице с формой результат отправки.

Далее...

Код


        $('#add-s').submit(function() {
            var data = $(this).serialize();
            $.ajax({
                type:'POST',
                url:'ajax.php?do=ajax_s',
                data:data + '&go=1',
                success:function(result) {
                    add.displayMsg(result);                        
                }
            });

Проще использовать post().

Изучите все методы (функции) JS. Потом изучите все методы jQuery. Не на память, а просто чтобы знать, что в природе есть очень полезные штуки.

На сайте jQuery даже есть пример (внизу) http://api.jquery.com/jQuery.post/
А отправлять форму без перезагрузки следует так:

Код


  $('#add-s').submit(function(event) { // просто ловим клик по кнопочке
    event.preventDefault(); // и ничего не делаем... не переходит на url формы

    var $form = $(this), 
    url = $form.attr( 'action' ); // ссылку берем из формы

    $.post(url, 
     $form.serialize(), // пакуем информацию в форме для отправки
      function( data ) { // вызывается при получении ответа от сервера
          if (data == 'OK') // проверяем ответ сервера
              $("#TABL").html('Сообщение принято.');  // информируем юзера
          else
              $("#TABL").html('Ошибка при отправке формы.');
      }
    );
  });

Это эквивалентно вызову $.ajax(), но, как вы и просили, проще и понятнее.

Это сообщение отредактировал(а) Arantir - 28.11.2012, 22:25

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

Predator199

Дата 29.11.2012, 07:21 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 412
Регистрация: 1.2.2012

Репутация: -1
Всего: -4

Спасибо:).

Predator199

Дата 2.12.2012, 18:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 412
Регистрация: 1.2.2012

Репутация: -1
Всего: -4

Попробовал ваш пример, при нажатии на субмит(страница обновляется)

Arantir

Дата 2.12.2012, 21:47 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 14
Всего: 55

Значит вы допустили ошибку при пробовании примера... Например, ивент на элемент поставили до загрузки элемента. Или где-то выше по коду ошибка. Используйте консоль отладки на подобии firebug.

Вставьте в любое место внутри body:

Код

<form id="add-s" action="" method="post">
    <input   type="submit" class="submit" value="Отправить"/>
</form>
<div id="TABL"></div>
<script>
      $('#add-s').submit(function(event) {
        event.preventDefault();
        var $form = $(this), 
        url = $form.attr( 'action' );
        $.post(url, 
         $form.serialize(),
          function( data ) { 
            $("#TABL").html('Ответ от сервера получен успешно.');
          }
        );
      });
</script>

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »