基于api调用样式按钮

我正在创建一个页面，该页面将显示集群中多个服务器的状态。我在我的web服务上创建了一个状态路由，如果服务器正常运行，简单返回"ok"，如果不是，则会出现一些错误。我想有几个按钮(也许更好的选择?)，显示绿色，如果api调用返回ok和红色，如果不是。一个问题是，这些调用将是跨域的，尽管在我们公司的防火墙内。

很简单，但我是一个web服务开发人员，在这方面几乎没有经验。我的想法是在页面加载时调用每个服务器的状态路由并设置样式。我很不好意思地说，我真的不知道从哪里开始。我找到的每一个教程似乎都缺少一些让我"点击"的拼图。

所以，我的最终问题是，是否有一个已知的教程符合以下标准:

启用html5/CSS3(最好是移动显示的响应式设计)
jquery/angularjs库
支持跨域api调用
按钮(绘图)基于api调用结果。

如果这很容易在问题响应体中直接显示html和js，那也很好。我添加其他部分的唯一原因是，这只是我正在构建的仪表板的一小部分，它将集成统计图形和管理功能。因此，与稍后集成相比，从这些功能开始将是理想的。

提前感谢。如果这个问题不够具体，请告诉我。我来编辑。

您不一定需要基于jQuery的解决方案，这很容易，但拥有纯CSS/JS解决方案也是一种选择。如果您只是使用jQuery更改颜色或添加类，那么您很可能做错了。

实现您想要实现的最常见的方法是对服务器进行远程调用，您可以使用XHR来实现这一点，根据XHR的响应和状态，您可以随时更新视图。我提供了一个进度条的例子，要实现您想要的，您可以遵循类似的方法。

例如，您正在创建一个进度条。

  <div class="progress_bar">
      <div class="progress"></div>
  </div>

CSS部分包含。

   .progress_bar{
      display:inline-block;
      position:relative;
      margin:20px;
      width:100%; 
      height:40px;
      max-width:100px; /* For Computers */
   }
   .progress_bar .progress{
      height:100%;
      position:absolute;
      left:0px;
      top:0px;
      width:0%;
   }
   @media(max-width:320px){
      max-width:100%;
      margin:10px;
   }
   .progress_bar::before{
        display:block; text-align:center;
        content:"Loading";
        color:black;
        font-size:16px;
    }
    .progress_bar.completed::before{
        content:"Finished";
    }
    .progress_bar.error::before{
        content:"Error Occured";
    }

现在你可以有一个JS API调用(假设你正在下载一个文件)

你可以改变。progress元素的宽度。

function ProgressBar(elem){
   var bar = elem.getElementsByClassName('progress')[0];
   this.setProgress = function(x){
       bar.style.width = x + '%';
   }
   this.completed = function(){
       elem.classList.add("completed");
   }
   this.errored = function(){
       elem.classList.add("errored");
   }
}

现在你可以创建一个对象，并使用新的XHR2.0 API来控制你的JS部分，但这样做是通过添加类等，你可以获得响应式设计，因为JS中的一些变化或一些逻辑导致CSS类被应用，这个类可以使用媒体查询为它定义多个规则。希望这对你有所帮助。

有关XHR2.0的更多信息，请参阅此处http://www.html5rocks.com/en/tutorials/file/xhr2/

这个链接足以理解响应式设计:http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

jquery/angularjs库可以帮助你加快开发速度，所以，拿一个吧。

支持跨域API调用<——通常不是问题

我不确定你能找到教程与所有你的要求，最简单的方法对你来说，如果你只需要显示按钮是使用jQuery Mobile，所以它会显示好看的按钮浏览器和移动设备。你不需要使用像BackboneJS/AngularJS这样的JavaScript框架。

对于跨域请求，您可以使用http://easyxdm.net有一个很好的例子，所以您不会迷路。

这在jQuery中很容易实现。

有很多方法去做，但一个改变"按钮"颜色的例子可以是:$("#server1").css("background-color", "#0000AA");这将选择元素在你的html与id server1和添加/更改background-color的css值#0000AA。为了获得更大的灵活性，你可以使用css类，它有更多的逻辑，因为通常你会在.addClass &removeClass .

现在您已经知道了更改html元素上的css属性的最简单方法，接下来您要做的是进行web服务调用。有两种方法，1 -你的客户端和服务器支持CORS, 2 -你使用JSONP。JSONP是一种更简单的方法，要使用它，您所需要做的就是修改您的web服务，以便在来自客户机的请求中查找callback的参数。之后，您需要做的就是将来自服务器的响应封装在给定的值中。

例如:假设你在请求中有callback=complete，基本上你像这样包装它:complete( { status: ok });。JSONP的工作原理是将来自web服务的结果解释为一个脚本，该脚本将使用服务器的结果执行回调函数，从而使您可以在回调函数中使用它们。修改服务后，可以使用jQuery的Ajax方法调用web服务并获取数据。

$.ajax({
    type: "GET",
    url: "http://internalserver/myservice.svc/GetServerStatus",
    datatype: "jsonp",
    contentType: "application/json",
    success: function(data) { alert(data.status); }
});

当调用结束时，为success定义的函数将触发，使您可以访问结果。

相关内容

最新更新

热门标签：