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

最新推荐文章于 2022-12-17 10:52:43 发布

Icy Hunter

最新推荐文章于 2022-12-17 10:52:43 发布

阅读量1.6k

点赞数 5

分类专栏： JAVA 前后端开发技术文章标签：服务器 tomcat jquery java ajax

本文链接：https://blog.csdn.net/qq_52785473/article/details/122137771

版权

JAVA 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

前后端开发技术

5 篇文章 0 订阅

订阅专栏

本文将一步步实现在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，即异步请求关闭，对于一些后端数据处理时间较长的场景来说，如果使用同步请求，页面就会卡着不动，但是如果异步请求不会这样。因此，按需设置即可。

Icy Hunter

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于Tomcat服务器，通过JQuery的Ajax方法访问Servlet实现前后端数据同步/异步交流（不必跳转或者刷新网页实现JSP前后端交互）

本文将一步步实现在tomcat服务器上实现使用JQuery的Ajax方法访问Servlet从而将前端的数据能够连接到后端，也能使得后端的数据返回到前端。首先我的环境要求：已配置好tomcat服务器，eclipse（使用别的也一样，我介绍是用eclipse）能够正常运行JSP文件。接下来将一步步介绍如何进行操作：先在eclipse创建动态网页工程文件名字记得改一下，然后创建在Webcontent下创建一个JSP文件在交互.jsp中输入以下代码：<%@ page language="ja
复制链接

扫一扫