基于Tomcat服务器,通过JQuery的Ajax方法访问Servlet实现前后端数据同步/异步交流(不必跳转或者刷新网页实现JSP前后端交互)

本文将一步步实现在tomcat服务器上实现使用JQuery的Ajax方法访问Servlet从而将前端的数据能够连接到后端,也能使得后端的数据返回到前端。
首先我的环境要求:
已配置好tomcat服务器,eclipse(使用别的也一样,我介绍是用eclipse)能够正常运行JSP文件。

接下来将一步步介绍如何进行操作:
先在eclipse创建动态网页工程
在这里插入图片描述
文件名字记得改一下,然后创建在Webcontent下创建一个JSP文件
在这里插入图片描述

在交互.jsp中输入以下代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<form>
<input type="email" id="userName">
<input type="password" id="userPwd">
<button type="button" id="asubmit">登录</button>
<span class="text" style="font-size:12px" id="msg"></span>
</form>

</body>
</html>

运行出来应该是两个框和一个按钮
在这里插入图片描述
然后创建servlet
首先得从安装好的tomcat中的lib文件夹中找到servlet-api.jar
在这里插入图片描述
然后放到WebContent的WEB-INF中的lib中
在这里插入图片描述
然后正式开始创建servlet
Java Resources中的src文件单机右键,选择new中的Other…
在这里插入图片描述
然后从Web中找到servlet
在这里插入图片描述
点击next
然后取个包名,取个类名
在这里插入图片描述
然后点击next

然后点击edit改个小名
继续next
在这里插入图片描述
只留下service就够了
在这里插入图片描述
最后finish就可以了。

然后打开刚建好的servlet将以下代码放入:

package com.qianhou.jiaou;


import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 
 */
@WebServlet("/houduan")
public class Qianhoujiaohu extends HttpServlet {
	private static final long serialVersionUID = 1L;


	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String actionName = request.getParameter("actionName");
		
		if("login".equals(actionName)) {//判断传来的actionName变量的值为多少
			userLogin(request, response);
		}
	}

	private void userLogin(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String uname = request.getParameter("uname");
		String upwd = request.getParameter("upwd");

			((ServletResponse) response).setContentType("application/json;charset=UTF-8");
//			设置响应类型及编码格式为json文件格式
			
//			{"code":0,"msg":"用户名或密码不能为空!"}
//			得到输出流
			PrintWriter out = response.getWriter();
//			输出结果
			if(uname.equals("1")&& upwd.equals("1"))//用户名密码都正确
			out.write("{\"code\":1,\"msg\":\"登陆成功(此数据从后端返回)\"}");
			else
			out.write("{\"code\":0,\"msg\":\"用户名或密码有误!数据交互成功(此数据从后端返回)\"}");
			
			out.close();
			return;
		

	}
    
}


然后将交互.jsp文件代码换成下面:

