ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer

Почему не работает formData с jquery ajax?

Есть у меня форма обратной связи, отправляющая поля формы на сервер:
data = new FormData();
        dataInput = thisMod.find "input:not([data-type=spam]),textarea"
        dataInput.each ->
          thisField = $ this
          thisFieldType = thisField.attr('type')
          thisName = thisField.attr('name')
          thisData = thisField.val()
          if thisFieldType == 'submit'
            data.append thisClassMod, thisClassMod
          else
            if thisFieldType == 'file'
              console.log thisName
            else
              data.append thisName, thisData
              console.log thisName, thisData


        dataString = thisMod.serialize()
        #bug solution for "submitVar param of FormIt"
        dataString = "#{dataString}&#{thisClassMod}=#{thisClassMod}"

        url = (typeof thisMod.attr("action") == 'undefined') ? "[[~[[*id]]]]" : thisMod.attr("action")
        resCall = require '../modal/modal'
        XHR = $.ajax
          url: url
          type: 'POST'
          processData: false
          contentType: false
          cache: false,
          data: data
        XHR.done (msg)->

          if thisClassMod == 'modal-rw'
            resCall("Спасибо за ваш отзыв",'В скором времени он будет опубликован модератором приложения', true)
          else
            resCall('Долго ждать?<br>Наберите нас прямо сейчас: ‎8 (499) 991-21-61','Спасибо! Ваша заявка отправлена!', true)
        XHR.fail (error) ->
            resCall('Возникла ошибка на сервере =(','Перезагрузите страницу', false)


dataString ajax отправляет нормально, а вот formData никак не хочет. Мне туда файлы надо аппендить (при чём я этого ещё и не сделал) - а он и без них не работает. При чём в отправке вроде всё верно, уведомление приходит об отправке - success. Но на почту никаких писем не падает.
Е*сь уже второй день - весь stackoverflow перекопал - ничего не помогает. Работает только thisMod.serialize()
На сервере MODX Revo с плагином FormIt

UPD: как обещал, модуль выложил, обновил. Ссылос оставляю.
https://github.com/WebKieth/Black-UI/tree/master/s...
  • Вопрос задан
  • 1352 просмотра
Решения вопроса 1
ShadowOfCasper
@ShadowOfCasper Автор вопроса
Middle User Interface Web Developer
UPD:
Я решил свою проблему. Как оказалось данные в FormData формировались верно и отправлялись на сервер как надо. Однако свою роль сыграла проблема FormIt, с которой часто встречаются люди, заставляя работать несколько форм с FormIt на странице. Чтобы создать несколько форм, в вызов сниппета необходимо поместить параметр submitVar, а в отправляемых данных сформировать значение этого параметра в виде submitParam=submitParam. В скрипте выше этот фрагмент отмечен комментарием #bug solution for "submitVar param of FormIt".
По итогу я сормировал данные в FormData, вложив туда по аналогии одинаковые ключ-значение submit-кнопки. Вышло как-то так:
thisClassMod = thisActiveSubmitter.attr 'name'
        formData = new FormData()
        $.fn.serializefiles = (formData)->
            obj = $ this
            $.each $(obj).find("input[type='file']"), (i, tag) ->
              $.each $(tag)[0].files, (i, file) ->
                console.log tag.name, file
                formData.append tag.name, file
                return formData
            params = $(obj).serializeArray();
            submitName = {
              name: thisClassMod
              value: thisClassMod
            }
            params.push submitName
            console.log params
            $.each params, (i, val) ->
              console.log val.name, val.value
              formData.append val.name, val.value
              return formData
            return formData;
        formData = thisMod.serializefiles(formData)

В будущем я обновлю описание и оставлю ссылку на github с описанием применения модуля. Я нахожу его куда более лёгким и универсальным, чем ajaxForm Наумкина по трём причинам:
1) Скрипт можно подружить не только с FormIt
2) Он написан более чисто и хорошо масштабируется (например, вся валидация вынесена в отдельный свитчер и опирается на data-type в полях, а не на данные в вызове сниппета, что в свою очередь требует от сервера лишнего req-res)
3) Скрипт написан только на jquery и не требует form.jquery.js и jgrowl - в .done -> и .fail -> можно вызвать любую модалку, которую хочется вызвать. Лично я написал свои, поскольку, опять же, плагины на js генерят динамические модалки, лишний раз нагружая браузер рендером разметки.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы