помощь начинающим Javascript AJAX формы

Question

Привет всем, я все еще новичок во всем этом.

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

Пример.

Page1. Главная страница -Падать Javascript / Ajax об изменении выпадающего меню получить информацию со страницы 2. Форма со второй страницы теперь отображается без обновления страницы при изменении выпадающего списка. При нажатии кнопки «Отправить» со второй страницы данные формы добавляются в базу данных Mysql. Как только новые данные отправляются в базу данных sql, форма обновляется и показывает данные в базе данных mysql для конкретного идентификатора в раскрывающемся списке.

Page2. Форма выпадающая информация. Форма заполняется информацией, если для этого есть данные в базе данных. Javascript / Ajax on button submit отправляет поля ввода на страницу 3

Страница 3. вставлять данные в MySQL, используя javascript / ajax, поэтому обновление страницы не требуется

Спасибо

Answer 1

Рассмотрим следующий пример с использованием jQuery (хотя вы могли бы адаптировать его для raw js или другой библиотеки js):

function doSubmit(event) {
  event.preventDefault();
  var $this = $(this);
  $.ajax({
    url: $this.attr('action'),
    type: 'post',
    data: $this.serilaize(),
    success(responseHtml) {
      // assume responseHtml is the next form
      var newForm = ajaxifiyForm($('form', responseHtml));
      $this.unbind('submit').replaceWith(newForm);
    }
  });

  return false;
}

function ajaxifyForm(form) {
  return $(form).submit(doSubmit);
}

$(document).ready(function(){
  ajaxifyForm($('#your-form'));
});

Здесь мы полагаемся на загрузку первой страницы, чтобы форма уже была включена на стороне сервера. Когда DOM готов, мы присоединяем обработчик события к событию отправки формы. Этот обработчик отменяет обычный процесс отправки и вместо этого использует ajax. Он отправляет URL-адрес, указанный в атрибуте action.

Когда сообщение успешно, оно берет ответ HTML из этого сообщения и заменяет исходную форму им после применения того же обработчика, который мы использовали в исходной форме. Это основано на предположении, что php-скрипт (-ы), который мы публикуем, всегда возвращают следующую форму со всеми заполненными значениями.

Имейте в виду, что вы можете отправить данные файла таким способом. Для этого вам нужно использовать iframe в качестве посредника (есть и другие способы, которые не используют iframe). Вы можете поискать эту проблему в Google ajax file upload.

Answer 2

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

Что-то вроде

var queryString = '';
for(var i = 0; i < document.formName.elements.length; ++i) {
  queryString += document.formName.elements[i].name + '=';
  queryString += document.formName.elements[i].value + '&';
}
//trim off the last '&' here

ЕслиВы используете поля выбора, вам придется идентифицировать их в цикле выше и извлечь их значение немного по-другому.Формат строки запроса, который я здесь использовал, предназначен для запроса POST;в запросе GET вам нужно добавить это к URL-адресу страницы обработки формы с помощью «?»