登录页 form 表单

<form action="/" id="loginForm" method="post" role="form">
    <div class="dl box-shadow1">
        <div class="dl-bj space-m ">
            <div class="dl-box space-m">
                <div class="dl-box-left float-l">
                    <div class="dl-box-left-text">
                        <div class="neme float-l">用户名</div>

                        <input class="text1 float-l" id="UserAccount" name="UserAccount" type="text"
                            autocomplete="off" value="" />
                    </div>
                    <div class="dl-box-left-text space-m-t-05">
                        <div class="neme float-l">密 码</div>

                        <input class="text2 float-l" id="Password" name="Password" type="password"
                            autocomplete="off" value="" />
                    </div>
                    <div class="float-l" style="width:372px">
                        <table>
                            <tr>
                                <td>
                                    <div class="dl-box-left-textyzm space-m-t-05">
                                        <div class="neme float-l">验证码</div>
                                        <input class="text3" id="SecurityCode" name="SecurityCode"
                                            type="text" autocomplete="off" value="" />
                                    </div>
                                </td>
                                <td>
                                    <div class="neme"><img style=" margin-top:4px;border-radius:5px;"
                                            onclick="this.src= document.location.protocol + '/Account/GetSecurityCode?flag=' + Math.random(); "
                                            id="secImg" title="换一张" /></div>
                                </td>
                            </tr>
                        </table>

                    </div>
                    <br />
                    <div class="err">
                        <div class="ts">
                            <font size="2" color="#fff">
                                验证码错误，请重新输入！
                            </font>
                        </div>
                    </div>
                </div>
                <div class="dl-box-right float-r">
                    <input id="btnLogin" class="label-2 radius-5 pointer space-m-b-10 space-m" type="button"
                        value="登 录" />
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</form>

自动登录 js 脚本

// XMLHttpRequest 请求网络封装方法
const http = {
    ajax: (settings = {}) => {
        let _s = Object.assign ({
            url: '', // string
            type: 'GET', // string 'GET' 'POST' 'DELETE'
            dataType: 'json', // string 期望的返回数据类型:'json' 'text' 'document' 'blob'...
            async: true, // boolean true:异步请求 false:同步请求 required
            data: null, // any 请求参数,data需要和请求头Content-Type对应
            headers: {}, // object 请求头
            timeout: 1000, // string 超时时间:0表示不设置超时
            beforeSend: (xhr) => {},
            success: (result, status, xhr) => {},
            error: (xhr, status, error) => {},
            complete: (xhr, status) => {}
        }, settings);
        // 参数验证
        if (!_s.url || !_s.type || !_s.dataType || _s.async === undefined) {
            alert('参数有误');
            return;
        }
        // 创建XMLHttpRequest请求对象
        let xhr = new XMLHttpRequest();
        // 请求开始回调函数
        xhr.addEventListener('loadstart', e => {
            _s.beforeSend(xhr);
        });
        // 请求成功回调函数
        xhr.addEventListener('load', e => {
            const status = xhr.status;
            if ((status >= 200 && status < 300) || status === 304) {
                let result;
                if (xhr.responseType === 'text') {
                    result = xhr.responseText;
                } else if (xhr.responseType === 'document') {
                    result = xhr.responseXML;
                } else {
                    result = xhr.response;
                }
                // 注意:状态码200表示请求发送/接受成功,不表示业务处理成功
                _s.success(result, status, xhr);
            } else {
                _s.error(xhr, status, e);
            }
        });
        // 请求结束
        xhr.addEventListener('loadend', e => {
            _s.complete(xhr, xhr.status);
        });
        // 请求出错
        xhr.addEventListener('error', e => {
            _s.error(xhr, xhr.status, e);
        });
        // 请求超时
        xhr.addEventListener('timeout', e => {
            _s.error(xhr, 408, e);
        });
        let useUrlParam = false;
        let sType = _s.type.toUpperCase ();
        // 如果是"简单"请求,则把data参数组装在url上
        if (sType === 'GET' || sType === 'DELETE') {
            useUrlParam = true;
            _s.url += http.getUrlParam(_s.url, _s.data);
        }
        // 初始化请求
        xhr.open(_s.type, _s.url, _s.async);
        // 设置期望的返回数据类型
        xhr.responseType = _s.dataType;
        // 设置请求头
        for (const key of Object.keys(_s.headers)) {
            xhr.setRequestHeader(key, _s.headers[key]);
        }
        // 设置超时时间
        if (_s.async && _s.timeout) {
            xhr.timeout = _s.timeout;
        }
        // 发送请求.如果是简单请求,请求参数应为null.否则,请求参数类型需要和请求头Content-Type对应
        xhr.send(useUrlParam ? null : http.getQueryData(_s.data));
    },
    // 把参数data转为url查询参数
    getUrlParam: (url, data) => {
        if (!data) {
            return '';
        }
        let paramsStr = data instanceof Object ? http.getQueryString(data) : data;
        return (url.indexOf('?') !== -1) ? paramsStr : '?'+paramsStr;
    },
    // 获取ajax请求参数
    getQueryData: (data) => {
        if (!data) {
            return null;
        }
        if (typeof data === 'string') {
            return data;
        }
        if (data instanceof FormData) {
            return data;
        }
        return http.getQueryString(data);
    },
    // 把对象转为查询字符串
    getQueryString: (data) => {
        let paramsArr =[];
        if (data instanceof Object) {
            Object.keys(data).forEach(key => {
                let val = data[key];
                // todo 参数Date类型需要根据后台api酌情处理
                if (val instanceof Date) {
                    // val = dateFormat(val, 'yyyy-MM-dd hh:mm:ss');
                }
                paramsArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(val));
            });
        }
        return paramsArr.join('&');
    }
}
// 从 Bolb 中读取 Base64 图片数据方法
function blobToBase64(blob, callback) {
   var reader = new FileReader();
   reader.onload = function (e) {
       callback(e.target.result);
   }
   reader.readAsDataURL(blob);
}
// 自动登录方法
function auto_login() {
    // 替换自己的账户 input 和账户名称
    document.getElementById('UserAccount').value = 'xxxxxxxx';
    // 替换自己的密码 input 和账户密码
    document.getElementById('Password').value = 'xxxxxx';
    // 替换自己的验证码 img
    var imgUrl = document.getElementById('secImg').src;
    http.ajax({
        url: imgUrl,
        dataType: 'blob',
        success: function (blob, status, xhr) {
            blobToBase64(blob, function (base64) {
                var formData = new FormData();
                // 替换自己的图鉴用户名
                formData.append('username', 'xxxxxx');
                // 替换自己的图鉴密码
                formData.append('password', 'xxxxxx');
                formData.append('typeid', '11');
                formData.append('image', base64.replace('data:image/jpeg;base64,', ''));
                http.ajax({
                    url: 'http://api.ttshitu.com/predict',
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    timeout: 0,
                    success: function (response, status, xhr) {
                        let d = response.data;
                        if (d.success) {
                            let {id, result} = d.data;
                            // 替换自己的验证码 img
                            document.getElementById('SecurityCode').value = result;
                            // 替换自己的登录按钮
                            document.getElementById('btnLogin').click();
                        }
                    },
                    error: (xhr, status, error) => {
                        console.log(error);
                    }
                });
            });
        },
        error: (xhr, status, error) => {
            console.log(error);
        }
    });
}
// 调用登录方法
auto_login();

参考文档

• 基于人工智能的高可用图片识别平台
• XMLHttpRequest—必知必会