STM32单片机使用W5500作为http server通过网页进行配参（一.使用VScode模拟试验）

最新推荐文章于 2024-06-06 15:18:14 发布

张楠0805

最新推荐文章于 2024-06-06 15:18:14 发布

阅读量3.9k

点赞数 3

分类专栏： http相关文章标签： http javascript 前端 stm32 物联网

本文链接：https://blog.csdn.net/werqrrwq/article/details/124542166

版权

http相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.建立好网页基本模型

模型包括了网页配置IP、掩码、网关、一个下拉测试按钮、一个单选的选择按钮，实现效果如下：

二.代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=GB2312'/>
    <title>CSDN张楠0805</title>
    <style type='text/css'>
        body {text-align:left; background-color:#c0deed;font-family:Verdana;}
        #main {margin-right:auto;margin-left:auto;margin-top:30px;}
        label{display:inline-block;width:150px;}
        #main h3{color:#66b3ff; text-decoration:underline;}
    </style>
    <script>
        function settingsCallback(o) 
        {
            if (document.getElementById('txtVer'))         document.getElementById('txtVer').value = o.ver;
            if (document.getElementById('txtMac'))         document.getElementById('txtMac').value = o.mac;
            if (document.getElementById('txtIp'))          document.getElementById('txtIp').value = o.ip;
            if (document.getElementById('txtSub'))         document.getElementById('txtSub').value = o.sub;
            if (document.getElementById('txtGw'))          document.getElementById('txtGw').value = o.gw;
            if (document.getElementById('ceshi'))          document.getElementById('ceshi').value  = o.ceshi;
            if (o.danxuan=='1')        
            {
                document.getElementById('danxuan1').checked  = true;
            }        
            if (o.danxuan=='2')        
            {
                document.getElementById('danxuan2').checked  = true;
            }     
        };
    </script>
</head>
<body>
    <div id='main'>
        <div style='background:snow; display:block;padding:10px 20px;'>
        <h3>配置网络参数</h3>
        <form id='frmSetting' method='POST' action='config.cgi'>

        <p>
            <label for='txtIp'>固件版本号:</label><input type='text' id='txtVer' name='ver' size='16' disabled='disabled' />
        </p>

        <p>
            <label for='txtIp'>MAC地址:</label><input type='text' id='txtMac' name='mac' size='16' disabled='disabled' />
        </p>

        <p>
            <label for='txtIp'>IP地址:</label><input type='text' id='txtIp' name='ip' size='16' />
        </p>

        <p>
            <label for='txtSub'>子网掩码:</label><input type='text' id='txtSub' name='sub' size='16' />
        </p>

        <p>
            <label for='txtGw'>默认网关:</label><input type='text' id='txtGw' name='gw' size='16' />
        </p>

        <p>
            <lable>测试:</label>
                <select name='ceshi' id='ceshi'>     
                <option value='1'>打开</option>        
                <option selected value='2'>关闭</option></select>
        </p>

        <p>
            <lable>单选:</label>
                <input type='radio' name='danxuan' id='danxuan1' value='1'>           
                <input type='radio' name='danxuan' id='danxuan2' value='2' checked>
        </p>
        <br/> 
        <p><input type='submit' value='保存并重启' /></p>
        </form>
        </div>
        </div>
        <div style='margin:5px 5px;'>
        &copy;Copyright 2020 by ZhangNan
        </div>
        <script type='text/javascript' src='w5500.js'></script>   
</body>
</html>

三.W5500.js源文件

W5500.js源文件主要是提供回调函数settingsCallback（），从而进行设置。改变ceshi的值和danxuan的值网页会产生变化。

settingsCallback(
  {
    "ver":"1.0",
    "mac":"00:08:DC:11:11:11",
    "ip":"192.168.1.232",
    "gw":"192.168.1.1",
    "sub":"255.255.255.0",
    "ceshi":"2",
    "danxuan":"2"
  });