Fdog系列（二）：html写完注册页面之后怎么办，用java写后台响应呀。

文章目录

• 1. 前言
• 2. 创建javaweb项目
• 3. 创建Server
• 4. 解决中文乱码问题
• 5. 响应后台数据

---

目录
Fdog系列（一）：思来想去，不如写一个聊天软件，那就从仿QQ注册页面开始吧。

---

所有文章源码已整体打包上传至github，求星星！

1. 前言

接着第一篇用html完成了注册页面，第二篇，我们来完成后台数据处理，需要用的有Eclipse，tomcat，mysql数据库，还有云服务器（如果需要外部访问，可以购买一台云服务器，选择最低配置就好，我用的是腾讯云，使用代金券白嫖了四个月，可以通过下面二维码白嫖代金券。）

若没有Eclipse，这是博主之前写的Ecplise下载教程

若没有tomcat，点击下载tomcat7下载

若想买服务器，不如看看这个云服务器代金券

若要使用本地数据库不如看看这个MySQL数据库学习·如何安装SQL数据库和连接Navicat Premium

若要在服务器安装数据库，不如看看这个腾讯云云服务器Centos系统安装MySQL数据库详细教程

这里给大家提个醒，若JDK是1.7 ，tomcat，mysql，centos建议都用7的版本。不要问为什么，博主也是趟过坑的人！！！！

---

2. 创建javaweb项目

File->New->other->Web->Dynamic Web Project

第一个红框框选择你刚下载好的tomcat版本，还有路径。

第二个红框框有个注意点，现在一般用的是3.0，采用注解的方式，而博主的教程是2.5版本，需要配置web.xml，如果是初学者，建议选择2.5，有助于学习，我也将以2.5版本为例。

第三个红框框可以设置一些内容的版本，这里将java设置为1.7版本。

然后一直下一步，完成，如图。

我们点击下面的servers服务，点击蓝色文字，再次选择tomcat版本，并将项目添加，完成。如果下面没有servers选项，可在window->show View下找到servers，添加即可。

分别创建一个js文件夹，一个img文件夹，一个css文件夹（右键Webcontent->New->folder）,然后将上篇写过的代码拿过来，可以直接将文件拖进Webcontent目录下，html文件直接拖到Webcontent下就好，哦，差点忘了，eclipse的默认字体大小极其不友好，建议大家将字体改成18，在Window->proferences搜索font，选择Colors and Fonts，选择Basic下面的Text font，将字体大小设置为你喜欢的值（这里建议18）。

创建好之后如图，至此，我们将昨天用HBuilder X写的内容全部移植到了Eclipse里面，

---

3. 创建Server

右击项目，New->other->Web->Servlet，什么是Servlet，其实就是一个java文件，然后通过网页去调用这个java文件处理业务逻辑，类似于两个java文件互相调用，只不过更加复杂而已。

创建好的java文件，默认有两个函数，一个是GET，一个是POST，这个是干什么的呢，GET和POST是HTTP请求的两种基本方法，要说它们的区别，最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。你可以看到有些链接后面有？user=xxxx&id=xxxx，这种就是GET请求方法。

4. 解决中文乱码问题

每一个学过javaweb的人应该都知道GET和POST提交乱码的问题，业务逻辑不可避免要传递中文数据，请在两个函数中添加如下代码，同时将Workspace下面的Text file encoding默认GBK改为utf-8（Window->Preferences->Workspace），可解决中文乱码问题。

protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
	response.setContentType("text/html;charset=utf-8");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=utf-8");	
}

除此自外，还可以创建Filter（过滤器），来处理乱码问题，有兴趣可以了解下，你不要问我为什么不用这个，因为我不会。

---

5. 响应后台数据

好了好了，我知道你已经等不及了，想要马上知道如何与前端交换数据。

一般情况下，我们都会使用表单提交的方式，向servlet发送数据，比如我们有一个表单

<form action="FdogMaven" method="post">
	<input tyle="text" placeholder="昵称"/>
	<input type="submit" value="提交" />
</form>

action属性表示要提交到哪个servlet，比如刚才我创建的servlet叫FdogMaven，这里action就写FdogMaven，method属性表示请求方式，这里选择POST。

然后我们在对应的FdogMaven里面的POST函数写一个处理语句：

protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=utf-8");	
	response.getWriter().append("我是花狗");
	doGet(request, response);
	}

然后运行它,点击提交按钮，将跳转至FdogMaven，并显示我是花狗。

好了，学到了这里，再来看看如何在文本框输入内容，在后台显示。

在文本框中加一个name属性，值为username。

<form action="FdogMaven" method="post">
	<input tyle="text" name="username" placeholder="昵称"/>
	<input type="submit" value="提交" />
</form>

在后台来接收这个值

String username="";
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=utf-8");	
	username = request.getParameter("username");
	response.getWriter().append("你输入的昵称是："+username);
	doGet(request, response);
	}

效果如下：

再回到我们的注册页面，你可能已经有疑问，点击发送短信之后，页面并没有发生跳转，但是后台已经将前台的数据处理完毕，并不像上面的这种，如何做到即执行了servlet，又不执行跳转呢？

第一种解决方法是使用转发，让页面跳转到servlet然后保存数据，再跳转回来，将保存的数据显示，代码如下：

String username="";
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=utf-8");	
	username = request.getParameter("username");
	response.getWriter().append("你输入的昵称是："+username);
	doGet(request, response);
	request.setAttribute("username", username);  //保存昵称
	request.getRequestDispatcher("index.jsp").forward(request,response);//注册页面
	}

servlet返回的值，前端如何接收呢，这时就需要用到jsp了，需要将我们的html文件改成jsp文件，添加第一行代码，然后在文本框添加value值：

<%@page contentType="text/html;charset=utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Fdog注册</title>
	</head>
	<body>
		<form action="AuthCode" name="form" method="post">
	<input tyle="text" id="userName" name="username" placeholder="昵称" 
	value='<%=request.getParameter("username")==null?"":request.getParameter("username")%>'/>
	<input type="submit" value="提交" />
	</form>
	</body>
</html>

效果如下：

第二种技术叫Ajax（异步获取请求），也是我推荐的一种，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

例如图中的发送短信按钮，转发虽然可以携带数据返回，但是如果首页有一些数据不需要在发送验证码的时候处理，则更应该是Ajax。

为按钮添加一个点击事件

<input type="button" id="codebutton" value="获取短信验证码" onclick="codeclick(this)"/>

编写对应js

var xmlhttp;
function codeclick(thisBtn) {
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open("POST","FdogMaven",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//xmlhttp.send("fname=Bill&lname=Gates");//如果是GET请求，可在send添加参数
	xmlhttp.send();
}

---

好了，这篇就写到这里，下一篇的内容是如何生成随机数，如何连接数据库，如何发送短信（免费的），如何部署到服务器让其他人访问并注册。

如果需要源码可以添加我的微信群获取（官方群）

如果觉得好的，还可以给我来个一键三连哦！