JSP&Servlet（7）——使用AJAX传递JSON数据到Servlet

最新推荐文章于 2022-01-13 12:32:24 发布

二木成林

最新推荐文章于 2022-01-13 12:32:24 发布

阅读量857

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # JSP&Servlet 文章标签： JSP Servlet AJAX JSON

本文链接：https://blog.csdn.net/cnds123321/article/details/102092210

JSP&Servlet 专栏收录该内容

18 篇文章

订阅专栏

结果展示

说明：

本项目是maven项目，由于需要Gson包，所以由maven引入第三方依赖，如下：

    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.8.5</version>
    </dependency>

register.html

在register.html中写注册页面，其中使用jQuery的AJAX进行提交数据到后端的servlet。

其中代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="js/jquery.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap.min.js"></script>
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="css/basic.css" />
	</head>
	<body>
		<div class="jumbotron" align="center">
			<form id="registerForm">
				<table cellspacing="0" cellpadding="0">
					<tr align="center">
						<th colspan="3" style="text-align: center;">
							<h2>用户注册</h2>
						</th>
					</tr>
					<tr>
						<td class="text-muted">身份：</td>
						<td colspan="2">
							<select class="form-control" name="identity">
								<option value="请选择身份">请选择身份</option>
								<option value="学生">学生</option>
								<option value="教师">教师</option>
								<option value="管理员">管理员</option>
							</select>
						</td>
					</tr>
					<tr>
						<td class="text-muted">用户名：</td>
						<td colspan="2"><input class="form-control" placeholder="请输入账号" type="text" name="username"></td>
					</tr>
					<tr>
						<td class="text-muted">密码：</td>
						<td colspan="2"><input class="form-control" placeholder="请输入密码" type="password" name="password"></td>
					</tr>
					<tr>
						<td class="text-muted">验证码：</td>
						<td><input class="form-control" type="text" name="verificationCode"></td>
						<td><img src="#" onclick="changeImg"></td>
					</tr>
					<tr align="center">
						<td><input class="btn btn-primary" type="button" value="注册" onclick="register()"></td>
						<td><input class="btn btn-warning" type="reset" value="重置"></td>
					</tr>
					<tr align="center">
						<td colspan="3" class="text-muted">已有账号？立即<a href="login.html">登录</a></td>
					</tr>
				</table>
			</form>
		</div>
		<script type="text/javascript">
			function register() {
				$.ajax({
					type:"POST",// 传数据的方式
					url:"registerServlet",// servlet的地址
					data:$('#registerForm').serialize(), //传的数据form表单里面的数据
					success:function (result) {//传数据成功之后的操作，result是servlet传过来的数据，这个函数对result进行处理
						// 将从后端传过来的数据再次解析成JSON
						var jsonResult = JSON.parse(result);
						var identity = jsonResult.identity;
						var username = jsonResult.username;
						var password = jsonResult.password;
						alert("身份："+identity+"；用户名："+username+"；密码："+password);// 通过alert方法显示
					}
				})
			}
		</script>
	</body>
</html>

User.java

实体对象类

package com.mycom.myapp.ajaxtest.bean;

public class User {
    private int id;
    private String identity;
    private String username;
    private String password;

    public User() {
    }

    public User(int id, String identity, String username, String password) {
        this.id = id;
        this.identity = identity;
        this.username = username;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getIdentity() {
        return identity;
    }

    public void setIdentity(String identity) {
        this.identity = identity;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

RegisterServlet.java

该类是处理注册，获取从前端页面传过来的数据，并将一些数据以JSON的形式传回前端。

package com.mycom.myapp.ajaxtest.servlet;

import com.google.gson.Gson;
import com.mycom.myapp.ajaxtest.bean.User;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 注册servlet
 *
 * @author lck100
 */
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置请求的编码格式
        request.setCharacterEncoding("UTF-8");
        // 设置响应的编码格式
        response.setContentType("text/html;charset=UTF-8");
        // 获取前端数据值
        String identity = request.getParameter("identity");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 实例化Gson对象
        // Gson为google处理JSON格式数据的jar包，可将JSON字符串转换为对应的Java对象，也可将相应的Java对象序列化为JSON字符串。
        Gson gson = new Gson();
        // 实例化实体对象
        User user = new User(1, identity, username, password);
        // 将实体对象转换成JSON数据
        String result = gson.toJson(user);
        // 传数据到前端
        response.getWriter().println(result);
        // 输出数据到控制台显示
        System.out.println(result);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
}

web.xml

在web.xml中对servlet进行注册

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--注册Servlet-->
    <servlet>
        <servlet-name>RegisterServlet</servlet-name>
        <servlet-class>com.mycom.myapp.ajaxtest.servlet.RegisterServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>RegisterServlet</servlet-name>
        <url-pattern>/registerServlet</url-pattern>
    </servlet-mapping>
    <!--设置欢迎页面-->
    <welcome-file-list>
        <welcome-file>register.html</welcome-file>
    </welcome-file-list>
</web-app>

如果对完整源码感兴趣。

可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。

注意：在公众号后台回复【CSDN201910042027】可获取本节源码。