Как бы я использовал jQuery для ajaxify формы?

Question

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

Answer 1

Действие должно быть , каким бы оно ни было, если бы вы не использовали JavaScript .

Примечание: все ссылки ниже ведут в соответствующий раздел документации jQuery)

Тогда вы бы связали функцию с событием submit, которое сериализовало данные формы и использовало это для выполнения Ajax-запроса (вероятно, * 1016). * чтение URI из атрибута действия ). необходимо запретить действие по умолчанию для отправки событий.

Я считаю, что jQuery устанавливает HTTP-заголовок X-Requested-With. Поэтому вам просто нужно изменить процесс на стороне сервера, чтобы он возвращал другие данные, если они есть (с правильным значением). Это может быть так же просто, как просто переключиться на другое представление (если вы используете шаблон MVC).

Answer 2

Самый простой способ - использовать метод $ .load ().

$. Load (action, data, callback)

Действие может быть сценарием PHP, страницей ASP или просто другой веб-страницей. Если данные нулевые, он выполняет GET. В противном случае он выполняет POST. Метод обратного вызова выполняется, когда метод завершен (не обязательно успешным).

http://docs.jquery.com/Ajax/load

Например:

<form>
    $.load("scripts/processOrder.php", { item: itemID, quantity: ordered }, function {
        window.location.href = "orderComplete.htm";
    });
</form>

Когда форма отправлена, скрипт processOrder выполняется с itemID и упорядоченными аргументами, передаваемыми в качестве данных. После завершения сценария браузер перейдет на страницу orderComplete для дополнительной обработки или отображения статуса.

Если вы хотите получить больше контроля над Ajaxification, вы можете использовать методы $ .get, $ .post или $ .ajax.

Answer 3

Это зависит. Если вы просто хотите отправить свои значения без перезагрузки страницы, я предлагаю вам связать событие отправки формы с функцией, подобной

jQuery('form#myForm').bind(submitValues);

После этого вы должны установить функцию

function submitValues() {
   //do stuff here
   jQuery.ajax({
      //your ajax parameters here
   });

   //this is important to cancel the default action on submit (ergo. go to the address as defined in action
   return false;
}

Для получения дополнительной информации о команде ajax, посмотрите здесь