0

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

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

4

2 回答 2

1

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

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

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

于 2013-10-08T20:27:40.447 回答
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因为那只是忙碌的工作。不过，这足以让您到达那里。

于 2013-10-08T20:32:49.253 回答