用C语言编写CGI,在html页面的文本框中刷新读取数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用C语言编写CGI,在html页面的文本框中刷新读取数据相关的知识,希望对你有一定的参考价值。
有一个文件TempData.txt,内容如下:
yeshenyue
longyi
tianxing
baihe
//以下是我编写的C程序
#include<stdio.h>
#include<stdlib.h>
#include<ctype.h>
#define DATAFILE "/var/www/cgi-bin/TempData.txt"
int main(void)
FILE *f = fopen(DATAFILE,"r");
char ch;
char name[15];
int i=0;
int flag=0;
if(f == NULL)
printf("Content-type:text/html;charset=gb2312\n\n");
printf("<TITLE>错误</TITLE>");
printf("<p><EM>意外错误,无法打开文件</EM>");
else
printf("Content-type:text/html;charset=gb2312\n\n");
printf("<html><head><title>view data</title></head><body>\n");
printf("Name: ");
while((ch=getc(f))!='\n')
name[i]=ch;
i++;
name[i]='\0';
printf("<input type=text value=\"%s\" id=\"NameText\"\n",name);
printf("</body></html>\n");
fclose(f);
return 0;
//经过gcc -o view.cgi view.c命令生成view.cgi
输入网址http://localhost/cgi-bin/view.cgi可以看到结果如下:
Name: yeshenyue
我只是实现了读取第一行数据,并没有刷新读取下面的数据,我想实现的就是怎么才能实文本框能够定时的刷新读取文件TempData.txt的下面几行数据
2、标准输入CGI程序像其他可执行程序一样,可通过标准输入(stdin)从Web服务器得到输入信息,如Form中的数据,这就是所谓的向CGI程序传递数据的POST方法。这意味着在操作系统命令行状态可执行CGI程序,对CGI程序进行调试。POST方法是常用的方法,本文将以此方法为例,分析CGI程序设计的方法、过程和技巧。
3、环境变量操作系统提供了许多环境变量,它们定义了程序的执行环境,应用程序可以存取它们。Web服务器和CGI接口又另外设置了自己的一些环境变量,用来向CGI程序传递一些重要的参数。 参考技术A 没用过boa。 只谈网页原理。
从data.txt读入温度,湿度等数据。
用printf()输出 HTML 文件。
#define LF 10
#define CR 13
int wendu,shidu;
char shijian[20];
FILE *fin;
// 打开data.txt,读入 wendu,shidu,shijian,关文件
// 下来输出 把分送给小妹把,交个朋友本回答被提问者和网友采纳
js+css+html自动放大文本框中输入的内容
js+css+html自动放大文本框中输入的内容
1 案例概述
以查询快递单号为例,在现实生活中,我们经常会使用快递单号查询功能,查看商品的物流信息状态。有时在用户输入单号时,网站为了让用户看清楚输入的内容,会在文本框上方显示一个提示栏,将用户输入的数字放大。
案例分析:当用户在文本框中输入内容时,文本框上面自动显示大号字的内容。如果用户输入为空,需要隐藏大号字内容。
效果图:
2 编写HTML代码
HTML页面中需要将放大的内容和输入框放在同一个div中,代码如下:
<div class="search">
<!-- 存放放大的内容 -->
<div class="con"></div>
<label>
快递单号:
<input type="text" placeholder="请输入快递单号">
</label>
</div>
3 编写CSS代码
首先为元素设置外边距,并且设置为相对定位。只是改变了div的位置。
.search
margin: 100px;
position: relative;
为显示放大的字的div设置样式:
.con
/* 设置绝对定位,让其显示在文本框的上方 */
position: absolute;
top: -40px;
left: 80px;
/* 给div设置宽度 */
width: 171px;
/* 设置外边框 */
border: 1px solid rgba(0, 0, 0, 0.2);
/* 设置阴影 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
/* 设置内边距 */
padding: 5px 0;
/* 设置字体,字体要比下面输入框中字体大 */
font-size: 18px;
/* 设置行高,让文字垂直居中 */
line-height: 20px;
/* 设置字体颜色 */
color: #333;
/* 将其先隐藏起来,当在文本框中输入文字时显示 */
display: none;
编写类似于对话框的小三角的样式:
.con::before
content: "";
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
4 编写JavaScript代码
首先获取input元素和class为con的元素:
//1、获取input元素和.con元素
var input = document.querySelector("input");
var con = document.querySelector(".con");
给input绑定keyup事件,当松开键盘时触发事件,让文字显示出来:
//2、给input绑定keyup事件,当松开键盘时触发事件
input.addEventListener("keyup", function ()
if (this.value == "") //如果用户没有输入,隐藏con元素
con.style.display = "none";
else //用户输入文字后,显示该元素
con.style.display = "block";
con.innerText = this.value;//将用户输入的内容显示在con中
)
到这一步之后,就会有初步的效果,但是当文本框失去焦点时,文字也不会消失,如下图所示,因此需要为input添加一个失去焦点事件。
添加失去焦点事件,当失去焦点的时候,上面的文字要自动隐藏:
//3、给input绑定失去焦点事件blur
input.addEventListener("blur", function ()
con.style.display = "none";//失去焦点,隐藏放大的div
)
添加了失去焦点事件后,当文本框失去焦点后,上面的效果就隐藏了,但是当再点击文本框时,该效果就没有了,只有当键盘被重新按下才会出现效果,如下图所示:
因此需要为input添加一个获得焦点的事件,当Input获得焦点时,重新显示该效果:
//4、给input绑定获得焦点事件focus
input.addEventListener("focus", function ()
if (this.value !== "") //获得焦点,但是文本框中有文字
con.style.display = "block";//显示该文字
)
到这里就实现了完整的效果了。
5 全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.search
margin: 100px;
position: relative;
.con
/* 设置绝对定位,让其显示在文本框的上方 */
position: absolute;
top: -40px;
left: 80px;
/* 给div设置宽度 */
width: 171px;
/* 设置外边框 */
border: 1px solid rgba(0, 0, 0, 0.2);
/* 设置阴影 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
/* 设置内边距 */
padding: 5px 0;
/* 设置字体,字体要比下面输入框中字体大 */
font-size: 18px;
/* 设置行高,让文字垂直居中 */
line-height: 20px;
/* 设置字体颜色 */
color: #333;
/* 将其先隐藏起来,当在文本框中输入文字时显示 */
display: none;
.con::before
content: "";
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
</style>
<body>
<div class="search">
<!-- 存放放大的内容 -->
<div class="con"></div>
<label>
快递单号:
<input type="text" placeholder="请输入快递单号">
</label>
</div>
<script>
//1、获取input元素和.con元素
var input = document.querySelector("input");
var con = document.querySelector(".con");
//2、给input绑定keyup事件,当松开键盘时触发事件
input.addEventListener("keyup", function ()
if (this.value == "") //如果用户没有输入,隐藏con元素
con.style.display = "none";
else //用户输入文字后,显示该元素
con.style.display = "block";
con.innerText = this.value;//将用户输入的内容显示在con中
)
//3、给input绑定失去焦点事件blur
input.addEventListener("blur", function ()
con.style.display = "none";//失去焦点,隐藏放大的div
)
//4、给input绑定获得焦点事件focus
input.addEventListener("focus", function ()
if (this.value !== "") //获得焦点,但是文本框中有文字
con.style.display = "block";//显示该文字
)
</script>
</body>
</html>
以上是关于用C语言编写CGI,在html页面的文本框中刷新读取数据的主要内容,如果未能解决你的问题,请参考以下文章
键盘输入时,如何在Ajax调用URL更改后停止MVC页面刷新