嵌入式web -- cgi案例 -- 前后端数据传递

z呀哈哈z

已于 2022-06-11 22:48:28 修改

阅读量2.2k

点赞数 4

分类专栏：嵌入式web 文章标签： linux 前端

于 2022-06-10 22:12:42 首次发布

本文链接：https://blog.csdn.net/m0_60292931/article/details/125217293

版权

嵌入式web 专栏收录该内容

5 篇文章 11 订阅

订阅专栏

文章目录

前置文章
BOA服务器：嵌入式web – BOA的安装、配置与测试
CGI：嵌入式web – CGI
前后端分离：嵌入式web – 前后端分离

1、模拟温度显示

后台输出到cgi

#include "cJSON.h"
#include <time.h>
#include <stdio.h>
#include <stdlib.h>

//随机数模拟获取温度
char *get_rand_temp();
int main() {
    char *ret = NULL;

    //http协议
    printf("Content-Type:text/html;charset=utf-8\r\n");
    printf("\r\n");

    ret = get_rand_temp();
    printf("%s",ret);

    free(ret);//cJSON_Print返回的是一个堆空间
    ret = NULL;
    return 0;
}

char *get_rand_temp(){
    cJSON *cjson;
    char *ret = NULL;
    double temp;

    srand(time(NULL));
    temp = rand()%20 + 10; //模拟温度 10 - 29度

    cjson = cJSON_CreateObject();
    if(cjson == NULL){
        goto end;
    }

    //将模拟的温度通过cjson形成json类型的数据
    cJSON_AddItemToObject(cjson,"temp",
                          cJSON_CreateNumber(temp));
    ret = cJSON_Print(cjson);
end:
    cJSON_Delete(cjson);

    return ret;
}

编译成可执行文件后放到指定的cgi目录中

前台从cgi获取数据

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>ajax jquery案例</title>
    <script src="../js/jquery.min.js"></script>
</head>
<body>

<div id="div1"><h2>温度: </h2></div>
<button type="button" id="bt1">点击查看</button>

<script>
    $(document).ready(function () {
        /*按钮bt1点击响应*/
        $("#bt1").click(function () {
            $.getJSON("/cgi-bin/ctest",function (data) {
                var context = "<h2>温度: "+data.temp +"</h2>";
                $("#div1").html(context);
            });
        });
    });
</script>

</body>
</html>

在这里插入图片描述

2、直接获取表单请求

2.1、get和post

1、它们的本质是一样的
2、 get请求的数据会附在URL之后，以?分割URL和传输数据，参数之间以&相连，post则是把提交的数据放置在HTTP包的包体中。
3、get的长度受限于url的长度，post没有限制
4、post 速度慢，安全， get速度快，不安全。

在这里插入图片描述

get请求：
Request URL: http://192.168.200.134/cgi-bin/xxx/?user_name=123&user_pwd=321
post请求
Request URL: http://192.168.200.134/cgi-bin/xxx/

2.2、获取get和post请求

常用CGI环境变量

后台

#include <stdlib.h>
#include <stdio.h>
#include <string.h>
int form_get_post();
int main() {
    char *ret = NULL;

    //http协议
    printf("Content-Type:text/html;charset=utf-8\r\n");
    printf("\r\n");

    form_get_post();
    return 0;
}
int form_get_post(){
    char *ret = NULL;
    char *info = NULL;
    int len,i;

    //获取请求类型 get或者post
    ret = getenv("REQUEST_METHOD");
    if(ret == NULL){
        printf("获取method失败！");
        return -1;
    }
    printf("<h2>http请求形式：%s</h2>",ret);

    if(strncmp(ret,"GET",3) == 0){
        //查看get的请求
        info = getenv("QUERY_STRING");
        if(info == NULL){
            printf("获取query string失败！");
            return -1;
        }
        printf("<h3>%s的请求数据：%s</h3>",ret,info);
    } else if(strncmp(ret,"POST",4) == 0){
        //查看post的请求
        //CONTENT_LENGTH 客户端向标准输入设备发送的数据长度，单位为字节
        len = atoi(getenv("CONTENT_LENGTH"));
        info = (char *) malloc(len+1);

        for(i=0;i<len;i++){
            info[i] = (char)fgetc(stdin);
        }
        info[i] = 0;
        printf("<h3>%s的请求数据：%s</h3>",ret,info);
        free(info);
        info = NULL;
    }
    else{
        printf("<h3>form请求类型未知</h3>");
        return -1;
    }
    return 0;
}

前端

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表单测试</title>
</head>
<body>
<form action="/cgi-bin/ctest" method="get">
    <label for="u_name">用户名：<input type="text" id="u_name" name="user_name"></label>
    <br>
    <label for="u_pwd">密 码：<input type="password" id="u_pwd" name="user_pwd"></label>
    <br>
    <input type="submit" value="注册">
</form>
</body>
</html>

在这里插入图片描述

点击注册 post

在这里插入图片描述

点击注册 get

3、利用cgic获取表单请求

可以利用第三方库来帮助解析表单请求
源码下载：https://github.com/boutell/cgic
拷贝解压后的cgic.c和cgic.h

后台

#include "cgic.h"
#include <stdlib.h>
#include <string.h>

int cgiMain(){
    char user[20];//用户名
    char pwd[16];//密码
    char* ret = NULL;

    cgiHeaderContentType("text/html;charset=utf-8");

    ret = getenv("REQUEST_METHOD");
    if(ret == NULL){
        printf("获取method失败！");
        return 0;
    }
    printf("<h2>http请求形式：%s</h2>",ret);

    cgiFormStringNoNewlines("user_name", user, sizeof(user));
    cgiFormStringNoNewlines("user_pwd",pwd, sizeof(pwd));
    fprintf(cgiOut, "<h3>%s的请求数据：%s : %s</h3>",ret,user,pwd);

    return 0;
}

前端还是和上一个一样

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表单测试</title>
</head>
<body>
<form action="/cgi-bin/ctest" method="get">
    <label for="u_name">用户名：<input type="text" id="u_name" name="user_name"></label>
    <br>
    <label for="u_pwd">密 码：<input type="password" id="u_pwd" name="user_pwd"></label>
    <br>
    <input type="submit" value="注册">
</form>
</body>
</html>

在这里插入图片描述

4、Makefile参考

TARGET := ctest

CROSS_COMPILE :=
CC = $(CROSS_COMPILE)gcc
LD = $(CROSS_COMPILE)ld

#获取当前目录下的所有.c文件
OBJS := $(foreach a, $(wildcard ./*.c),$(patsubst %.c,%.o,$(a)))

CFLAGS += -Wall -I inc/
LDFLAGS +=

#拷贝生成的可执行程序到指定的cgi目录
OUTPUT_DIR = /home/venom/web_prj/jobs/cgi/

all:$(TARGET)
$(TARGET):$(OBJS)
	$(CC) $(LDFLAGS) $^ -o $@
	cp $(TARGET)  $(OUTPUT_DIR)
%.o:%.c
	$(CC) -c $(CFLAGS) $^ -o $@

clean:
	rm -f $(TARGET) $(OBJS)