```html
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<form>
<input type="email" id="userName">
<input type="password" id="userPwd">
<button type="button" id="asubmit">登录</button>
<span class="text" style="font-size:12px" id="msg"></span>
</form>


<script>
      //强制刷新页面 ctrl+F5;
      $("#asubmit").click(function(){
    	  var uname = $("#userName").val();
    	  var upwd = $("#userPwd").val();
    	  
    	  
    	  $.ajax({
    		  type:"post",
    		  url:"houduan",  //发送到的服务器就是刚刚取得小名
    		  data:{
    			  uname:uname,
    			  upwd:upwd,
    			  actionName:"login",
    			  //		  async: false
    		  },
    		  success:function(result){
    			  if(result.code == 1){
    				  $("#msg").html(result.msg);
    			  }
    			  else{
    				  $("#msg").html(result.msg);
    			  }
    		  }
    	  })
    	  
      });
</script>
</body>
</html>

点击运行jsp文件就能够看到以下效果:
由于我用户名密码都设置为1(在servlet中有所体现的,看看程序就懂了),当我在前端用户名密码都输入1,然后按登录如下图所示
在这里插入图片描述
当输入用户名密码不是同为1时如下图所示
在这里插入图片描述
到这里,已经是实现了前后端的交互了,即能够将前端得到的用户输入返回给后端,后端则能够通过前端输入的内容进行对应的操作(例如连接数据库调用对应数据、调用别的语言的代码运行等等),从而达到前后端数据的流通。

在Ajax方法中async默认为True代表发送异步请求,即当发送请求之后,他下面的代码会直接往下跑,不会等他接收到请求之后再返回结果,对于一些操作可能会带来一些问题。因此如果想发送同步请求,即希望Ajax发送请求并且接收到后端传来的返回值,代码再继续往下跑,就可以直接async: false,即异步请求关闭,对于一些后端数据处理时间较长的场景来说,如果使用同步请求,页面就会卡着不动,但是如果异步请求不会这样。因此,按需设置即可。

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
首先,我们需要了解MVC三层架构的概念。MVC是指Model、View、Controller三个组件,分别代表数据模型、用户界面和控制器,是一种经典的软件架构模式。MVC将应用程序分为三个部分,使其易于维护和修改。 在MVC架构中,用户界面(View)和数据模型(Model)是分离的,它们之间通过控制器(Controller)进行交互。当用户与应用程序交互时,控制器接收请求并将其转发给相应的模型和视图。 接下来,我们将通过MVC三层架构实现用户注册功能。 1. Model层: 在这个例子中,我们使用MySQL数据库来存储用户注册信息。我们首先需要创建一个User类来表示用户信息: ```java public class User { private String username; private String password; private String email; // 构造方法和getter/setter方法省略 } ``` 然后,我们需要创建一个UserDao类来完成对用户信息的增删改查操作: ```java public class UserDao { // 连接数据库 private Connection conn = DBUtil.getConnection(); // 添加用户 public boolean addUser(User user) { try { String sql = "INSERT INTO user(username, password, email) VALUES (?, ?, ?)"; PreparedStatement ps = conn.prepareStatement(sql); ps.setString(1, user.getUsername()); ps.setString(2, user.getPassword()); ps.setString(3, user.getEmail()); int result = ps.executeUpdate(); if (result > 0) { return true; } } catch (SQLException e) { e.printStackTrace(); } return false; } // 根据用户名查询用户信息 public User getUserByUsername(String username) { User user = null; try { String sql = "SELECT * FROM user WHERE username=?"; PreparedStatement ps = conn.prepareStatement(sql); ps.setString(1, username); ResultSet rs = ps.executeQuery(); if (rs.next()) { user = new User(); user.setUsername(rs.getString("username")); user.setPassword(rs.getString("password")); user.setEmail(rs.getString("email")); } } catch (SQLException e) { e.printStackTrace(); } return user; } } ``` 2. View层: 在这个例子中,我们使用JSP页面来实现用户注册界面。我们创建一个register.jsp页面,包含以下代码: ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <h1>用户注册</h1> <form action="register.do" method="post"> <p> 用户名:<input type="text" name="username" required> </p> <p> 密码:<input type="password" name="password" required> </p> <p> 邮箱:<input type="email" name="email" required> </p> <p> <input type="submit" value="注册"> </p> </form> </body> </html> ``` 3. Controller层: 在这个例子中,我们使用Servlet完成控制器的工作。我们创建一个RegisterServlet类,处理用户注册请求。 ```java public class RegisterServlet extends HttpServlet { private static final long serialVersionUID = 1L; private UserDao userDao = new UserDao(); protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); String password = request.getParameter("password"); String email = request.getParameter("email"); User user = new User(); user.setUsername(username); user.setPassword(password); user.setEmail(email); boolean result = userDao.addUser(user); if (result) { // 注册成功,跳转到登录页面 response.sendRedirect("login.jsp"); } else { // 注册失败,返回注册页面并显示错误信息 request.setAttribute("error", "注册失败,请重新注册!"); request.getRequestDispatcher("register.jsp").forward(request, response); } } } ``` 4. 部署和测试: 将以上代码打包成war包,部署到Tomcat服务器上。访问http://localhost:8080/register.jsp,即可进入用户注册界面。在注册界面输入用户名、密码和邮箱,点击注册按钮,即可完成用户注册操作。 以上就是使用MVC三层架构实现用户注册功能的完整代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Icy Hunter

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值