簡單的PHP / AJAX問題

Question

好的，所以我對Web開發還很陌生，所以可能是一個愚蠢的問題：

我有這個搜索表單，它可以自動完成fooditems（從數據庫列獲取值）並且可以工作。 現在，當我按下“提交”按鈕時，我想加載一個代碼塊，以顯示食品項的卡路里等（以及數據庫中與食品項相同的行）。

我該如何完成這樣的事情。 我知道這是一個相當廣泛的問題，但是我真正要問的是，當按下“提交”按鈕並使用文本字段中提供的輸入作為某種參數時，如何重新加載網站的一小部分。

我不需要完整的答案，只要對正確的方法提出任何建議，將不勝感激！

這是我的輸入和按鈕代碼：

在頭上

<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
    });
});

您需要首先捕獲click事件.bind("click") 。 然后啟動一個ajax調用$.post ，您將向其發送數據。 該數據通過POST數組在服務器上接收。

Answer 2

就像Josh所說的那樣，jQuery是通往這里的方法。

您需要做三件事：

1. 將點擊處理程序附加到“ onclick ='doSomething（）;'”之類的按鈕上

2. 在該函數中，使用jQuery對腳本進行異步發布，例如

   $ .post（“ test.php”，{名稱：“ John”，時間：“ 2pm”}，function（data）{alert（“已加載數據：” + data）;}）;

3. 當這種情況再次出現時，您可以使用該數據（而不是上面的警報）執行某些操作，例如$（'＃listnode'）。append ...，這會將HTML粘貼到您的列表中

這是一般模式，但是您必須使其適合您的方案。

Answer 3

從您給了我們的很少的知識很難回答您的問題，但是我將假設很少的知識。

您的輸入字段必須在表單標簽內。 表單標簽包括動作和方法。 該方法必須為“ POST”才能發送數據。 該動作可以是任何URL。

您只需要命名將處理結果的php腳本的URL。

它將在$ _POST ['food']等中找到數據。它必須構建答復頁面-整個屏幕，其中包含食物和數據以及您想要的下一次提交的搜索表單。

如果您想使用AJAX替換部分屏幕，那么您會遇到很多問題。 訣竅是用請求的數據替換div標簽的內容。