HTML与cgi程序的数据交互

1. Html通过ajax获取cgi返回的数据

function HtmlGetCgiData()
{
	$.ajax({
		type: 'POST', 	//提交方法
		url: 'cgi-bin/wg67_key_in/wg67_key_in_reflush.cgi', 	//调用到的cgi程序
		data: "ajax", 	//发送的数据，不可缺失该项，不能为空（空：ajax执行失败）
		dataType: "text", 	//不可缺失
		ContentType: "application/text; charset=utf-8",  
		success: function (returnedData, status)
		{
			if(status == "success"){	//判断是否有返回值（returnedData：cgi返回值）
				alert(returnedData);
			}
			else{
				alert("刷新失败");
			}
		},
		error: function (msg)
		{
			alert("ajax执行失败");
		}
	});
}

cgi端数据返回：

cout << "I am cgicc..." << endl;
cout << "html alert show cgicc return data." << endl;

fprintf(stdout, "%s\n", "I am cgic...");
fprintf(stdout, "%s\n", "html alert show cgic return data.");

//结论：html通过ajax获得的是 cgi标准输出 的数据。

注意：ajax操作，依赖库：jquery

网址：jquery下载所有版本（实时更新）

<script src="SpryAssets/jquery-3.5.1.min.js"></script>

// 1）最好是下载到本地，加入到工程中，再引入到代码中
// 2）也可以使用网络url，直接引入到自己的代码中，不需要下载js文件

2. cgicc通过其库中一系列的get函数，获取html相关标签的值

此处，以 “表单form” 在执行 “submit” 时，获取表单中全部 “input 标签” 值为例。

// time_sync.cgi

void TestMode()
{
	Cgicc formData;		//加载Cgicc，获取Cgicc对象
	//获取 input标签 值
	const vector<cgicc::FormEntry>& form_entries = formData.getElements();	//getElements()函数，获取该from表单中全部 input标签
	cout << "form_entries.size()=" << form_entries.size() << endl;
	for (vector<cgicc::FormEntry>::size_type i=0; i<form_entries.size(); ++i)
	{
		const cgicc::FormEntry& form_entry = form_entries[i];
		//打印每个 input标签 中 name属性 和 value属性值
		cout << "getName=" << form_entry.getName() << "; getValue=" << form_entry.getValue() << endl;
	}
}

 html表单：

<script>
function TimeSynSubmit(obj)
{
	...
    ...
	obj.action="/cgi-bin/time_sync/time_sync.cgi?submit";
	obj.submit();
}
</script>
<form id="form2" name="form2" method="post">
	<tr>
		<td class="ys12">时间服务器IP：</td>
		<td><input name="time_server_ip" type="text" id="time_server_ip" value="" size="20" maxlength="15" /></td>
	</tr>
	<tr>
		<td class="ys12">同步周期（1-1440min）：</td>
		<td><input name="time_cycle" type="text" id="time_cycle" value="" size="20" maxlength="4" /></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td><script type="text/javascript">
			document.write("<input type=\"submit\" name=\"button_submit\" id=\"button_submit\" value=\"提交\" onclick=\"return TimeSynSubmit(this.form);\" />");											
		</script></td>
	</tr>
</form>

 

 注解：

 1）cgicc的安装和使用，可以参考：Cgicc搭建交叉编译环境（移植到arm）-CSDN博客

 2）cgicc手册：参考：https://www.cnblogs.com/aquester/p/10064335.html