【问题标题】:on/off switching xml attribute state开/关切换xml属性状态
【发布时间】:2015-08-18 07:04:19
【问题描述】:

嗨,软社区,

我有一个特定的需求,但我想我还没有处理足够的 js 和 ajax 或 socket.io 来执行它。

就是这样,我需要在客户端编写一个带有开关的网页,该开关将在服务器上生成一个简单的xml,根据其位置设置属性。

这是我的结构:

<html>
  <meta http-equiv="refresh" content="10">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" href="css/style.css">
<head>
</head>
<body>

  <div class="container">
    <label class="switch switch-green">
      <input type="checkbox" class="switch-input" checked>
      <span class="switch-label" data-on="On" data-off="Off"></span>
      <span class="switch-handle"></span>
    </label>
  </div>
<script>

</script>
</body>
</html>

我想生成一个像这样的简单 xml 文件

<?xml version="1.0" encoding="UTF-8"?>
<starter>
  <switch>0</switch>
 </starter>

根据开关状态写入 0 或 1。 然后我的目标是统治另一个 js 脚本来推送 xmlhttp.open("GET", , ) 以向客户端呈现数据。

我希望你的灯能帮助我到达那里...... 我应该从哪里开始执行此操作,这是正确的方法吗? 我愿意接受任何建议。

【问题讨论】:

  • 能否请您发布您的锻炼情况
  • 你有可以生成xml的服务器端吗?

标签: javascript html xml switch-statement toggle


【解决方案1】:

首先我想让它在本地工作,并找到一种方法来编辑我在主文件夹中的 file.xml。 我在W3C上刷了很多关于xml dom的东西,但是我没有成功改变一个html接口传递的开关值。

其实这就是我现在的位置:

    <!DOCTYPE html>
    <html>
      <meta http-equiv="refresh" content="10">
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <link rel="stylesheet" href="css/style.css">
    <head>
    <style>

    </style>
    </head>
    <body>

      <div class="container">

        <label class="switch switch-green">
          <input id="starter" name="starter" type="checkbox" onclick="checkin()" class="switch-input"/>
          <span class="switch-label" data-on="On" data-off="Off"></span>
          <span class="switch-handle"></span>
        </label>
      </div>

    <script type="text/javascript">

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }


    function checkin() {
            if (document.getElementById('starter').checked) {
                alert("checked");
            } else {
                alert("You didn't check it! Let me check it for you.");
            }
        }

    </script>

    </body>
    </html>

条件现在工作正常,但我想在将 1 或 0 传递到 switch_state.xml 之类的文件之间切换

编辑:

这是我使用 xml dom 拍摄的照片,只是要注意我已从以下位置备份了 loadxmldoc.js: https://code.google.com/p/sail-web-vle/source/browse/trunk/vle/js/common/loadxmldoc.js?r=3 并将其保存在一个js文件夹下。

<!DOCTYPE html>
<html>
  <meta http-equiv="refresh" content="10">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" href="css/style.css">
<head>
<style>

</style>
</head>
<body>

  <div class="container">

    <label class="switch switch-green">
      <input id="starter" name="starter" type="checkbox" onclick="checkin()" class="switch-input"/>
      <span class="switch-label" data-on="On" data-off="Off"></span>
      <span class="switch-handle"></span>
    </label>
  </div>

<script type="text/javascript" src="js/loadxmldoc.js">

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }


function checkin() {
        if (document.getElementById('starter').checked) {
            //alert("checked");
        xmlDoc=loadXMLDoc('switch_state.xml');
        x=xmlDoc.getElementsByTagName("switch")[0].childNodes[0];
        x.nodeValue="bleah";
        document.write(x.nodeValue);

        } else {
            // alert("You didn't check it! Let me check it for you.");
        xmlDoc=loadXMLDoc('switch_state.xml');
        x=xmlDoc.getElementsByTagName("switch")[0].childNodes[0];
        x.nodeValue="yipikayeah";
        document.write(x.nodeValue);
        }
    }

</script>

</body>
</html>

还有我的 xml:

<?xml version="1.0" encoding="UTF-8"?>
<starter>
  <switch>"off"</switch>
</starter>

但是如果复选框被选中,什么都没有发生......

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-12-29
    • 1970-01-01
    • 1970-01-01
    • 2011-03-19
    • 2023-03-17
    • 1970-01-01
    • 1970-01-01
    • 2017-01-30
    相关资源
    最近更新 更多