Простой вопрос PHP / AJAX

Question

Хорошо, поэтому я довольно новичок в веб-разработке, поэтому, вероятно, глупый вопрос:

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

Как я могу сделать такую ​​вещь.Я знаю, что это довольно широкий вопрос, но на самом деле я спрашиваю, как я могу перезагрузить небольшую часть моего веб-сайта, нажав кнопку «Отправить» и используя данные, введенные в текстовое поле, в качестве какого-либо параметра.

Мне не нужны полные ответы, просто будут полезны любые советы по правильному пути!

вот мой код для ввода и кнопка:

в голове

<script type="text/javascript" src="jquery.js"></script>
<script>
function ok(){
$.post("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });
}
</script>

в теле:

<form autocomplete="off">
  <p>
   Food <label>:</label>
   <input type="text" name="food" id="food"  / >
  </p>
  <input type="submit" id="submit" value="Submit" onclick="ok()" />

 </form>

или:

голова:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$("input[type='submit']").bind("click", function (event) {
    event.preventDefault(); // Stop a form from submitting
    $.post("/path/to/call", { /* data? */ }, function (data) {
        // Process return data here
    });
});

</script>

тело:

    <form autocomplete="off">
      <p>
       Food <label>:</label>
       <input type="text" name="food" id="food"  / >
      </p>
    <input type="submit" id="submit" value="Submit" />
</form>

Answer 1

jQuery и Ajax .

Изменить этот вход на кнопку

<button id="submit">Save</button>

Для этого я бы сделал что-то вроде:

$("button#submit]").bind("click", function (event) {
    event.preventDefault(); // Stop a form from submitting
    $.post("/path/to/call", { /* data? */ }, function (data) {
        // Process return data here
    });
});

Сначала нужно отловить событие нажатия .bind("click").Затем инициируйте вызов ajax $.post, на который вы будете отправлять данные.Эти данные поступают на сервер через массив POST.

Answer 2

Трудно ответить на ваш вопрос из того, что мало вы нам дали, но я предполагаю, что мало знаний.

Ваши поля ввода должны быть внутри тега формы. Тег формы включает в себя действие и метод. Метод должен быть «POST» для отправки данных. Действие может быть любым URL.

Вам просто нужно назвать URL вашего php-скрипта, который будет обрабатывать результаты.

Он найдет данные в $ _POST ['food'] и т. Д. Он должен создать страницу ответа - весь экран с информацией о еде и данными и формой поиска для следующей отправки, если хотите.

Если вы хотите использовать AJAX для замены части экрана, то у вас есть целый другой уровень проблем. Хитрость заключается в том, чтобы заменить содержимое тега div запрошенными данными.

Answer 3

Как сказал Джош, jQuery - это путь сюда.

Вы захотите сделать 3 вещи:

1. Присоедините обработчик кликов к кнопке, например "onclick = 'doSomething ();'"

2. В этой функции используйте jQuery для асинхронной записи в скрипт типа

   $. Post ("test.php", {name: "John", время: "2pm"}, Функция (данные) { предупреждение («Данные загружены:» + данные); });

3. Когда это возвращается, вы можете что-то сделать с этими данными (вместо предупреждения выше), например, $ ('# listnode'). Append ..., который вставит HTML в ваш список

Это общая схема, но вам придется приспособить ее к вашему сценарию.