首页 🍄Java

写一个简单的Ajax:一个输入框输入值判断,如果输入值 == "sakura" 后面显示名字不可用,否则显示可用

JSP页面

写一个form表单

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>$Title$</title>
    <script src="js/jQuery.js"></script>
    <script src="js/Ajax.js"></script>
</head>
<body>

<form action="">
    <input type="text" id="fname" name="fname" onblur="nameOnblur()"> <span id="sp"></span><br>
</form>

</body>
</html>

JS

js里写Ajax

/*获取XmlHttpRequest*/
function getAjax() {
    var xmlHttpRequest;
    /*如果是chrome,火狐,safari,IE7以上等主流浏览器*/
    try {
        xmlHttpRequest = new XMLHttpRequest();
    } catch (e) {
        try {
            /*是否是IE6*/
            xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                /*IE5或者更早版本*/
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                /*抛出异常提示*/
                alert("不存在XmlHttpRequest的浏览器");
                throw e;
            }
        }
    }
    //将对象返回
    return xmlHttpRequest;
}

/*发送请求给服务器*/
function nameOnblur() {
    /*1 打开与服务器的连接*/
    var jsRequest = getAjax();
    /**
     * open(method,url,async) method即提交方式,一般为GET和POST,url为提交的地址,async代表是否异步(true)还是同步(false)
     */
    //此处的url为请求的地址
    jsRequest.open("GET", "/test/index.jsp", true);
    /*2 发送请求*/
    //通知服务器发送的数据是请求参数
    jsRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    jsRequest.send();
    /*3 注册监听*/
    jsRequest.onreadystatechange = function () {
        //确认readyState和status
        if (jsRequest.readyState == 4) {
            if (jsRequest.status == 200) {
                //得到响应参数,处理请求
                //获取input的值
                var name = document.getElementById("fname").value;
                //获取span
                var span = document.getElementById("sp");
                //判断
                if (name == "sakura") {
                    span.innerText = "名字不可用";
                } else {
                    span.innerText = "名字可用";
                }
            }
        }
    }
}

本文参考:https://www.cnblogs.com/youngchaolin/p/11574364.html#_label1_0




文章评论