如何构建一个简单的网络切换？答案

【问题标题】：How to build a simple web toggle?如何构建一个简单的网络切换？
【发布时间】：2013-10-09 04:50:07
【问题描述】：

我需要在网站上构建一个非常简单的按钮，用于切换服务器上的布尔值。当布尔值为 True 时，我想显示一个绿色图标，当它为 False 时，我想将其变为红色。当用户点击图标时，它应该向服务器发送命令并更新，然后图标应该只在服务器回复布尔值实际上已被切换时才改变颜色（图像 src）。

我对网络应用程序不是很有经验，但我想知道哪个框架最适合这个？有没有一种易于使用的 HTML5 方法来做到这一点？阿贾克斯？网络套接字？我在应用程序的另一个页面上使用 websockets 并且它正在工作，但对于这么简单的事情来说它可能是矫枉过正？

【问题讨论】：

此切换是否需要影响当前浏览您网站的所有用户，所以如果用户 A 单击切换，用户 B 会立即看到效果？如果没有，那么 websockets 就太过分了，你只需要一个发送 ajax 请求的点击事件。
Kevin，不，它只是在每个用户身上，所以 AJAX 将成为要走的路。感谢您的回复。

标签： javascript jquery ajax web websocket

【解决方案1】：

Websockets 在这方面完全是矫枉过正，但是你说你已经完成了应用程序的另一部分......你的后端是什么？如果你喜欢 C#，ASP.NET 有很多选择供你选择（MVC4 是我个人的最爱）。

在 MVC 中，您将在页面控制器中创建一个操作来解释从 AJAX 调用传递的一些 JSON，如下所示：

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 的逻辑，因为那只是忙碌的工作。不过，这足以让您到达那里。

【讨论】：

我们在服务器端使用 Tornado，但您的示例很棒。我们让它工作了。谢谢！

【解决方案2】：

您不想发送大量数据，也不想从服务器推送，所以我推荐 AJAX。

jQueries ajax 很好，但如果你想要更花哨的东西，你可能想看看 google。

Websockets 仅在您需要大量数据且真实存在时才有用。现在您只想从客户端发送一次数据，而不是让双方一直保持最新状态。

【讨论】：