STM32单片机使用W5500作为http server通过网页进行配参（二.使用ajax增加温度显示功能并解析全过程）

张楠0805

已于 2022-05-13 18:24:14 修改

阅读量7.3k

点赞数 10

分类专栏： http相关文章标签：单片机 stm32 http 物联网嵌入式硬件

于 2022-05-13 13:34:38 首次发布

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

版权

http相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.网页与单片机通讯全过程

直接上干货，以下为网页与单片机通信的过程。

1.1当在浏览器输入IP地址并按下回车后，网页会向单片机发送一个get请求，具体数据见代码1

代码1

GET / HTTP/1.1
Host: 192.168.1.233
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

1.2单片机接收到网页的get请求后，发送整个html代码，代码中包括了html5的页面,css的效果，js和ajax的调用，具体数据见代码2

代码2

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html'; charset='GB2312'/>
        <title>MTPOART-N610</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>
    </head>
<body>
<div id='main'>
    <div style='background:snow; display:block;padding:10px 20px;'>
    <h3>setting</h3>
    <form id='frmSetting' method='POST'action='/allconfig' >
    <p> <label for='temperature'>温度:</label><input type='text' id='temperature' 
         name='temperature' size='16' />  
    </p>
    <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='test' id='test'><option value='1'>打开</option>        
         <option selected value='2'>关闭</option></select>
    </p> 
    <p><lable>串口1透传:</label><input 开启 type='radio' name='serial1' id='serial1on' 
         value='1'>开启 <input 关闭 type='radio' name='serial1' id='serial1off' 
         value='2'checked>关闭 
    </p>
    <p> <input type ='submit' value = '保存'>
    </p>
    </form>
    </div>
    </div>
    <div style='margin:5px 5px;'>&copy;Copyright 2020 by MeiTeng
    </div>            <        
    <script>
        setTimeout('checkconfig()',200);
        setInterval('setcanshu()',5000);
        function setcanshu()
        {
            const xhr = new             
            XMLHttpRequest();
            xhr.open('post','/temperature');
            xhr.send();
            xhr.onreadystatechange = function()
            {
                if(xhr.readyState == 4)
                {
                    if(xhr.status>=200 && xhr.status <300)
                    {
                        console.log(xhr.response);
                        let data = JSON.parse(xhr.response);
                        document.getElementById('temperature').value=data.temperature;
                    }
                }
            }
        }
        function checkconfig()
        {
            const xhr = new XMLHttpRequest();
            xhr.open('post','/checkconfig');
            xhr.send();
            xhr.onreadystatechange = function()
            {
                if(xhr.readyState == 4)
                {
                    if(xhr.status>=200 && xhr.status <300)
                    {
                        console.log(xhr.response);
                        let data = JSON.parse(xhr.response);
                        document.getElementById('temperature').value=data.temperature;
                        document.getElementById('txtVer').value=data.ver;
                        document.getElementById('txtMac').value=data.mac;
                        document.getElementById('txtIp').value=data.ip;                                
                        document.getElementById('txtSub').value=data.sub;
                        document.getElementById('txtGw').value=data.gw;
                        document.getElementById('test').value=data.test;
                        if (data.serial1=='1')
                        {
                            document.getElementById('serial1on').checked  = true;
                        } 
                        if (data.serial1=='2')
                        {
                            document.getElementById('serial1off').checked  = true;
                        } 
                    }
                }
            }  
        }
    </script>
</body>
</html>

1.3浏览器接收到单片机发送的html后会实现2个定时器功能，第一个为网页完成后200ms发送ajax数据（post方式）到单片机，请求所有的配置信息，具体数据见代码3

代码3

POST /checkconfig HTTP/1.1
Host: 192.168.1.233
Connection: keep-alive
Content-Length: 0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36
Accept: */*
Origin: http://192.168.1.233
Referer: http://192.168.1.233/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

1.4单片机接收到浏览器发来的查询checkconfig信息后，以json格式发送所有数据，，具体数据见代码4

代码4

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length:154

{	"temperature":"271",	"ver":"1.0",	"mac":"00:08:DC:11:11:11",	"ip":"192.168.1.233",	"gw":"192.168.1.1",	"sub":"255.255.255.0",	"test":"2",	"serial1":"1"}

1.5网页完成后每5S会发送ajax数据（post方式）到单片机，请求温度信息，具体数据见代码5

代码5

POST /temperature HTTP/1.1
Host: 192.168.1.233
Connection: keep-alive
Content-Length: 0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36
Accept: */*
Origin: http://192.168.1.233
Referer: http://192.168.1.233/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

1.6单片机接收到浏览器每5S发来的post查询温度请求，以json格式进行回应，具体数据见代码6

代码6

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length:21

{"temperature":"272"}

1.7网页点击保存按钮，将网页中表单信息进行post提交，具体数据见代码7

代码7


POST /allconfig HTTP/1.1
Host: 192.168.1.233
Connection: keep-alive
Content-Length: 82
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: http://192.168.1.233
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Referer: http://192.168.1.233/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

temperature=271&ip=192.168.1.233&sub=255.255.255.0&gw=192.168.1.1&test=2&serial1=1

最后上一张成品图