基于Tomcat服务器，通过JQuery的Ajax方法访问Servlet实现前后端数据同步/异步交流（不必跳转或者刷新网页实现JSP前后端交互）
Posted Icy Hunter
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于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，即异步请求关闭，对于一些后端数据处理时间较长的场景来说，如果使用同步请求，页面就会卡着不动，但是如果异步请求不会这样。因此，按需设置即可。
以上是关于基于Tomcat服务器，通过JQuery的Ajax方法访问Servlet实现前后端数据同步/异步交流（不必跳转或者刷新网页实现JSP前后端交互）的主要内容，如果未能解决你的问题，请参考以下文章
JQuery - Ajax和Tomcat跨域请求问题解决方法！
基于 jQuery AJAX SOAP 的 Web 服务和 CORS（跨源资源共享）[关闭]