相关说明

操作系统：CentOS7
Web服务器：BOA
语言：HTML+JS+C
演示了网页如何把数据通过AJAX发给后台CGI和后台CGI如何把数据返回到网页的指定控件显示
源码参考：AJAX_CGI
BOA的搭建参考：Linux下嵌入式Web服务器BOA和CGI编程开发
小案例实战参考：嵌入式web服务器BOA+CGI+HTML+MySQL项目实战——Linux
源码下载：GitHub，码云

效果展示

ajaxtest1.html

在这里插入图片描述

实现效果：在对应输入框内输入内容调用对应函数，非空，就显示cgi程序返回的内容

	if(strstr(lenstr,"txtIDA")!=NULL)
	{
	    printf("ianLiu@yeah.net\n\n");
	}
	if(strstr(lenstr,"txtIDB")!=NULL)
	{
	    printf("Liuyixu\n\n");
	}

然后给对应控件进行赋值

document.getElementById("txtIDB").innerHTML=xmlhttp.responseText;

ajaxtest3.html

在这里插入图片描述

点击按钮

<input type="submit" value="get_info" onclick="get_info()" />

实现获取cgi发送回来的json字符串

	if(strstr(lenstr,"get_info") != NULL)
	{
	    printf("{\"A\":\"%s\",\"B\":\"%s\"}",ip,prot);
	}

转json对象，给对应控件赋值的效果

//将接收到的字符串存入jsonstr
var jsonstr = xmlhttp.responseText;
alert("json:"+jsonstr);
// 将jsonstr转换为json对象 json
var json = JSON.parse(jsonstr);

    if(json[name1]){
        var value = json[name1];
        // 直接给id为name1的控件赋值
        document.getElementById(name1).innerHTML = value;
    }
    if(json[name2]){
        var value = json[name2];
        document.getElementById(name2).innerHTML = value;
    }

部分源码

cgi_main.h里面是空的

ajaxtest1.html

<html>
<head>
<script type="text/javascript">

