如何利用原生JS+AJAX在W5500的WEB界面上面实现按键控制单片机IO口

Posted 2021-04-15 芯片之家

最近一直在搞以太网项目，有一个WEB网页控制单片机的IO口功能，一直没有什么思路，于是请教了很多前辈，有说通过数据流传输，有说通过LWIP实现的，但是用LWIP在硬件就需要采用EN28J60，还要修改传输协议，觉得有点苦恼，所以继续寻找思路，偶然的机会，看到前端的朋友写的代码，突发灵感，于是我就想，我能不能用这个方法呢，于是，便开始撸代码，好，闲话不多说，直接上代码。

JS+AJAX代码如下：

"function $(id) 
{ return document.getElementById(id);
 };\r"\
"function oorc(id,val,value)
{var ajax = new XMLHttpRequest();
ajax.open('post','key.cgi?'+val);
ajax.send();
ajax.onreadystatechange = function () 
{if (ajax.readyState==4)
 {$(id).value=value;
}
}
}\r"\
"function settingsCallback(o)//前端部分，可以选择采用AJAX+原生JS
"<form id='frmSetting' method='POST' action='key.cgi'>"\

C语言代码：（C语言代码是基于TCP/IP）

case METHOD_POST:                                      /*POST???ó*/
mid(http_request->URI, "/", " ", req_name);    
if(strcmp(req_name,"config.cgi")==0)                  
{
cgi_ipconfig(http_request);                              make_cgi_response(8,(int8*)ConfigMsg.lip,tx_buf);        
sprintf((char *)http_response,"HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nContent-Length:%d\r\n\r\n%s",strlen(tx_buf),tx_buf);
send(s, (u_char *)http_response, strlen((char *)http_response));    
disconnect(s);                                    
reboot_flag=1;                                
return;
}
else if(strcmp(req_name,"key.cgi?A")==0)
{
cgi_ipconfig(http_request);      
send(s, (u_char *)http_response, strlen((char *)http_response));    
GPIO_ResetBits(GPIOB, GPIO_Pin_2);
}
else if(strcmp(req_name,"key.cgi?B")==0)
{
cgi_ipconfig(http_request);        
send(s, (u_char *)http_response, strlen((char *)http_response));    
GPIO_SetBits(GPIOB, GPIO_Pin_2);
}
else if(strcmp(req_name,"key.cgi?C")==0)
{
cgi_ipconfig(http_request);                              
send(s, (u_char *)http_response, strlen((char *)http_response));    
GPIO_ResetBits(GPIOB, GPIO_Pin_3);
}
else if(strcmp(req_name,"key.cgi?D")==0)
{
cgi_ipconfig(http_request);        
send(s, (u_char *)http_response, strlen((char *)http_response));    
GPIO_SetBits(GPIOB, GPIO_Pin_3);
}

往期好文