Автоматизируйте ajax-запросы с помощью атрибутов данных HTML5

Question

Допустим, у меня есть форма:

<form>
  ...   
  <input type="submit" />
</form>

, и я хочу, чтобы она отправлялась нормально, но если у пользователя включен javascript, форму следует отправлять с использованием javascript ($ .ajax).

Поскольку у меня много подобных форм, я подумал, что смогу автоматизировать процесс обработки ajax-запросов с помощью jquery.

, поэтому я добавляю data-ajax-event="login" к форме.

Затем я вызываю $ .ajax для всех элементов, имеющих этот атрибут, отправляю запрос на site.com/ajax/ с параметром «ajax-event» и всеми полями формы.

ЭтоХорошо, пока, но проблема возникает, когда мне нужно получить ответ и решить, какое сообщение я должен отображать и где (сделать изменения в DOM из функции $ .ajax complete).

Например, логинВ результате ответа будет отправлен объект json с ошибками при возникновении ошибок входа в систему или URL-адрес, куда следует перенаправить в случае успеха.Другие формы могут отправлять HTML или любой другой.

Вы знаете, как я могу автоматизировать этот процесс тоже?Я не прошу какого-либо конкретного решения.Просто идеи о том, как мне подходить к этому.Или, может быть, примеры фреймворков, которые делают что-то вроде этого ...

Прямо сейчас у меня все разделено, весь вывод сделан из шаблонов, и вся обработка внутри PHP.Для работы ajax мне нужно выполнить некоторую обработку внутри шаблонов, и мне не нравится идея сделать это

Answer 1

Вы можете решить эту проблему, просто добавив уровень абстракции.Идея состоит в том, что всякий раз, когда вы будете отправлять информацию на сервер, код JS не будет жестко задан в какой-либо конкретной форме.Он просто зациклит все поля форм и отправит их значения на сервер.На стороне сервера вы можете обработать запрос и выяснить, какие ошибки, если таковые имеются.Затем вы можете вернуть их, привязав ошибку к определенному полю:

{
  ...,
  errors: {
     "field-1": "error message",
     "field-2": "error message",
     ...
  }
}

Затем вы можете просто выполнить цикл ошибок и для каждого ключа в errors найти соответствующее поле в DOM и добавитьсообщение об ошибке рядом с ним.

Другие мысли

Обычно рекомендуется установить капчу на формах веб-сайта, чтобы избежать спама.Поэтому я очень рекомендую, помимо автоматической обработки формы, также автоматизировать проверку капчи.Также не помешает добавить валидацию csrf.Вы можете прочитать больше об этом на здесь .