使用javascript更新wepage而不重新加載頁面

我想弄清楚如何在用戶更改同一頁面的另一部分上的輸入字段時使用Javascript更新網頁的一部分。但是因爲我正在使用document.write，我以後不能再回來並更新它，除非我重新加載頁面。我承認我不太擅長JavaScript。如果任何人都可以給我如何解決這個問題的建議，將不勝感激。我希望有一種方法可以在沒有Ajax的情況下執行此操作，因爲這只是一個非常簡單的任務，我不希望它太複雜。使用javascript更新wepage而不重新加載頁面

我的網站有一個5步報價計算器，它顯示並隱藏divs，以在不加載/重新加載頁面的情況下完成這些步驟。在最後一步，第5步，我根據步驟1執行計算並使用document.write輸出它。但是由於我允許用戶返回到步驟1並對輸入文本字段進行更改，因此第5步中的計算在返回時不正確。

我想避免頁面重新加載，因爲我使用jQuery來做一些很酷的過渡效果，你會經歷這些步驟。處理這樣的問題的最佳方法是什麼？

我很樂意自己做一些研究，但我不確定從哪裏開始。謝謝

來源

2012-07-30 scotts7777

問：爲什麼使用document.write（）？強烈建議：熟悉一個框架（例如jQuery）。擔心框架，而不是Javascript本身。看幾個教程... *然後*重新訪問這個問題。用[jQuery處理程序]（http://www.w3schools.com/jquery/jquery_events.asp）來做到這一點。直接修改DOM（document.write * not * invited;）） – paulsm4 2012-07-30 07:16:10

@ paulsm4，感謝提示我花了幾個月的時間學習jQuery，它改變了我的生活！它讓很多事情變得更容易。 – scotts7777 2012-10-20 19:56:49

那麼你應該綁定第1步中字段的onchange事件的計算，以便步驟5中的字段自動更新。

例：在屏幕1：

<input type="text" name="inputFromScreen1" id="input1" onchange="calculateResult()">

在屏幕5：

<div id="results"></div>

JS：

function calculateResult() 
{ 
    //parse the values into float or int otherwise you'll get a concatenated string 
    var result=parseInt($("#input1").val())+.....; 

    //check if your result is a number 
    if (!isNaN(result)) 
     $("#results").html('<p>'+result+'</p>'); 
}

*注：我使用JQuery的，因爲它使DOM操作非常容易，並且是跨瀏覽器兼容的。瞭解更多信息http://jquery.com/

來源

2012-07-30 07:17:57 Samson

謝謝，那正是我一直在尋找的！我已經學習了足夠多的jQuery，以便您發佈的內容也很有意義。非常感謝！ – scotts7777 2012-07-30 07:43:27

我應該補充說，因爲我加在一起的值來自一個文本字段，所以我不得不將它們包裝在Number（）函數中，我猜它們將它們轉換爲整數/數字。例如：var total = Number（$（「＃indoorcameras」）。val（））+ Number（$（「＃outdoorcameras」）。val（））;再次感謝你的幫助！ – scotts7777 2012-07-30 08:06:05

當然..你應該檢查輸入與parseInt（）函數或parseFloat（） – Samson 2012-07-30 08:06:46

使用javascript更新wepage而不重新加載頁面

回答

相關問題