Аякс горе. Отправка без обновления. Мне нужна помощь

Question

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

У меня есть поле автозаполнения, которое получает мои результаты из базы данных и заполняет текстовое поле очень хорошо. Когда я разработал это около 6 месяцев назад, я искал в базе данных значение, а не значение ключа. Сегодня это проблема, и ее нужно исправить.

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

Сомоне, пожалуйста, помогите мне с этим? Это кажется достаточно простым, но опять же, javascript никогда не был моим делом, поэтому я потерян.

Вот весь соответствующий код. Кроме того, я не думаю, по крайней мере из примеров кода, которые я видел до сих пор, что мне даже нужен тег формы. Я прав в этом? В идеале я хочу отправить найденное значение ajax с помощью кнопки ввода, а НЕ с помощью кнопки.

Итак, просто чтобы уточнить, вот что происходит. Пользователь вводит 2 или 3 буквы. Ajax запрашивает базу данных в операторе «LIKE» и возвращает совпадения. Пользователь выбирает тот, который ему нужен, а затем идентификатор отправляется в мой метод и возвращает точную запись в другом окне.

<form method="post" class="hdrForm" id="search" action="../../index.php?cer=2" target="_top">
<input type="text" name="string" class="hdrInput" id="string" value="Quick Search"><div id="acDiv"></div>

</form>

---

Примечание. Мне нужно "id" в этой функции для отправки. Прямо сейчас я получаю POST val от тега формы, и это не правильно, но как?

  AC.chooseFunc = function(id,label)
  {
    document.forms.search.submit();
  }

Спасибо за любую помощь, которую вы, ребята, можете оказать мне в этом.

Answer 1

Взгляните на jQuery . Это библиотека JavaScript. Он содержит функциональность для выполнения Ajax.

• Документация по jQuery Ajax .

Answer 2

У вас две проблемы. Во-первых, вы указываете форму для отправки:

document.forms.search.submit();

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

Я согласен с авторами, что было бы неплохо использовать jQuery или что-то еще, чтобы сделать ваши представления на основе ajax. Нечто подобное this может использоваться внутри вашей функции "AC.chooseFunc" вместо отправки формы.

И да, если вы полностью используете ajax, вам даже не нужен тег формы.

Answer 3

document.getElementById("search").onsubmit = function() {
    // Do what you want with the form
    return false; // Stops submit continuing
}

Это также изящно ухудшается (если ваша серверная программа написана правильно) в том смысле, что пользователи без javascript получают форму, нормально переданную на страницу в атрибуте action, без AJAX.

Я бы предложил вам использовать фреймворк, такой как jQuery. Доступен базовый учебник (включая AJAX)