当前位置： 文江博客话题详情

Html - 创建按钮来进行 api 调用，同时也反映其状态

发布于 2025-01-11 07:57:51 字数 6306 浏览 0 评论 0原文

我希望有人可以帮助我，因为我对 html 等还很陌生。

我正在尝试创建两个可以打开远程灯ON和OFF的按钮code> ，也体现了自己的状态。

  1. 要打开或关闭，灯有两个特定的 http API 调用。
Turn On = http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1

Turn Off = http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0

我尝试了以下操作，但不成功。

<button type="button"><iframe src="192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1" style="visibility:hidden;display:none"></iframe>On</button>
<button type="button"><iframe src="192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0" style="visibility:hidden;display:none"></iframe>Off</button>
  1. 然后确认灯的状态（如果返回 ON 1 ，如果返回 OFF 0），并且 API 调用是。
Status = http://192.168.102.22:3480/data_request?id=variableget&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&Variable=Status

挑战是我不希望调用任何 api url 并打开新网页，所有这些都应该真正发生在幕后。

除此之外，我希望通过 Lua 脚本动态生成这些按钮，因此我需要能够通过循环将开/关按钮代码写入表的单元格，从而递增 DeviceNum=我的价值是 110。 （我想我可以做Lua部分，但不能做html方面）

感谢所有帮助/建议..

更新：

这是我到目前为止的进展，请记住，此代码将通过Lua脚本创建，因此在可能的情况下事情需要保持一致，这样我就可以通过对表的循环调用来创建大部分内容。如果有人能想到更简单的路线，请告诉我。

<html>
  <head>
    <title>Home Energy Usage</title>
  </head>
  <script>
function loadDoc11a() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=11&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1", true);
xhttp.send();
}

function loadDoc11b() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=11&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0", true);
  xhttp.send();
}

function loadDoc113a() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=113&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1", true);
xhttp.send();
}

function loadDoc113b() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=113&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0", true);
  xhttp.send();
}

function loadDoc231a() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=113&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1", true);
xhttp.send();
}

function loadDoc231b() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0", true);
  xhttp.send();
}
</script>
  <body>
    <table class=custom>
      <tr class=custom>
        <th class=custom>Energy Sensor</th>
        <th class=custom>Wattage</th>
        <th class=custom>Control</th>
        <th class=custom>Status</th>
      </tr>
      <br/>
<tr class=custom>
    <td class=custom>Living Room Media</td>
    <td class=custom>54.1</td>
    <td class=custom>
        <button type="button" onclick="loadDoc11a()">On</button>
        <button type="button" onclick="loadDoc11b()">Off</button></td>
    <td class=custom>0</td>
        </tr>
<tr class=custom>
    <td class=custom>Kitchen Energy</td>
    <td class=custom>31.4</td>
    <td class=custom>
        <button type="button" onclick="loadDoc113a()">On</button>
        <button type="button" onclick="loadDoc113b()">Off</button></td>
    <td class=custom>1</td> 
        </tr>
<tr class=custom>
    <td class=custom>Office Energy</td>
    <td class=custom>11.1</td>
    <td class=custom>
        <button type="button" onclick="loadDoc231a()">On</button>
        <button type="button" onclick="loadDoc231b()">Off</button></td>
    <td class=custom>1</td> 
        </tr>
  </body>
原文

I’m hoping someone can help me with this, as I’m pretty new to html etc.

I’m trying to create two buttons that can turn a remote light ON and OFF , but also reflect their status.

  1. To either turn on or off, the light has two specific http API calls..
Turn On = http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1

Turn Off = http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0

I tried the following, but was unsuccessful..

<button type="button"><iframe src="192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1" style="visibility:hidden;display:none"></iframe>On</button>
<button type="button"><iframe src="192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0" style="visibility:hidden;display:none"></iframe>Off</button>
  1. And then to confirm the status of the light, (if ON 1 is returned, if OFF 0 is returned) and the API call for that is.