function FuncA(str)
{
	var xmlhttp;
	if(str.length==0)
  	{ 
  		document.getElementById("txtIDA").innerHTML="";
  		return;
  	}
	if(window.XMLHttpRequest)
  	{
  		//code for IE7+,Firefox,Chrome,Opera,Safari
  		xmlhttp=new XMLHttpRequest();
  	}
	else
  	{
  		//code for IE6,IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	xmlhttp.onreadystatechange=function()
  	{
  		if(xmlhttp.readyState==4 && xmlhttp.status==200)
    	{
    		document.getElementById("txtIDA").innerHTML=xmlhttp.responseText;
    	}
  	}
	xmlhttp.open("GET","cgi-bin/ajax1.cgi?txtIDA="+str,true);
	xmlhttp.send();
}

function FuncB(str)
{
	var xmlhttp;
	if(str.length==0)
  	{ 
  		document.getElementById("txtIDB").innerHTML="";
  		return;
  	}
	if(window.XMLHttpRequest)
  	{
  		//code for IE7+,Firefox,Chrome,Opera,Safari
  		xmlhttp=new XMLHttpRequest();
  	}
	else
  	{
  		//code for IE6,IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	xmlhttp.onreadystatechange=function()
  	{
  		if(xmlhttp.readyState==4 && xmlhttp.status==200)
    	{
    		document.getElementById("txtIDB").innerHTML=xmlhttp.responseText;
    	}
  	}
	xmlhttp.open("GET","cgi-bin/ajax1.cgi?txtIDB="+str,true);
	xmlhttp.send();
}

</script>
</head>
<body>
<h3>演示了网页如何把数据通过AJAX发给后台CGI:</h3>
<h3>和后台CGI如何把数据返回到网页的指定控件显示:</h3>
<form action=""> 
姓氏:<input type="text" id="txt1" onkeyup="FuncA(this.value)" />
年龄:<input type="text" id="txt2" onkeyup="FuncB(this.value)" />
</form>
<p>建议:<span id="txtIDA"></span></p> 
<p>说明:<span id="txtIDB"></span></p> 
</body>
</html>

ajax1.c

#include <stdio.h>
#include <stdlib.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <fcntl.h>
#include <string.h>

#include "cgic.h"

int main(void) 
{
	char *lenstr;

	if(lenstr=getenv("QUERY_STRING"))
	{
	}
	else
	{
	}

    printf("Content-type: text/html\n\n");

	if(strstr(lenstr,"txtIDA")!=NULL)
	{
	    printf("a@b.com\n\n");
	}
	if(strstr(lenstr,"txtIDB")!=NULL)
	{
	    printf("abc\n\n");
	}
	
	return 0; 
}

ajaxtest3.html

<html>
<head>

<script type="text/javascript">

function get_json(json,formId) {
    alert("进入get_json函数");
    var name1 = "A";
    var name2 = "B";
    if(json[name1]){
        var value = json[name1];
        // 直接给id为name1的控件赋值
        document.getElementById(name1).innerHTML = value;
    }
    if(json[name2]){
        var value = json[name2];
        document.getElementById(name2).innerHTML = value;
    }
    alert("get_json运行完毕");
};

function get_info()
{
    var xmlhttp;
    if(window.XMLHttpRequest)
    {
  	    //code for IE7+,Firefox,Chrome,Opera,Safari
  	    xmlhttp=new XMLHttpRequest();
    }
    else
  	{
  	    //code for IE6,IE5
  	    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
    xmlhttp.onreadystatechange=function()
  	{
  	    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    	{
            //将接收到的字符串存入jsonstr
            var jsonstr = xmlhttp.responseText;
            alert("json:"+jsonstr);
            // 将jsonstr转换为json对象 json
            var json = JSON.parse(jsonstr);
            alert(json["A"]);
            var formid = "form1";
            alert("调用get_json,传参json对象和form的id");
            get_json(json,formid);
    	  }

  	 }
    xmlhttp.open("GET","cgi-bin/ajax3.cgi?get_info",true);
    xmlhttp.send();
}

</script>
</head>
<body>
<h3>后台CGI如何把数据返回到网页的指定控件显示:</h3>
<input type="submit" value="get_info" onclick="get_info()" />
<form id="form1">
    <p>建议:<span id="A" ></span></p> 
    <p>说明:<span id="B" ></span></p>
</form> 
</body>
</html>

ajax3.c

#include <stdio.h>
#include <stdlib.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <fcntl.h>
#include <string.h>
#include "cgic.h"

int cgiMain(void) 
{
	char *lenstr;

	if(lenstr=getenv("QUERY_STRING"))
	{
	}
	else
	{
	}

    printf("Content-type: text/html\n\n");

    char ip[20] = "192.168.10.1";
    char prot[6] = "8080";

	if(strstr(lenstr,"get_info") != NULL)
	{
	    printf("{\"A\":\"%s\",\"B\":\"%s\"}",ip,prot);
	}

	return 0; 
}

在这里插入图片描述

# ajax
Logo
Linux

更多推荐

Linux虚拟文件系统之文件系统卸载（sys_umount())

Linux中卸载文件系统由umount系统调用实现，入口函数为sys_umount()。较于文件系统的安装较为简单，下面是具体的实现。1. /*sys_umont系统调用*/2. SYSCALL_DEFINE2(umount, char __user *, name, int, flags)3. {4.struct path path;

avatar Linux

网卡速率和双工模式的配置

http://linux.chinaitlab.com/system/792187.html1、mii-tool 配置网络设备协商方式的工具；    1.1 mii-tool 介绍；    mii-tool - view, manipulate media-independent interface status （mii-tool 是查看，管理介质的网络接口的状态）

avatar Linux

Linux系统下超级终端Minicom的使用方法（例如：连接交换机，路由器等）转http://baike.baidu.com/view/2911642.htm?fr=ala0_1

<br />　　Linux系统下超级终端Minicom的使用方法 <br />　　Linux下的Minicom的功能与下的超级终端功能相似，适于在通过超级终端对设备的管理以及对嵌入操作系统的升级，现写出Minicom的使用手册： <br />　　1． 启动minicom <br />　　以root权限登录系统 <br />　　使用命令 <br />　　minicom –s 则minicom启动，屏

avatar Linux