首页 > 嵌入式 > 嵌入式linux下动态web开发完整例子
2020
01-15

嵌入式linux下动态web开发完整例子

一.HTML和JS部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo</title>
		<script type="text/javascript" src="lib/jquery.min.js"></script>
	</head>
	<body style="margin: 0 auto;text-align: center;">
		<h4>GET/POST发送数据到服务端:服务端使用C语言(./cgi-bin/demo.cgi)</h4>
		<p>发送用户名和密码到服务端(用户名:test,密码:test)</p>
		<p>用户名:<input id="useri" type="text" /></p>
		<p>密码:<input id="pwdi" type="text" /></p>
		<p><input id="get" type="button" value="get登录" /></p>
		<p><input id="post" type="button" value="post登录" /></p>

		<h4>请求服务端json格式数据:服务端使用C语言(./cgi-bin/demo.cgi)</h4>
		<p>请求服务端json数据格式</p>
		<p>用户名:<span id="username">******</span></p>
		<p>密码:<span id="pwd">******</span></p>
		<p>性别:<span id="sex">******</span></p>
		<p><input id="getjson" type="button" value="获取用户信息" /></p>
	</body>
</html>

<script type="text/javascript">
	$(document).ready(function() {
		var json={}; //声明变量
		//get方式发送数据
		$("#get").click(function() {
			console.log("get start");
			$.get("cgi-bin/demo.cgi", {
					name: $("#useri").val(),
					pwd: $("#pwdi").val()
				},
				function(data) {
					alert("返回数据: " + data);
				});
		})
		//post方式发送数据
		$("#post").click(function() {
			console.log("post start");
			$.post("cgi-bin/demo.cgi", {
					name: $("#useri").val(),
					pwd: $("#pwdi").val()
				},
				function(data) {
					alert("返回数据: " + data);
				});
		})
		//获取服务端数据
		$("#getjson").click(function() {
			console.log("getjson start");
			$.get("cgi-bin/demo.cgi?getjson",
				function(data) {
					// 将json字符串转换为json对象 json
					json = JSON.parse(data);
					console.log(json);
					$("#username").text(json.username);
					$("#pwd").text(json.pwd);
					$("#sex").text(json.sex);
				});
		})
	});
</script>

二.C语言部分

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
//用于处理GET请求
int getRequest(){
	int length = 0; //声明整型变量
	char *inputstring; //声明数据指针
	inputstring = getenv("QUERY_STRING");   //获取get参数 “name=test&pwd=test”
	//输出数据格式
	printf("Content type: text/html\n\n");
	//判断数据是否含有test,如果有则返回前端登录成功
	if(strstr(inputstring,"test") != NULL){
		printf("login success");
	}else{
		printf("login fail");
	} 
    return 0;
}
//用于处理post请求
int postRequest(){
	int length = 0; //声明整型变量
	char *inputstring; //声明数据指针
	length = atoi(getenv("CONTENT_LENGTH")); //结果是字符,需要转换成整型
	if(length != 0)
	{
	    inputstring = malloc(sizeof(char)*length + 1); //必须申请缓存,因为stdin是不带缓存的。
	    fread(inputstring, sizeof(char), length, stdin); //从标准输入读取一定数据
	    //输出数据格式
	    printf("Content type: text/html\n\n");
	    //判断数据是否含有test,如果有则返回前端登录成功
	    if(strstr(inputstring,"test") != NULL){
	    	printf("login success");
	    }else{
	    	printf("login fail");
	    } 
	}
	
    return 0;
}

//用于返回json数据
int jsonRequest(){
	//构造json数据
	char username[6] = "test";
	char pwd[6] = "test";
	char sex[6] = "男";
	//以json字符串方式返回前端数据
	printf("Content type: text/html\n\n");
	printf("{\"username\":\"%s\",\"pwd\":\"%s\",\"sex\":\"%s\"}",username,pwd,sex);
	return 0;
}

//主函数
int main(void) 
{	
	char *method; //声明请求方式指针变量
	method = getenv("REQUEST_METHOD"); //将返回结果赋予指针
	if(method == NULL){ //找不到环境变量REQUEST_METHOD
		return 1;
	}
	
	if(!strcmp(method, "POST")) //POST请求
	{
	    postRequest();
	}else if(!strcmp(method, "GET") && strcmp(getenv("QUERY_STRING"),"getjson")){ //GET请求并且不是json请求
		getRequest();
	}else if(!strcmp(method, "GET") && !strcmp(getenv("QUERY_STRING"),"getjson")){//GET请求并且是json请求
		jsonRequest();
	}else{
		 printf("Content type: text/html\n\n");
		 printf("请求错误");
		 return 1;
	}
	
}

三.运行效果

image.png

image.png

作者:admin
admin
TTF的家园-www.ttfde.top 个人博客以便写写东西,欢迎喜欢互联网的朋友一起交流!

本文》有 0 条评论

留下一个回复