如何建立一個簡單的網頁切換？

我需要在網站上構建一個非常簡單的按鈕，以在服務器上切換布爾值。當布爾值爲True時，我想顯示一個綠色圖標，當它爲False時，我想將其設爲紅色。當用戶點擊圖標時，它應該向服務器發送一個命令並進行更新，然後當服務器回覆實際上已經切換了布爾值時，圖標只應該改變顏色（圖像src）。如何建立一個簡單的網頁切換？

我對網絡應用程序並不是很有經驗，但我想知道什麼樣的架構最適合這個？有沒有一種易於使用的HTML5方式來做到這一點？ AJAX？ WebSocket的？我在應用程序的另一個頁面上使用websockets並且它正在工作，但是對於這種簡單的事情來說這可能是矯枉過正的？

來源

2013-10-08 Doughy

此切換是否需要影響當前瀏覽您的網站的所有用戶，因此如果用戶A單擊切換，用戶B立即看到效果？如果沒有，那麼websockets是矯枉過正的，你只需要一個發送ajax請求的點擊事件。 –

凱文，不，它只是在每個用戶，所以AJAX將是要走的路。謝謝回覆。 – Doughy

Websockets是完全矯枉過正的，但是你說你已經完成了另一部分應用程序......你的後端是什麼？如果你喜歡C＃，ASP.NET有很多選擇（MVC4是我個人最喜歡的）。

在MVC中，你會在您的頁面控制器，用於解釋一些JSON從AJAX調用傳遞有點像這裏面的一個動作：

public JsonResult FooData(int _id) 
{ 
    var dataContext = true; 
    if(_id == 7) 
     dataContext = false; 

    return Json(dataContext, JsonRequestBehavior.AllowGet); 
}

...並在您的客戶端，你會調用FooData方法像這樣：

$.ajax({ 
     url: "MyController/FooData", 
     data: { _id: obj.id }, 
     dataType: 'json', 
     async: true, 
     success: ChangeImage 
    });

凡ChangeImage是一個JavaScript函數設置爲你的Ajax調用的成功回調函數，所以它可能是這樣的：

function ChangeImage(data) { 
    if(data == true) 
     document.getElementById('myImg').src = "red.jpg"; 
    else 
     document.getElementById('myImg').src = "green.jpg"; 
}

這是短暫的，甜蜜的和重點。有一個學習曲線，但它是非常值得的時間和精力。我不能沒有這個框架了！

編輯：忘了添加數據傳遞給ajax調用，現在修復！

編輯編輯：我沒有添加if click check bool -> if true, set false -> send flag -> if flag == 'change' change color -> if click ... etc etc etc的邏輯，因爲這只是忙碌的工作。儘管如此，這已經足夠讓你滿意了。

來源

2013-10-08 20:32:49

我們在服務器端使用Tornado，但您的示例非常棒。我們得到了它的工作。謝謝！ – Doughy

很高興幫助！ :) –

你不想發送大量的數據，或者想從服務器推送，所以我會推薦AJAX。

jQueries ajax很好，但如果你想要更多的東西，你可能想看看谷歌。

Websockets只有在你需要大量數據時纔有用，而且確實存在。現在，您只需要一次發送客戶端的數據，而不是始終保持雙方都是最新的。

來源

2013-10-08 20:27:40

如何建立一個簡單的網頁切換？

回答

相關問題