登录页 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();
参考文档
