使用JQuery与Servlet实现Ajax

最新推荐文章于 2023-03-30 20:42:38 发布

ayualign

最新推荐文章于 2023-03-30 20:42:38 发布

阅读量300

点赞数 2

文章标签： ajax java js web maven

本文链接：https://blog.csdn.net/ayualign/article/details/111885735

版权

使用JQuery与Servlet实现ajax 登录验证（异步刷新）

环境搭建

首先需要先搭建环境，使用idea 创建一个web项目使用maven管理

运行环境为 Tomcat 8.5.51 + jdk1.8

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wPqmXSx2-1609212755710)(C:\Users\hu\AppData\Roami 在这里插入图片描述

ng\Typora\typora-user-images\1609210675284.png)]

生成一个maven maven 可以很干净的插件这些都能删

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sivx1sip-1609212755712)(C:\Users\hu\AppData\Roaming\Typora\typora-user-images\1609210830372.png)]

接下来导入项目所需要的包这里我们使用 maven 来管理依赖

<dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.3</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp.jstl</groupId>
            <artifactId>jstl-api</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>
    </dependencies>

将maven 依赖写入 pom.xml 中

idea集成配置tomcat

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gW1wGtPf-1609212755713)(C:\Users\hu\AppData\Roaming\Typora\typora-user-images\1609211024488.png)]

Run下面有一个

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUU7WZto-1609212755715)(C:\Users\hu\AppData\Roaming\Typora\typora-user-images\1609211072771.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pAqvjnHz-1609212755716)(C:\Users\hu\AppData\Roaming\Typora\typora-user-images\1609211090828.png)]

点击加号不要在templates里面找

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Of6UJ7R-1609212755717)(C:\Users\hu\AppData\Roaming\Typora\typora-user-images\1609211127198.png)]

往下面翻找到Tomcat Server 点击第一个也就是本地

这里使用 tomcat8 + jdk1.8

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DSIc9gSx-1609212755718)(C:\Users\hu\AppData\Roaming\Typora\typora-user-images\1609211238910.png)]

这样一个idea web 就配置完成了

前端代码

接下来在jsp页面中写入

这里我直接给代码

这里要注意需要导入一个 JQuery 的文件

创建一个 statics 文件将js 文件放入其中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NmOhMYSr-1609212755718)(C:\Users\hu\AppData\Roaming\Typora\typora-user-images\1609211597886.png)]

<%--
  Created by IntelliJ IDEA.
  User: hu
  Date: 2020/12/29
  Time: 9:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.0.js"></script>
    
    <script type="text/javascript">
        function a1() {
            $.ajax({
                url: "${pageContext.request.contextPath}/ajax",
                data: {"username": $("#username").val()},
                success: function (data) {
                    console.log(data)
                    if (data == 'yes') {
                        $("#span01").css("color","green");
                        $("#span01").html("账号正确");
                    }else if (data == 'no'){
                        $("#span01").css("color","red");
                        $("#span01").html("账号错误");
                    }else {
                        $("#span01").html("");
                    }
                }
            })
        }
        function a2(){
            $.ajax({
                url: "${pageContext.request.contextPath}/ajax2",
                data: {"password": $("#password").val()},
                success: function (data) {
                    console.log(data)
                    if (data == 'yes') {
                        $("#span02").css("color","green");
                        $("#span02").html("密码正确");
                    }else if (data == 'no'){
                        $("#span02").css("color","red");
                        $("#span02").html("密码错误");
                    }else {
                        $("#span02").html("");
                    }
                }
            })
        }
    </script>
</head>
<body>
用户名:<input type="text" id="username" οnkeyup="a1()"/>
<span id="span01"></span>
</br>
密码:<input type="password" id="password" οnkeyup="a2()"/>
<span id="span02"></span>
</body>
</html>

这里带大家进行分析

先创建2 个输入框分别加入 2个键盘弹起事件 a1（） a2（） 2个js 函数

a1 a2 同理带大家分析 a1

$.ajax() 是一个 jquery封装的函数默认异步请求有同步设置这里只提异步

3个常用参数

url：提交请求的路径

data ：从前端请求传入的参数 json 传输

success ：回调函数请求执行完执行的一个函数

function（date）这里面的 date 是从后端响应返回的值

function a1() {
            $.ajax({
                url: "${pageContext.request.contextPath}/ajax",
                //这里是 一个后端 servlet 请求 将业务交给后端处理
                
                data: {"username": $("#username").val()},
                //这里是 传输给 后端的参数
                success: function (data) {
                    // servlet 执行完 返回一个 响应 
                    // 这里的date 为 后端 resp.getWriter().write("yes"); write返回的值
                    // 解析 data 值 判断情况 改变 jsp的状态 实现 局部刷新 也就是异步请求
                    console.log(data)
                    if (data == 'yes') {
                        $("#span01").css("color","green");
                        $("#span01").html("账号正确");
                    }else if (data == 'no'){
                        $("#span01").css("color","red");
                        $("#span01").html("账号错误");
                    }else {
                        $("#span01").html("");
                    }
                }
            })
        }

后端代码

package com.huyuya.servlet;

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

/**
 * @author huyu
 * @version 1.0
 * @date 2020/12/29 9:45
 */
public class AjaxTest extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //从请求中 得到 1个参数 （data中得到的）
        String username = req.getParameter("username");
        System.out.println(username);
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        //判断 是不是正确的账号  根据情况判断 返回状态给前端 
        if(username!=null && !username.equals("")){
            if("admin".equals(username)){
                resp.getWriter().write("yes");
            }else {
                resp.getWriter().write("no");
            }
        }else {
            resp.getWriter().write("null");
        }

    }

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

resp.getWriter().write(“null”);
}

}

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

}

ayualign

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery与Servlet实现Ajax

使用JQuery与Servlet实现ajax 登录验证（异步刷新）环境搭建首先需要先搭建环境，使用idea 创建一个web项目使用maven管理运行环境为 Tomcat 8.5.51 + jdk1.8[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wPqmXSx2-1609212755710)(C:\Users\hu\AppData\Roaming\Typora\typora-user-images\1609210675284.png)]生成一个m
复制链接

扫一扫