之前一直都好奇前后端是如何通信的，如果进行数据交互的，但是一直没有机会，直到最近，学习了一段时间的后端知识，然后又刚好遇到要做一个自动化工具，本来自动化工具的原理是通过配置文件传参的，不过呢，总感觉配置文件这种东西是对我们开发人员的，对于非开发人员来说，确实有点难的，不过重点是如果配置文件给非开发人员乱修改了，那依赖配置文件的程序不就跑不了了么，所以莫得办法。
然后由想方案，然后在同事就题了一个意见，说可以通过 网页传参，然后然后再自动处理，这样操作也方便，这么一说倒是点醒了我，作为一直不熟悉前端的人来说，确实不容易 想到这个，想到就立马东西，做实现，最重要的一部分是前端和后端的通信，也就是数据交互，对我这种前端都没写过的，那更是困难，反正以前就会这个前后端通信就感兴趣的人来说，说干就干，经历了一天，才把 这个做好 ，（其实没一天 ，只要是办法不对，之后又去看 了php，然后通过php联想回来，但是结果还是出现了问题，是问了一个 做前端的师妹，师妹才提醒了我看搓错误 ，结果一看错误 就发现问题了，虽然就调通了，真的是浪费了一天），下面开始我们的正题
1、前端html代码
之前大学的时候，又写了几个html的代码，这个html的代码并不难，并且 现在的菜鸟教程是越来越厉害了，可以支持在线修改并调试，大家可以去学学，这里就直接贴代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<li>
<a href="/test">
<button type="button">生成</button>
</a>
</li>
<div class="form-group">
<label for="username" class="sr-only">Username</label>
<input type="text" class="form-control" id="username" name="userName" placeholder="Username"
autocomplete="off">
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" class="form-control" id="password" name="passWord" placeholder="Password"
autocomplete="off">
</div>
<div class="form-group">
<input type="button" onclick="login()" value="Sign In" class="btn btn-primary">
</div>
</body>
</html>
界面的编程都比较简答，当然我们是不追求美观的前提下，只要知道哪些控件，哪些参数一复制，就可以直接看到 效果了。
input是输入框，tabel是文本框，我们来看看效果 ：
效果就不要吐槽了，并且是第一次做网页，就抄抄就可以了。
2、js发送json数据
这部分就是前端以json的数据想后端发送数据 ，就是这个问题困扰了我很久，毕竟我是菜鸟，如果是写前端的人就一眼就知道了问题。先看看代码：
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
$.ajax({
type: "POST",
dataType: "json",
url: 'test',
contentType: "application/json",
data:JSON.stringify({
"userName": username,
"passWord": password
}),
success: function (result) {
console.log("data is :" + result)
if (result.code == 200) {
alert("登陆成功");
window.location.href = "../home/home_page.html";
}else {
alert(result.message)
}
}
});
}
</script>
通过代码我们发现是通过ajax来进行发送的 ，这里有一个很重要的是url，如果我们只写test的话，会自动匹配ip，形成完整的url，完整url：http://192.168.0.105:90/test，因为我的ip地址是192.168.0.105，这个就是一个完成的http请求。其他的就是准备json数据了，这个比较简单，一看就懂了 。
还有一个重要的事就是我卡了我很久的，
如何查看前端的错误，这个我一直 忽略，可能说是不知道把，现在知道了，所以要记录下来，看图：
在console这个看错误，之前如果知道就好，我就是遇到了这个错误，看到错误就好，那就复制到百度了，百度一下，就发现缺少了jq，哎，这个就是困惑了我很久的问题，才是不明白就耽误很久 。
赶紧找了一个jq文件放到指定目录，接下来还要补行一行
<script type=“text/javascript” src=“jquery-1.11.1.min.js”>
在代码的图上已经加了，这样就可以在网页端看到http请求出来了，不过这时候因为后端还没就绪，会出现404错误，找不到，接下来我们就讲讲后端。
3、后端接收
因为不是写Java后端的，所以选择了fcgi，不过前端已经发出http请求了，用哪个都可以了，直接解析http请求就可以了，不过我比较熟悉nginx+fcgi，fcgi和nginx搭建环境请看我以前的文章，这里就不写了，这个只是做做笔记，安装也简单，来看看fcgi的程序：
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <unistd.h>
#include "fcgi_stdio.h"
int main(int argc, char *argv[])
{
int count = 0;
//阻塞等待并监听某个端口，等待Nginx将数据发过来
while( FCGI_Accept() >= 0 )
{
//如果想得到数据，需要从stdin去读，实际上从Nginx上去读
//如果想上传数据，需要往stdout写，实际上是给Nginx写数据
printf("Content-type: text/html\r\n");
printf("\r\n");
printf("<title>Fast CGI Hello!</title>");
printf("<h1>Fast CGI Hello!</h1>");
//SERVER_NAME：得到server的host名称
printf("Request number %d running on host <i>%s</i>\n", ++count, getenv("SERVER_NAME"));
}
return 0;
}
比较简单，是一个测试程序，就是测试一下通信问题，fcgi有一点不好，就是要在后端执行，输出日志需要在文件看中，所以就没写获取到json数据的情况，不过以后可以写写，这样就完成了我们前后端通信问题。
最后我们看一看效果图：
我点击了按键，然后后端接收到前端发过来的数据，然后在把我们的打印返回给前端，所以我们就看到了这个图。
终于搞通了，对前端不熟悉，确实有点难受。
7160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
