情深忆往缠绵 2022-09-24 13:37 采纳率: 44.6%
浏览 43
已结题

Ajax和jQuery相关问题

问题遇到的现象和发生背景

我想按照书上的这样在一个页面中使用ajax判断用户名输入状态,但是一直实现不了,谁能告诉我怎么弄

img

用代码块功能插入代码,请勿粘贴截图

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>
    <style>
        #div {
            width: 150px;
            height: 150px;
            position: absolute;
            border: 1px solid;
            left: 200px;
            top: 50px;
            display: none;
        }
        
        #check {
            display: none;
        }
    </style>
</head>
<body>
    <jsp:useBean id="ub" class="test1.Test1"></jsp:useBean>
    <jsp:setProperty property="s" name="ub" value="${name }"/>
    <form action="">
        用户名: <input id="name" name="name"><button onclick="check()">检测用户名</button><br/>
        密码: <input type="password" id="pwd" name="pwd"><br/>
        <input id="check" value="${pageScope.ub.find() }">
        <input type="submit" value="按钮">
        <div id="div"></div>
    </form>
</body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var http_request = new XMLHttpRequest();
        var div = $("#div");
        div.on("load", function(){
            if ($("#check").val() === -1) {//设置提示内容
                div.text("该用户未注册");
            }else {
                div.text("该用户已注册");  
            }
        });

        function createRequest(url) {
            //创建XMLHttpRequest主方法体
            var http_request = false;
            if (window.XMLHttpRequest) {
                //判断使用的浏览器是否为ie浏览器
                http_request = new XMLHttpRequest();
            }else if (window.ActiveXObject){
                try {
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");
                }catch (e) {
                    try {
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch (e) {
                    }
                }
                if (http_request) {
                    //如果使用XMLHttpRequst不支持的浏览器则无法创建对象
                    alert("不能创建对象");
                    return false;
                }
            }
            http_request.onreadystatechange = get_result;       //调用返回结果处理函数
            http_request.open("GET", url + ",true");        //创建与服务器的连接
            http_request.send(null);            //向服务器发送请求
        }

        function get_result() {
            if (http_request.status === 4) {    //判断请求状态
                if (http_request.status === 200) {      //请求成功,开始处理返回结果
                    check();
                }else {
                    alert("访问错误");
                }
            }
        }
        
        function check() {
            //创建检查方法
            var username = $("#name").val();
            if (username === "") {
                alert("请输入用户名");
                username.focus();
                return;
            }else {
                div.show();     //显示提示框
                setTimeout(function () {
                    div.hide();
                },3000);
                //3秒后隐藏
                createRequest("test.jsp?name=" + username);
            }
        }
    </script>
</html>


javabean代码:

package test1;

import java.util.ArrayList;
import java.util.List;

public class Test1 {
    private String s;
    private int i;
    
    public Test1() {
        List<String> list = new ArrayList<>();
        list.add("zhangsan");
        list.add("lisi");
        list.add("wangwu");
        i = list.indexOf(getS());
    }
    
    public String getS() {
        return s;
    }

    public void setS(String s) {
        this.s = s;
    }

    public int find() {
        return i;
    }
}


运行结果及报错内容

img

我想要达到的结果

平台的付费悬赏金额最低限度太高,如果有人愿意帮我解答,并且本人亲测没问题后,本人愿意付少量金额当做酬劳

  • 写回答

2条回答 默认 最新

  • MAXLZ 2022-09-24 15:26
    关注

    http_request.status === 4这里应该是http_request.readyState

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月22日
  • 已采纳回答 3月22日
  • 创建了问题 9月24日

悬赏问题

  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题:自动化测试
  • ¥20 问题请教!vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法,未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet,要求快速高效
  • ¥15 再不同版本的系统上,TCP传输速度不一致
  • ¥15 高德地图2.0 版本点聚合中Marker的位置无法实时更新,如何解决呢?
  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题