JavaWeb之Ajax-Servlet-JDBC前后端连接

JavaWeb之Ajax-Servlet-JDBC前后端连接

实例：登录界面的实现

基本逻辑：
在网页端获取用户输入的用户名和密码；
通过Ajax传输到Servlet；
Servlet通过调用DAO访问数据库进行查询；
查询到了返回成功信息给前端进行跳转。

前端JS代码编写-1

在前端HTML里面的登录按钮上设置一个事件，比如οnclick=“login()”
然后我们来看看编写的login函数

<!-- 导入jquery -->
<script src="./js/jquery-3.3.1.min.js" ></script>

function login(){
var uid=$('#uid').val();
var pwd=$('#pwd').val();

在这段代码里面，我们先获取id="uid"的值赋给login里的uid，把id="pwd"的值赋给login里的pwd，做好准备工作。

$.ajax({
type:'post',
url:'http://'+location.host+'/testWork_war_exploded/Servlet?type=login&uid='+uid+'&pwd='+pwd,

这段代码中使用了Ajax语法，将获得的账号、密码信息通过post方式传给Servlet。

Servlet代码编写-1

Servlet先接收到ajax传输过来的值。

@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String type = request.getParameter("type");
if ("login".equals(type)) {
login(request, response);
}else if("register".equals(type)){
register(request,response);
}
}

为了提供更多的功能，我们这里先对传输过来的信息(type)进行了分类，再调用这里的login方法。
在这之前，我们先建立一个DAO对象，方便传值。

	LoginDAO ld= new LoginDAO();

protected void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String uid=request.getParameter("uid");
String pwd=request.getParameter("pwd");
int ifLogin=ld.ifRegister(uid,pwd);

经过这一步，我们相当于已经将uid和pwd的值“传入”了DAO。

那么DAO有什么用呢？

DAO就是接收这些值调用数据库工具对数据库进行操作。
我们可以看一看LoginDAO当中的ifRegister函数：

public int ifRegister(String uid, String pwd) {
int result = 0;
ArrayList<User> users = new ArrayList<>();
try {
String sql = "SELECT * FROM user WHERE uid=? and pwd=md5(?)";
Connection con = DBUtil.getCon();
ResultSet rs = DBUtil.query(con, sql, uid, pwd);
while (rs.next()) { //从头到尾逐行移动指针
//每查询一行，封装为一个User对象
User usr = new User();
//封装数据:从表中转换为对象
usr.setUid(rs.getString(1));
usr.setPwd(rs.getString(2));
users.add(usr);
if (!users.isEmpty()) result = 1;
}
} catch (Exception e) {
e.printStackTrace();
}
return result;
}

我们可以看到，其中有SQL语句对数据库中信息进行查询。

不过这里我们使用了数据库工具DBUtil，我们查看一下DBUtil中的代码：

public static Connection getCon() throws Exception{
String url="jdbc:mysql://localhost:3306/java_project?useUnicode=true&characterEncoding=UTF-8";
Connection con= DriverManager.getConnection(url,"root","root");
return con;
}

↑这个函数是为了使用jdbc和数据库进行连接。

public static ResultSet query(Connection con,String sql, Object... args) throws Exception{
PreparedStatement pst=con.prepareStatement(sql);
for(int i=0;i<args.length;i++){
pst.setObject(i+1,args[i]);
}
ResultSet rs=pst.executeQuery();
//
con.close();
return rs;
}
}

↑这个函数是刚刚我们把传入的数据解析到SQL语句中的“?”处。

所以利用这两个数据库工具，我们将数据库进行了连接，并向数据库中传入了完整的SQL语句。

好了，此时我们就得到了数据库中的信息，封装成User类
注意：User类必须包括传入值为空的构造函数和所有getter和setter
把数据库中的信息一定要对应到User类的信息，rs.getString(ColumnIndex)是get到第n列中的数据(从1开始计数)。

随后，我们进行一次判断，如果users列表里面查询到了有User对象，则返回登录成功，即result=1;如果users列表为空，则返回result=0;

Servlet代码编写-2

刚刚我们写的Servlet代码仅仅是“传入”数据，现在我们要“接收”数据。

int ifLogin=ld.ifRegister(uid,pwd);
response.getWriter().print(ifLogin);
}

这就是紧接着上述Servlet.java中login函数中的剩下部分，这里获取到了DAO中ifRegister的返回值(0或1)赋给ifLogin。
通过response类方法返回给前端。

前端JS代码编写-2

刚刚我们的Servlet已经得到了查询结果，并返回给了前端。
在前端的ajax当中，也有对应的接收方式：

success:function (data) {
if(data==1){
location.href="loginSuccess.html?uid="+escape(uid);
sessionStorage.setItem('isLogin', 'true');
}else{
alert("用户名或者密码错误!");
document.getElementById('uid').value="";
document.getElementById('pwd').value="";
}
}
})
}

这里的data参数就是从后端返回的数据(即0或1)。
我们这里也同时把uid传入了新网页，同时设置了sessionStorage防止绕过登录。

最终我们就实现了我们的登录页面

emm…不过有许多安全漏洞，比如SQL注入等，哎就这样吧哈哈哈

开发环境：IDEA 2019.2
服务器：Tomcat 8
数据库：MySQL

最后

以上就是称心水池为你收集整理的JavaWeb之Ajax-Servlet-JDBC前后端连接的全部内容，希望文章能够帮你解决JavaWeb之Ajax-Servlet-JDBC前后端连接所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。