Case Description: same name verification

JavaScript：

Using AJAX technology to submit via GET Servlet

Servlet Code:

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
    String username = request.getParameter("username");
    boolean used = false;
    if (username.equals("ajax")) {
        used = true;
    }
    out.print(used);
    out.flush();
    out.close();
}

JSP code:

< script type = "text/javascript" > 
$(function() {
    $("#iu").blur(function() {
        alert("a");

        //1.创建XMLHttpRequest对象
        if (window.XMLHttpRequest) { //判断浏览器类型，true为IE新版浏览器(7+)或其他浏览器
            XMLHttpRequest = new XMLHttpRequest();
        } else {
            XMLHttpRequest = new XMLHttpRequest("Microsoft.XMLHTTP");
        }

        //2.设置回调函数
        XMLHttpRequest.onreadystatechange = callBack;

        //3.初始化XMLHttpRequest组件
        var username = $("#iu").val();
        var url = "logicServlet?username=" + username;
        XMLHttpRequest.open("GET", url, true);

        //4.发送请求
        XMLHttpRequest.send(null);
    })
})

//回调callBack函数处理响应结果
    function callBack() {
        if (XMLHttpRequest.readyState == 4 && XMLHttpRequest.status == 200) {
            var data = XMLHttpRequest.responseText;
            if (data == true) {
                $("#display").text("用户名已存在")
            } else {
                $("#display").text("用户名可用")
            }
        }
    } 
</script>

<body>
    <span>查重：</span><input type="text" value="ajaxTest"  name="username" id="iu"/><span id=display></span>
</body>

JavaScript uses AJAX technology to submit to the Servlet by POST, other code simply by changing the following code unchanged

//3.初始化XMLHttpRequest组件
var url = "logicServlet";
XMLHttpRequest.open("POST", url, true);
XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.发送请求
var username = $("#iu").val();
var data = "username=" + username;
XMLHttpRequest.send(data);

JQuery achieve AJax technology:

JSP Script page code:

< script type = "text/javascript" > 
$(function() {
    $("#iu").blur(function() {
        var username = $(this).val();
        $.ajax({
            url: "logicServlet",
            type: "get",
            data: {
                "username": username
            },
            dataType: "text",
            success: callBack,
            error: function() {
                alert("无响应");
            }
        })
    })
})

//回调callBack函数处理响应结果
function callBack(data) {
    if (data == true) {
        $("#display").text("用户名不可用");
    } else {
        $("#display").text("用户名可用");
    }
} 
< /script>

Nickname do it

Published 21 original articles · won praise 2 · Views 1052

Private letter concerns

JavaScript and JQuery how to use Ajax technology

Case Description: same name verification

JavaScript：

Using AJAX technology to submit via GET Servlet

JavaScript uses AJAX technology to submit to the Servlet by POST, other code simply by changing the following code unchanged

JQuery achieve AJax technology:

Guess you like