Question

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

我对网络应用程序不是很有经验，但我想知道什么框架最适合这个？有一种易于使用的HTML5方法吗？ AJAX？ WebSocket的？我在应用程序的另一个页面上使用了websockets并且它正在工作，但是对于这么简单的事情可能有些过分了吗？

Answer 1

您不想发送大量数据，或者想要从服务器推送，所以我建议使用AJAX。

jqueries ajax很好，但如果你想要一些更有趣的东西，你可能想看看谷歌。

Websockets仅在您需要大量数据并且真正存在时才有用。现在，您只需要从客户端发送一次数据，而不是始终保持双方都是最新的。

Answer 2

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

如何构建简单的Web切换？

2 个答案: