ajax方式提交表單數據並判斷當前注冊用戶是否存在

本文轉載自查看原文 2018-11-04 10:51 891 源代碼/ ajax/ form表單提交

項目的目錄結構

源代碼：

regservlet.java

package register;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class regservlet
 */
@WebServlet("/regservlet")
public class regservlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public regservlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();

        // 獲取用戶名
        String name = request.getParameter("username");

        // 模擬數據庫
        if ("張運濤".equals(name)) {
            // out.println("用戶名已存在");
            out.println("<font color=red>用戶名已存在</font>");
        } else if (name.equals("")) {
            out.println("<font color=red>用戶名不能為空</font>");
        } else {
            // out.println("用戶名可以使用");
            out.println("<font color=blue>用戶名可以使用</font>");
        }

        out.flush();
        out.close();

    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

window.onload = function() {
    document.getElementById("username").onblur = function() {

        // 獲取<input type="text" name="username" value="" id="username">
        var username = document.getElementById("username").value;

        // 1
        var xmlHttp = ajaxFunction();

        // 2
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200 || xmlHttp.status == 304) {
                    var data = xmlHttp.responseText;
                    document.getElementById("divcheck").innerHTML = data;
                }
            }

        }

        // 3
        xmlHttp.open("post", "../regservlet?timeStamp=" + new Date().getTime(),
                true);
        xmlHttp.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded");

        // 4
        xmlHttp.send("username=" + username);
    }
}

function ajaxFunction() {
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {// Internet Explorer
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
            }
        }
    }
    return xmlHttp;
}

<%@ page language="java" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>校驗用戶名是否存在</title>
<script type="text/javascript" src="./register.js">
    
</script>
</head>
<body>
    <center>
        <form action="" enctype="application/x-www-form-urlencoded">
            <h3>請填寫用戶注冊信息</h3>
            <table border="1">
                <tr>
                    <td>用戶名:</td>
                    <td><input type="text" name="username" value="" id="username">
                        <!--  用戶名已存在顯示在div 中 -->
                        <div id="divcheck"></div>
                </tr>
                <tr>
                    <td>密碼:</td>
                    <td><input type="password" name="psw" value=""></td>
                </tr>

            </table>

        </form>
    </center>
</body>

</html>

運行截圖：

完整源代碼https://pan.baidu.com/s/1PSjQuU96emWL1UYYMKwlaA

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 json數據、ajax判斷用戶是否存在 ajax提交表單數據到controller ajax提交表單數據不跳轉 Servlet的5種方式實現表單提交（注冊小功能），后台獲取表單數據 ajax驗證用戶名是否被注冊 ; ajax提交form表單 jquery的ajax獲取form表單數據、提交表單form jquery ajax異步提交表單數據的方法關於$.ajax()中使用serialize()提交form表單數據 JQuery Ajax() serialize()方法提交Form表單數據 jQuery ajax中使用serialize() 方法提交表單數據