將表單值提交到腳本時無需加載新頁面

Question

我有關於將表單值發送到腳本的問題。我有一個表單設置，並在用戶按下按鈕時，我希望表單中的值顯示在頁面的另一部分。我可以很容易地用PHP或者其他Web腳本語言做到這一點，但我所知道的是如何通過的

http://www.example.com/myScript.pbp?value1=VALUE

形式將其發送到腳本來做到這一點是有辦法做到這一點不加載一個新的頁面？就像在頁面上顯示加載覆蓋圖，直到腳本完成並在頁面上顯示值？

我猜這會使用Javascript或Ajax或類似的東西來完成。

如果任何人都可以幫助我，甚至只是說我應該開始看什麼，我真的很感激！

Answer 1

確實。只需將onsubmit事件偵聽器附加到您的表單，該表單始終會返回false，以防止通過常規的GET或POST請求實際發送表單。

在您的事件偵聽器中，您可以使用XMLHttpRequest發送表單值，並讓回調函數更新頁面的相關部分。

但請記住，如果JavaScript不可用（例如關閉，阻止等），請始終創建一個回退選項（具有表單的常規GET或POST請求）以處理您的表單。

Answer 2

如果您只是希望表單中的值再次顯示在頁面上，而不與服務器進行任何交互，那麼類似jQuery的東西就是最好的方法。

jQuery有一個很好的形式插件，你可以做到以下幾點：

var form_values = $('#form_name').formHash(); 

的form_values屆時將表單值的系統中的散列陣列即

<form id="test"> 
    <input id="test1" name="test1" type="text" value="Test Text"/> 
</form> 

所以form_values [ 'test1']將保存測試文本的值

一旦你有了值，你可以使用其他一些jquery函數在頁面上顯示它們，例如

<div id="displayDiv"></div> 

那麼你的JavaScript可以

for (key in form_values) { 
    $('div#displayDiv').append('<div>Key: ' + key + ' Value: ' + form_values[key] + '</div>'); 
} 

這將使你的價值觀在顯示DIV

Answer 3

是AJAX會正是你會怎麼做。看看Tizag的教程：http://www.tizag.com/ajaxTutorial/index.php

這會讓你立即開始。

Answer 4

這裏是a simple javascript ajax object。您可以使用而不加載任何庫。