Боретесь с тем, как превратить обычную форму PHP в форму, которая отправляется с использованием JQuery?

Question

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

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

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

Основное недоразумение, которое я испытываю, заключается в том, что мои действия формы указывают нана той же странице, где у меня есть весь мой php-код для получения значений и построения запроса MySQL и т. д., поэтому я не знаю, как использовать success часть запроса AJAX.

полный код длястраница, если вы хотите ее увидеть, это здесь

Скрипка, показывающая расширенный поиск, здесь: Продвинутая скрипта поиска

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

Answer 1

Мы, вы, конечно же, проделали тяжелую работу здесь ;-) сторона jQuery довольно проста. Вы запрашиваете на сервере сериализованные данные формы. Что-то, что поможет вам выбрать правильный путь:

$form = $('.advancedsearchform');

$form.submit(function() {

    $.ajax($form.attr('action'), {
      data: $form.serialize(),
      dataType: 'JSON',
      type: 'post', 

          beforeSend: function() {
            var $load = $('#loadingmessage');
            if (!$load.length)
            {
                $load = $('<div id="loadingmessage">').appendTo($form);
            }
            $load.html('Loading... Please wait...');
        },

        success: function(response) {
            // response is the text sent back by server
            // maybe you could use json_encode in PHP with a success message?
        },

        complete: function() {
            // Hide loading message:
            $('#loadingmessage').hide();
        }
    });

      return false; // Cancel default event
});

Answer 2

Здесь есть 2 способа:

1. Рендеринг разделенной страницы и код обработки поиска.Код обработки поиска должен возвращать результаты поиска в определенном формате (HTML, XML, JSON).После получения результатов поиска вы можете отображать их любым удобным для вас способом.

2. Сохраняйте код в том виде, в каком он есть, и анализируйте данные, возвращаемые вызовом AJAX, чтобы извлечь из него раздел результатов поиска.Если вы пойдете по этому пути, AJAX call вернет полную страницу в результате.Поэтому, используя метод jQuery find, вам нужно извлечь из него раздел результатов поиска.

Это ответит на ваш вопрос?

Answer 3

Используйте плагин jQuery Form . Это очень простой способ AJAXify существующей формы.