Status = http://192.168.102.22:3480/data_request?id=variableget&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&Variable=Status

The challenge is I don’t want any of the api urls to be called and a new web page opened, all of this should really occurs behind the scenes.

In addition to that, I’m looking to generate these buttons dynamically via a Lua script, so I need to be able to write the on/off button code via a loop into a cell of a table, incrementing the DeviceNum=110 value as I go. (I think I can do the Lua part, but not the html aspects)

All help/advice is appreciated..

UPDATE:

Here’s my progress so far, just keep in mind that this code will be created via a Lua script , so where possible things need to be consistent so I can create much of it via a loop call against a table. If there’s an easier route someone can think of, please let me know..

<html>
  <head>
    <title>Home Energy Usage</title>
  </head>
  <script>
function loadDoc11a() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=11&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1", true);
xhttp.send();
}

function loadDoc11b() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=11&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0", true);
  xhttp.send();
}

function loadDoc113a() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=113&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1", true);
xhttp.send();
}

function loadDoc113b() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=113&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0", true);
  xhttp.send();
}

function loadDoc231a() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=113&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1", true);
xhttp.send();
}

function loadDoc231b() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0", true);
  xhttp.send();
}
</script>
  <body>
    <table class=custom>
      <tr class=custom>
        <th class=custom>Energy Sensor</th>
        <th class=custom>Wattage</th>
        <th class=custom>Control</th>
        <th class=custom>Status</th>
      </tr>
      <br/>
<tr class=custom>
    <td class=custom>Living Room Media</td>
    <td class=custom>54.1</td>
    <td class=custom>
        <button type="button" onclick="loadDoc11a()">On</button>
        <button type="button" onclick="loadDoc11b()">Off</button></td>
    <td class=custom>0</td>
        </tr>
<tr class=custom>
    <td class=custom>Kitchen Energy</td>
    <td class=custom>31.4</td>
    <td class=custom>
        <button type="button" onclick="loadDoc113a()">On</button>
        <button type="button" onclick="loadDoc113b()">Off</button></td>
    <td class=custom>1</td> 
        </tr>
<tr class=custom>
    <td class=custom>Office Energy</td>
    <td class=custom>11.1</td>
    <td class=custom>
        <button type="button" onclick="loadDoc231a()">On</button>
        <button type="button" onclick="loadDoc231b()">Off</button></td>
    <td class=custom>1</td> 
        </tr>
  </body>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

蔚蓝源自深海 2025-01-18 07:57:52

您需要使用 JavaScript 向后端 API 发送请求。 这篇文章可能有助于解决您的问题。

祝你好运！ ：D

You need to use JavaScript to send a request to the backend API. this article may help with your problem.

Good luck! :D

回复 原文
音盲 2025-01-18 07:57:52

尝试以此代码为基础：

<!DOCTYPE html>
<html>
<head>
   <title>Test</title>
   <meta charset="UTF-8" />
</head>
<script type="text/javascript">
     
function httpGetAsync(theUrl, mode)
{
    var xhr = new XMLHttpRequest();
    
    xhr.open('GET', theUrl , true);
    xhr.send();
    xhr.onreadystatechange = function() { 
      if (xhr.readyState != 4) return;
    
      request_status.innerHTML = 'ready';
    
      if (xhr.status != 200) {
        request_status.innerHTML = xhr.status + ': ' + xhr.statusText;
      } else {
        if (mode == 1)  {
             request_status.innerHTML = xhr.responseText; 
          }
        else {
           request_status.innerHTML = xhr.statusText;
           light_status.innerHTML = xhr.responseText;
           /*
           Light.cheched = .... ; // analyse .responseText
            */
        }
      }

}
request_status.innerHTML = 'send...';

}
    
 function open_url(checked)
 {  
var v = checked?1:0;
httpGetAsync("http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue="+v, 1);
 }
function get_status()
{
httpGetAsync("http://192.168.102.22:3480/data_request?id=variableget&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&Variable=Status", 2)

}    
 
