将Ajax封装至js文件中(用户注册源码实例）

清潇和梨花 2019-05-01 23:29:03

611

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43901693/article/details/89741138

版权

register.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="/js/register.js"></script>
<html>
<head>
    <link rel="stylesheet" href="/css/login_dl.css" />
    <title>用户注册</title>
</head>
<body>
<img src="/img/bgImg.jpg" class="bgImg" />
<div class="content">
    <h3 class="bidTitle">登录</h3>
    <h4 id="checkinfo"></h4>
    <div class="logCon"><div class="logCon">
        <input type="text" id="usernameinput" class="bt_input" placeholder="用户名" />

        <input type="password" id="passwordinput" class="bt_input" placeholder="密码" />
        <!-- 设置用户默认身份 -->
        <br>
        <span>请选择默认身份：</span>
        <select id="user_role" name="user_role">
            <option value="1" selected>发布者</option>
            <option value="2">接收者</option>
            <option value="3">规范制定者</option>
            <option value="4">法律顾问</option>
        </select>
        <br>
        <button id="registerbutton" onclick="registercheck()" class="logingBut">注册</button>
    </div>
    </div>
</div>
</body>
</html>

register.js

var xmlHttp=false;
function createXMLHttpRequest()
{
    if (window.ActiveXObject)  //在IE浏览器中创建XMLHttpRequest对象
    {
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e){
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(ee){
                xmlHttp=false;
            }
        }
    }
    else if (window.XMLHttpRequest) //在非IE浏览器中创建XMLHttpRequest对象
    {
        try{
            xmlHttp = new XMLHttpRequest();
        }
        catch(e){
            xmlHttp=false;
        }
    }
}
function registercheck(){

    var usernameinput = document.getElementById("usernameinput").value;
    var passwordinput = document.getElementById("passwordinput").value;
    var user_role = document.getElementById("user_role").value;

    /*
     * 将用户名，密码，用户默认身份发送到后台
     */

    createXMLHttpRequest();   //调用创建XMLHttpRequest对象的方法
    xmlHttp.onreadystatechange=registercheckResult;   //设置回调函数
    var url="/Login?action=register&username=" + usernameinput + "&password=" + passwordinput+"&user_role="+user_role;
    xmlHttp.open("POST",url,true);      //向服务器端发送请求
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf8");
    xmlHttp.send(null);
}
function registercheckResult(){
    var usernameinput = document.getElementById("usernameinput").value;
    var passwordinput = document.getElementById("passwordinput").value;
    if (xmlHttp.readyState==4 && xmlHttp.status==200){
        var data= xmlHttp.responseText;
        document.getElementById("checkinfo").innerHTML = "";
        if(data == "false"){
            document.getElementById("checkinfo").innerHTML = "该用户名已被注册";
        }
        if (usernameinput == ""){
            document.getElementById("checkinfo").innerHTML = "用户名不能为空";
        }
        if (passwordinput == ""){
            document.getElementById("checkinfo").innerHTML = "密码不能为空";
        }
        if (usernameinput == "" && passwordinput == ""){
            document.getElementById("checkinfo").innerHTML = "用户名和密码不能为空";
        }
        if(document.getElementById("checkinfo").innerHTML == ""){
            alert("用户注册成功");
            window.location.href="/jsp/login/login.jsp"; //跳转到登录界面

        }
    }
}