如何建立一个简单的网页切换？

我需要在网站上构建一个非常简单的按钮，以在服务器上切换布尔值。当布尔值为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

如何建立一个简单的网页切换？

回答

相关问题