</script>     

<body>   
<div style="height: 50px;">
    <div id="request_status"></div>
    <div id="light_status"></div>
</div>
<div>
    <span>Remote light:</span>
    <input id="Light" type="checkbox" onclick="open_url(this.checked); "   />
</div>
<br/>
<button onclick="get_status(); ">Get status of Light!</button>


</body>  
</html>

try to take this code as a basis:

<!DOCTYPE html>
<html>
<head>
   <title>Test</title>
   <meta charset="UTF-8" />
</head>
<script type="text/javascript">
     
function httpGetAsync(theUrl, mode)
{
    var xhr = new XMLHttpRequest();
    
    xhr.open('GET', theUrl , true);
    xhr.send();
    xhr.onreadystatechange = function() { 
      if (xhr.readyState != 4) return;
    
      request_status.innerHTML = 'ready';
    
      if (xhr.status != 200) {
        request_status.innerHTML = xhr.status + ': ' + xhr.statusText;
      } else {
        if (mode == 1)  {
             request_status.innerHTML = xhr.responseText; 
          }
        else {
           request_status.innerHTML = xhr.statusText;
           light_status.innerHTML = xhr.responseText;
           /*
           Light.cheched = .... ; // analyse .responseText
            */
        }
      }

}
request_status.innerHTML = 'send...';

}
    
 function open_url(checked)
 {  
var v = checked?1:0;
httpGetAsync("http://192.168.102.22:3480/data_request?id=action&output_format=xml&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue="+v, 1);
 }
function get_status()
{
httpGetAsync("http://192.168.102.22:3480/data_request?id=variableget&DeviceNum=110&serviceId=urn:upnp-org:serviceId:SwitchPower1&Variable=Status", 2)

}    
 
</script>     

<body>   
<div style="height: 50px;">
    <div id="request_status"></div>
    <div id="light_status"></div>
</div>
<div>
    <span>Remote light:</span>
    <input id="Light" type="checkbox" onclick="open_url(this.checked); "   />
</div>
<br/>
<button onclick="get_status(); ">Get status of Light!</button>


</body>  
</html>
回复 原文
彼岸花似海 2025-01-18 07:57:52

就我个人而言，我会选择像 Angular、React 或 Vue 这样的框架。它们使得在每次 HTTP 请求后重新呈现页面（或部分页面）变得更加容易。

这些框架是组件驱动的。简而言之，每个组件都有自己的 HTML 和打字稿（基本上是具有可选打字功能的 javascript）。每个组件都有输入和输出。这就像您正在创建自己的可重复使用的 HTML 标签集。

Angular 附带了自己的内置 http 客户端模块。而（据我所知）对于 React 和 Vue，您将安装“axios”。

为了让你的 UI 更漂亮，你可以添加 bootstrap，但是 Angular 也有它的自己的 UI 库（材质）。主要是品味问题。

所有这一切的主要优点是，一旦您迈向真正的框架，维护和扩展就会变得更加容易。

只需按照他们的“英雄之旅”教程，您确实可以在几个小时内学习 Angular 的基础知识。

Personally, I would go for a framework like Angular, React or Vue. They make it easier to re-render your page (or parts of it) after each HTTP request.

These frameworks are component-driven. Simply put, each component gets its own HTML and typescript (which basically is javascript with optional typing). Each component has inputs and outputs. And it's like you're creating your own reusable set of HTML-tags.

Angular ships with its own built-in http client module. While (afaik) for React and Vue you would then install "axios".

To make your UI prettier you could add bootstrap, but angular also has its own UI library (Material). Mostly a matter of taste.

The main advantage of all of this, is that it will be so much easier to maintain and to scale once you make this step towards a real framework.

You really can learn the basics of angular in a couple of hours, simply by following their "Tour of Heroes" tutorial.

回复 原文
~没有更多了~

关于作者

攒眉千度

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文