За последние 24 часа нас посетили 20783 программиста и 1133 робота. Сейчас ищут 409 программистов ...

Одна функция ajax для всех форм.

Тема в разделе "PHP для новичков", создана пользователем Konstant1n, 11 мар 2019.

Метки:
  1. Konstant1n

    Konstant1n Активный пользователь

    С нами с:
    14 авг 2017
    Сообщения:
    273
    Симпатии:
    1
    Адрес:
    Волгоград
    На сайте есть несколько форм и только одна функция для отправки данных форм по ajax. Это правильно? Или лучше создать для каждой формы отдельную функцию для отправки данных по ajax?

    Есть случаи, когда после, например, создания чего-то, требуется добавить его на страницу,
    после удаления - убрать из страницы. Если этого не делать, то надо обновлять страницу после каждого действия, чтобы данные на странице обновились.

    Действий всего три: на создание, изменение (сохранение), удаление.
     
  2. Вероломство

    Вероломство Активный пользователь

    С нами с:
    19 июн 2017
    Сообщения:
    615
    Симпатии:
    24
    Код (Javascript):
    1. $(function () {
    2.     $(document).on('submit', 'form', function (event) {
    3.         event.preventDefault();
    4.         let button = $(this).find('button');
    5.         $.post(this.action, $(this).serialize() + '&' + button.attr('name') + '=' + button.val(), function (json) {
    6.             console.info(json);
    7.         }, 'json').fail(function (error) {
    8.             console.error(error.responseText);
    9.         });
    10.     });
    11. });
     
    Konstant1n нравится это.
  3. Babka_Gadalka

    Babka_Gadalka Активный пользователь

    С нами с:
    16 фев 2019
    Сообщения:
    162
    Симпатии:
    23
    Адрес:
    Москва, Пушкина, Избушкина, 2й этаж душечка.
    PHP:
    1. $(function()
    2. {
    3.     $( 'body' ).on( 'submit', 'form' function ( e )
    4.     {
    5.         e.preventDefault();
    6.        
    7.         var obj = new FormData( $( this ).get(0) );
    8.        
    9.         console.log( obj );
    10.        
    11.         $.ajax(
    12.         {
    13.             url: $( this ).attr( 'action' ),
    14.             type: $( this ).attr( 'method' ),
    15.             contentType: false,
    16.             processData: false,
    17.             data: obj,
    18.             dataType: 'JSON',
    19.             success: function ( json )
    20.             {
    21.                 console.log( json );
    22.                
    23.                 // ...
    24.             }
    25.         });
    26.     });
    27. });
    --- Добавлено ---
    HTML:
    1.         <form id = "form" action="/74990/sum.php" method="GET">
    2.             <input name="a" type="number" value="1,45" step="0.01"><br>
    3.             <input name="b" type="number" value="1" step="0.01"><br>
    4.             <input type="submit" value="Сложение"><br>
    5.         </form>
     
    Konstant1n нравится это.
  4. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.787
    Симпатии:
    646
    Зависит от обстоятельств. Обычно одна базовая (при использовании чистого JS) и обертки на нее. Для однотипных форм обычно достаточно универсальной ф-ции. Но у вас три разных действия, поэтому ХЗ. Если создание сопровождается заполнением тех же полей, что и при редактировании, наверно можно и совместить. Хотя я обычно использую алгоритм создания, расщепленный на ввод идентификатора (или просто клик по кнопке с присвоением дефолтного/автоикрементального идентификатора) и обычное редактирование.
    --- Добавлено ---
    Нужно четко различать действия по визуализации форм и собственно изменению значений на сервере.
     
    Konstant1n нравится это.
  5. Вероломство

    Вероломство Активный пользователь

    С нами с:
    19 июн 2017
    Сообщения:
    615
    Симпатии:
    24
    а теперь отправьте ajax при помощи Вашего кода, используя тег button )))

    и вот тут не нужно разбирать на запчасти

    url: $( this ).attr( 'action' ),
    type: $( this ).attr( 'method' ),

    будет работать и так

    url: this.action,
    type: this.method,
    --- Добавлено ---
    3 разных действия он в обработчике исполнит, ему всего лишь нужно кнопку нажать для запуска кода в обработчике )))
    --- Добавлено ---
    кстати есть ещё такая схема
    HTML:
    1.  
    2. <form action="/action_page.php" method="get">
    3.   First name: <input type="text" name="fname"><br>
    4.   Last name: <input type="text" name="lname"><br>
    5. <button type="submit">Submit</button><br>
    6. <button type="submit" formaction="/action_page2.php">Submit to another page</button>
    7. </form>
    8.  
    может быть кто-то поделится аяксом под неё :)
     
    Konstant1n нравится это.
  6. Konstant1n

    Konstant1n Активный пользователь

    С нами с:
    14 авг 2017
    Сообщения:
    273
    Симпатии:
    1
    Адрес:
    Волгоград
    у меня сейчас одна для всех. проблема возникает, когда после завершения этой функции, надо сделать операции со страницей и эти операции различные.
     
  7. Вероломство

    Вероломство Активный пользователь

    С нами с:
    19 июн 2017
    Сообщения:
    615
    Симпатии:
    24
    ну вот, например, анимация сообщений, если Вам такого рода действия нужны на странице

    HTML:
    1. <div id="alert">Тут выводятся сообщения с анимацией</div>
    2. <form action="handler.php">
    3.     <button name="do" value"Тестовое сообщение">Отправить</button>
    4. </form>
    Код (Javascript):
    1. let submit = true;
    2.     $(document).on('submit', 'form', function (event) {
    3.         event.preventDefault();
    4.         if (submit) {
    5.             submit = false;// запрещаем повторное нажатие кнопки до окончания анимации
    6.             let button = $(this).find('button'),
    7.                 alert = $('#alert').html();
    8.             $.post(this.action, $(this).serialize() + '&' + button.attr('name') + '=' + button.val(), function (json) {
    9.                 $('#alert').html(json.test).fadeOut(3000, function () {
    10.                     $(this).html(alert).show();
    11.                     submit = true;
    12.                     // тут что-то делаем, после окончания анимации
    13.                 });
    14.             }, 'json').fail(function (error) {
    15.                 console.error(error.responseText);
    16.             });
    17.         }
    18.     });
    PHP:
    1. // handler.php
    2. if (filter_has_var(0, 'do')) echo json_encode(['test' => $_POST['do']]);
     
  8. Babka_Gadalka

    Babka_Gadalka Активный пользователь

    С нами с:
    16 фев 2019
    Сообщения:
    162
    Симпатии:
    23
    Адрес:
    Москва, Пушкина, Избушкина, 2й этаж душечка.
    потом будет вопрос с тегом a ?
    Или вовсе место привычной, стандартной формы, использовать div контейнеры. Тогда уж извините... под свой велосипед мутите код под себя.
    Мой код умеет с формы, файлы на сервер посылать, или как там еще это выразить.
     
  9. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.787
    Симпатии:
    646
    Ты ж вроде про MVC в соседней теме писал. Есть единый фронт? В любом случае можно повесить AJAX-обработку как на один адрес, так и на разные. Если AJAX – у тебя основной и единственный способ отправки данных, то можно спокойно использовать разные адреса, а если «довесок» или перекрытие обычного способа отправки, то можно ограничиться размещением «AJAX-сервера» на одном адресе. В принципе можно и наоборот обработку обычной отправки повесить на один адрес. Или и то, и то делать «параллельно» на любом кол-ве адресов, отличая AJAX-запросы по спец. заголовку и т.п.
     
    Konstant1n нравится это.
  10. Вероломство

    Вероломство Активный пользователь

    С нами с:
    19 июн 2017
    Сообщения:
    615
    Симпатии:
    24
    в документации по formaction написано, что при нажатии на button c атрибутом formaction его значение заменяет action у формы, как если бы это и есть action, но на самом деле это не так и в this.action мы имеем значение action, если нажата кнопка с formaction
    --- Добавлено ---
    есть тег button и не нужно из инпуток кнопки рисовать придавая им тип сабмит и имя вместо value )))
     
  11. Babka_Gadalka

    Babka_Gadalka Активный пользователь

    С нами с:
    16 фев 2019
    Сообщения:
    162
    Симпатии:
    23
    Адрес:
    Москва, Пушкина, Избушкина, 2й этаж душечка.
    есть стандарт тег для отправки формы. точка

    Все остальное - это велосипеды под свои нужд
     
  12. Вероломство

    Вероломство Активный пользователь

    С нами с:
    19 июн 2017
    Сообщения:
    615
    Симпатии:
    24
    нет, есть тег button, который submit по умолчанию и позволяет отправлять value, и не нужно из input рисовать кнопку прописывая её имя вместо значения ))) а то что Вы не смогли поместить тег в так называемую сериализацию, так это и есть велосипед использовать инпуты вместо баттонов )))
     
  13. Konstant1n

    Konstant1n Активный пользователь

    С нами с:
    14 авг 2017
    Сообщения:
    273
    Симпатии:
    1
    Адрес:
    Волгоград
    да, так и сделано, у меня различные адреса, site.local/page/new, site.local/page/save, site.local/page/delete, site.local/article/new и т.д. и одна функция ajax. проблема в другом: например требуется удалить страницу, перехожу на эту страницу, нажимаю "удалить страницу", передается id страницы по методу post, страница удаляется, приходит ответ ajax'у. после этого ответа, надо перейти, допустим, к списку страниц, на этой же странице оставаться не надо, потому что ее не будет уже. и так же сделать с остальными моделями (заметки, разделы, категории, картинки и т.д.) и не только при удалении, при добавлении например, добавить страницу в меню (а не обновлять целиком сайт).

    т.е. после успешного выполнения скрипта, требуется реализовать действия для каждой модели. например, я хочу добавить заметку (иконка, заголовок, контент). я заполняю заголовок, контент (например 100 строк) и хочу поставить иконку, нажимаю на нее, открывается окно выбора картинок. допустим картинок нет, я выбираю картинку и загружаю, и надо сделать так, чтобы картинка отобразилась в этом окне после успешного выполнения ajax запроса. понятно, что после обновления страницы целиком картинка появится в окне, но я уже контент заполнил, аж 100 строк текста )))
     
    #13 Konstant1n, 11 мар 2019
    Последнее редактирование: 11 мар 2019
  14. Вероломство

    Вероломство Активный пользователь

    С нами с:
    19 июн 2017
    Сообщения:
    615
    Симпатии:
    24
    скоро Вы ещё столкнётесь с отслеживанием без перезагрузки активна ли сессия у пользуна и нужно ли ему подгрузить стартовую страницу вместо той, на котороый он находится в то время, как сессия уже умерла )))
     
  15. Konstant1n

    Konstant1n Активный пользователь

    С нами с:
    14 авг 2017
    Сообщения:
    273
    Симпатии:
    1
    Адрес:
    Волгоград
    пользуну доступно только чтение, никаких форм для него нет.
     
  16. Вероломство

    Вероломство Активный пользователь

    С нами с:
    19 июн 2017
    Сообщения:
    615
    Симпатии:
    24
    тогда так неинтересно юзать аякс без авторизации просто для листания сайта :)

    уже если возиться с SPA то до потери сознания
     
  17. Konstant1n

    Konstant1n Активный пользователь

    С нами с:
    14 авг 2017
    Сообщения:
    273
    Симпатии:
    1
    Адрес:
    Волгоград
    ajax в админке использую
     
  18. keren

    keren Новичок

    С нами с:
    15 ноя 2017
    Сообщения:
    513
    Симпатии:
    42
    А есть пруфы того что пишешь? :)
     
  19. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.787
    Симпатии:
    646
    И чЁ? Я знаю, что такое formaction. Суть вопроса ТСа была не в этом, насколько понял.
     
    Konstant1n нравится это.
  20. Babka_Gadalka

    Babka_Gadalka Активный пользователь

    С нами с:
    16 фев 2019
    Сообщения:
    162
    Симпатии:
    23
    Адрес:
    Москва, Пушкина, Избушкина, 2й этаж душечка.
     
  21. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.787
    Симпатии:
    646
    Может, лучше не размещать кнопку удаления на странице страницы, ограничившись ее размещением в списке. Хотя в общем-то пофиг. Тут в любом случае нужен редирект на список. Серверный для обычной отправки или на JS для AJAX. Хотя для AJAX все равно как-то некрасиво получится. Сущности уже такой нет (т.е. адрес недействителен), а страница еще какое-то время висит. Или в ее адресе не отражен идентификатор удаленной страницы?
    --- Добавлено ---
    P.S. Для такого удаления можно ограничиться только обычной отправкой, без AJAX, и серверным редиректом. Просто и сердито :)
    --- Добавлено ---
    P.P.S. Иметь два разных действия удаления – вполне вменяемая практика: для списка это множественное (в общем случае) удаление, а для удаления прямо со страницы можно сделать спец. одиночное удаление.
     
  22. Вероломство

    Вероломство Активный пользователь

    С нами с:
    19 июн 2017
    Сообщения:
    615
    Симпатии:
    24
     

    Вложения:

  23. keren

    keren Новичок

    С нами с:
    15 ноя 2017
    Сообщения:
    513
    Симпатии:
    42
    @Вероломство
    Там нет четких утверждений что так правильно а так нет как у тебя.
    Сравни:
     
  24. Вероломство

    Вероломство Активный пользователь

    С нами с:
    19 июн 2017
    Сообщения:
    615
    Симпатии:
    24
    там как раз так и написано: тег для кнопки с типом submit по умолчанию
     
  25. Babka_Gadalka

    Babka_Gadalka Активный пользователь

    С нами с:
    16 фев 2019
    Сообщения:
    162
    Симпатии:
    23
    Адрес:
    Москва, Пушкина, Избушкина, 2й этаж душечка.
    тег для кнопки с типом submit по умолчанию
    ;)
    --- Добавлено ---
    https://yandex.ru/search/?text=$( this ) vs this