开/关切换xml属性状态

时间:2015-08-18 07:04:20

标签: javascript html xml switch-statement toggle

嗨,到了社区,

我有一个特定的需求,但是我没有处理足够的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", , )向客户端呈现数据。

我希望你的灯会帮助我达到它... 我应该从哪里开始执行此操作,这是一种正确的方法吗? 我对任何建议持开放态度。

1 个答案:

答案 0 :(得分:0)

首先,我希望它能在本地运行,并找到一种方法来编辑主文件夹中的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>

但如果选中复选框,则没有任何反应......