javaweb07 jquery+ajax技术实现异步请求登录

最新推荐文章于 2023-05-29 14:56:58 发布

Wantfly9951

最新推荐文章于 2023-05-29 14:56:58 发布

阅读量380

点赞数

分类专栏： javaweb 文章标签： js ajax java jquery html

本文链接：https://blog.csdn.net/Wantfly9951/article/details/113765358

版权

javaweb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%--设置识别EL表达式--%>
<%@page isELIgnored="false" %>
<%--导入jstl的包 否则无法使用--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一点达订餐系统-用户登录</title>
    <link href="../css/css.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    //去网上下载对应的jquery js文件 并且导入工程
    <script type="text/css" src="${pageContext.request.contextPath}/css/jquery1.4.js"></script>
    <style>
        .form-control{
            width: 20%;
        }
    </style>
</head>
<body style="background: blanchedalmond">
<div id="loginimg">
    <img src="${pageContext.request.contextPath}/images/title1.jpg" width="100%">

<div class="c4">
    <form action="/toLogin" name="loginF" method="post" style="text-align: center">
        <div class="form-group" align="center">
            <label for="exampleInputEmail1">用户名</label>
            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名" name="username"
            style="width: 70%">
        </div>
        <p id="checkname" style="color: indianred">&nbsp;</p>
        <div class="form-group" align="center">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码" name="password"
                   style="width: 70%">
        </div>
        <span class="error1">${loginerror}</span>
        <div align="center">
            <button type="submit" class="btn btn-default" style="margin:20px;width: 25%" id="submit">用户登录</button>
            <button type="button" class="btn btn-default" style="margin:20px;width: 25%"><a href="${pageContext.request.contextPath}/pages/register.jsp" id="rega">用户注册</a></button>
        </div>
    </form>


</div>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
//找到对应的组件并且设置失去焦点事件
    $("#exampleInputEmail1").blur(function (){
    //获得exampleInputEmail1的输入值
        var username=$("#exampleInputEmail1").val();
        //利用jquery字典的ajax方法 进行传值
        $.ajax({
        //url指具体请求传到哪里，这里是传到servlet
            "url":"/checkusername",
            //传值方式 post或get
            "type":"post",
            //发送的数据
            "data":"username="+username,
            //数据类型
            "dataType":"json",
            //请求成功的回调函数，请求执行后得到结果再执行 obj是返回的参数
            //也可以用error设置请求失败的回调函数
            success:function (obj) {
            //判断 然后对应做出处理
                if(obj.status==0){
                    $("#checkname").html(obj.msg);
                    $("#checkname").css("color","red");
           //设置无法提交
                    $("#submit").attr("disabled",true);
                }else {
                    $("#checkname").html(obj.msg);
                    $("#checkname").css("color","green");
                    $("#submit").attr("disabled",false);
                }

            }
        });
    });
</script>

</html>

接收请求的servlet

package controller;

import com.alibaba.fastjson.JSONObject;
import dao.DaoCrud;
import netscape.javascript.JSObject;
import pojo.User;

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(urlPatterns = "/checkusername")
public class CheckNameServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置中文编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html; charset=UTF-8");
//接收异步请求传的参数
        String username=req.getParameter("username");
        DaoCrud daoCrud=new DaoCrud();
        //查询对应的结果
        User user=daoCrud.SelectName(username);
        //存入到map中
        Map<String,Object> map=new HashMap<>();
        //获得json对象
        JSONObject jsonObject=new JSONObject();
        if (user==null){
        //放入参数
            map.put("msg","用户名不存在");
            map.put("status",0);
            //将map转化为json类型的字符串
            String jsonvalue= jsonObject.toJSONString(map);
            //响应 并且返回参数到页面
            resp.getWriter().write(jsonvalue);
        }else {
            map.put("msg","用户名正确");
            map.put("status",1);
            String jsonvalue= jsonObject.toJSONString(map);
            resp.getWriter().write(jsonvalue);
        }
    }
}

Wantfly9951

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javaweb07 jquery+ajax技术实现异步请求登录

login.jsp页面实现ajax异步发送请求<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%--设置识别EL表达式--%><%@page isELIgnored="false" %><%--导入jstl的包否则无法使用--%><%@ taglib uri="http://java.sun.com
复制链接

扫一扫