Javascript 如何构建一个简单的web切换？

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

---

我对网络应用不是很有经验，但我想知道什么样的框架最适合这个？有没有一种易于使用的HTML5方法可以做到这一点？AJAXWebsocket？我在应用程序的另一个页面上使用websockets，它可以正常工作，但对于这么简单的东西来说，这可能有点过头了？

您不想发送大量数据，也不想从服务器上推送数据，所以我建议使用AJAX

jquerys-ajax很好，但是如果您想要更高级的东西，您可能想看看谷歌

WebSocket只有在您需要大量数据并且真正处于活动状态时才有用。

---

现在，您只需要从客户端发送一次数据，而不是让双方始终保持最新状态。

Websockets在这方面做得太过分了，但是您说您已经完成了应用程序的另一部分…您的后端是什么？如果您喜欢C#，ASP.NET为您提供了很多选择（MVC4是我个人的最爱）

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

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

     return Json(dataContext, JsonRequestBehavior.AllowGet);
}

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

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

…在客户端，您可以像这样调用FooData方法：

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

     return Json(dataContext, JsonRequestBehavior.AllowGet);
}

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

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

其中ChangeImage是一个javascript函数，设置为ajax调用的成功回调函数，因此它可能如下所示：

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

     return Json(dataContext, JsonRequestBehavior.AllowGet);
}

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

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的逻辑。。。等等，等等，因为那只是一项繁忙的工作。这足以让您达到目的。
此切换是否需要影响当前浏览您网站的所有用户，因此如果用户A单击切换，用户B会立即看到效果？如果不是，那么websockets就太过分了，你只需要一个发送ajax请求的点击事件就可以了。Kevin，不，它只对每个用户有效，所以ajax将是一个不错的选择。谢谢你的回复。我们在服务器端使用Tornado，但是你的例子很棒。我们成功了。谢谢