2011-01-12 76 views
0

好了,我是相當新的webdeveloping,所以可能是一個愚蠢的問題:簡單的PHP/AJAX的問題

我有做自動完成對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> 
+1

爲什麼你有一個`(

+0

我正在編寫一些不是我自己編寫的代碼,並沒有關注它,謝謝你的評論! – Javaaaa 2011-01-12 20:48:01

回答

1

jQueryAjax

更改該輸入的按鈕

<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陣列在服務器上接收。

+0

我試圖添加這個,但然後按鈕仍然提交,防止事件不會發生我猜。而傳遞的數據,我怎樣才能在我發佈的文件中「捕捉」它? – Javaaaa 2011-01-12 21:19:52

0

就像Josh說的那樣,jQuery是要走的路。

你會想要做的三件事情:

  1. 附加一個單擊處理程序就像一個按鈕 「的onclick = 'DoSomething的();'」
  2. 在這種功能,使用jQuery做一個異步張貼到腳本像

    $。員額( 「test.php的」,{名字: 「約翰」,時間: 「2:00」}, 功能(數據){ 警報( 「數據加載:」 +數據); });

  3. 當這個回來,你可以做一些與數據(而不是上面的警告),像$(「#listnode」)。追加...這會將HTML粘貼到您的列表中

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

0

很難從你給我們的小小的回答你的問題,但我會承擔一點知識。

您的輸入字段必須位於表單標籤內。表單標籤包含一個動作和一個方法。該方法必須是「POST」才能發送數據。該操作可以是任何網址。

你只需要命名你的php腳本的URL來處理結果。

它會在$ _POST ['food']等中找到數據。它必須建立回覆頁面 - 整個屏幕,包含食物和數據以及下一次提交的搜索表單。

如果您想使用AJAX替換部分屏幕,那麼您會遇到一些問題。訣竅是用請求的數據替換div標籤的內容。