Отправить значения формы в скрипт без загрузки новой страницы

Question

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

http://www.example.com/myScript.pbp?value1=VALUE

есть ли способ сделать это без загрузки новой страницы? Как просто показать загрузочный оверлей на странице, пока скрипт не завершит работу и не отобразит значение на странице?

Я предполагаю, что это будет достигнуто с помощью Javascript, Ajax или чего-то подобного.

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

Answer 1

Действительно.Просто прикрепите прослушиватель событий onsubmit к вашей форме, который всегда возвращает false, чтобы предотвратить фактическую отправку вашей формы с помощью обычного запроса GET или POST.

В своем прослушивателе событий вы можете отправлять значения формы, используя XMLHttpRequest и пусть функция обратного вызова обновляет соответствующие части вашей страницы.

Но не забывайте всегда создавать запасной вариант (с обычным запросом GET или POST формы) для обработкиВаша форма на случай, если JavaScript недоступен (например, выключен, заблокирован и т. д.).

Answer 2

Вот простой javascript-объект ajax . Вы можете использовать без загрузки любой библиотеки.

Answer 3

Да, AJAX будет именно таким, как вы это сделаете. Посмотрите учебник на Tizag: http://www.tizag.com/ajaxTutorial/index.php

Это поможет вам быстро начать работу.

Answer 4

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

В Jquery есть хороший плагин формы, который вы можете сделатьследующее:

var form_values = $('#form_name').formHash();

тогда значения form_values ​​будут хэшированным массивом значений вашей формы в системе, т.е.

<form id="test">
  <input id="test1" name="test1" type="text" value="Test Text"/>
</form>

Так что form_values ​​['test1'] будет содержать значение Test Textв нем

Когда у вас есть значения, вы можете использовать некоторые другие функции jquery для отображения их на странице, например

<div id="displayDiv"></div>

, тогда ваш javascript может быть

for (key in form_values) {
  $('div#displayDiv').append('<div>Key: ' + key + ' Value: ' + form_values[key] + '</div>');
}

Это поместит ваши значения в дисплей div