【JavaWeb】基于Ajax&Json的前后端简单交互方式（Servlet&HTML实现版）

最新推荐文章于 2021-06-04 04:33:20 发布

ADAMs.

最新推荐文章于 2021-06-04 04:33:20 发布

阅读量875

点赞数 5

分类专栏： JavaWeb 前后端交叉响应文章标签： Ajax Json Servlet

本文链接：https://blog.csdn.net/qq_43097201/article/details/103209287

版权

JavaWeb 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

前后端交叉响应

7 篇文章 0 订阅

订阅专栏

FindUserServlet类，用于接收Ajax数据和返回一个封装好数据的Map集合到前端中去:

package ajax;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/findUserServlert")
public class FindUserServlert extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //获取传过来的username
        String username = request.getParameter("username");

        //这里一定要设置json格式
        response.setContentType("application/json;charset=utf-8");

        //创建一个map集合用于封装数据
        Map map = new HashMap();

        //判断该用户是否存在
        if("zhangsan".equals(username)){

            //如果已存在的话，就要执行以下内容
            map.put("userExist",true);
            map.put("msg","改用名已注册，请另起一个名字！");

        }else{

            //如果用户名不存在，就可以直接进行注册
            map.put("userExist",false);
            map.put("msg","此账号可以直接注册！");

        }

        //重新发送一下数据
        ObjectMapper objectMapper = new ObjectMapper();
        objectMapper.writeValue(response.getWriter(),map);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

HTML、ajax、json部分的前端代码（这里我们指定跳转到findUserServlet中）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>

        $(document).ready(function(){
            $("#username").blur(function(){
                var username = $("#username").val();
                $.get("findUserServlert",{username:username},function(data){

                    //判断用户的账号是否存在
                    if(data.userExist){
                        $("#span1").css("color","red");
                        //如果存在的话就返回true，然后显示提示内容
                        $("#span1").html(data.msg);
                    }else{
                        $("#span1").css("color","blue");
                        //如果不存在的话就返回false，然后显示提示内容
                        $("#span1").html(data.msg);
                    }
                });
            });
        });


    </script>
</head>
<body>

    <form>
        <input type="text" id="username" placeholder="请输入用户名" name="username">
        <span id="span1"></span>
        <br>
        <input type="password" placeholder="请输入用户名" name="password"><br>
        <input type="submit" value="登录">
    </form>

</body>
</html>

实现的具体效果就是当我们输入的文字内容重复时，直接提示文本内容：