<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仓库成品销售出库</title>
<script type="text/javascript">

window.onload = function(){
var submitBtn = document.getElementById('submitBtn');
var userno = document.getElementById('userno');
var djno = document.getElementById('djno');
var barcode = document.getElementById('barcode');
var oErrContent = document.getElementById('errContent');

submitBtn.onclick = function(){
var doRegister = true;
var errStr = "";

if(!userno.value){
errStr += "用户不能为空</br>";
doRegister = false;
}

if(!djno.value){
errStr += "单据号不能为空</br>";
doRegister = false;
}else if(/[^\u4e00-\u9fa5\w]/.test(djno.value)){
errStr += "单据号格式不对" +"</br>";
doRegister = false;
}

if(!barcode.value){
errStr += "条码不能为空</br>";
doRegister = false;
}

if(doRegister){
//此处写相应的ajax提交
alert("开始查询数据...");

ajax({
method: 'GET',
url: '/foensys/xsck/xsckFind.do',
data: {
userno: userno.value,
djno: djno.value,
barcode: barcode.value
},
success: function (response) {
console.log(response);
console.log(response.type);
var obj = JSON.parse(response);
if(obj.type==true && obj.value!=null){
alert(obj.value)
document.getElementById('errContent').innerHTML = obj.value.szRetMessage;
document.getElementById('szRetMessage').innerHTML = obj.value.szRetMessage;
document.getElementById('orderno').innerHTML = obj.value.orderno;
document.getElementById('color').innerHTML = obj.value.color;
document.getElementById('bzfs').innerHTML = obj.value.bzfs;
document.getElementById('scannum').innerHTML = obj.value.scannum;
document.getElementById('djno').innerHTML = obj.value.djno;
document.getElementById('model').innerHTML =obj.value.model;
}
},fail:function (response) {
console.log(response);
alert("fail===,");

}
});
}else{
oErrContent.innerHTML = errStr;
}

}


}

//清空
function clearErr(){
document.getElementById('errContent').innerHTML = "";
}


/* 封装ajax函数
* @param {string}opt.type http连接的方式,包括POST和GET两种方式
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
* @param {object}opt.data 发送的参数,格式为对象类型
* @param {function}opt.success ajax发送并接收成功调用的回调函数
*/
function ajax(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || 'POST';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {};
var xmlHttp = null;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
var params = [];
for (var key in opt.data){
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
};
}

</script>
</head>
<body>
<div class="content">
<div class="title">查询</div>
<form onsubmit="return false">
<div><label><span></span>用户名:</label><input onfocus="clearErr()" id="userno" type="text" value="enlo" placeholder="只能包含中文、英文、数字和下划线"></div>
<div><label><span></span>单据号:</label><input onfocus="clearErr()" id="djno" type="text" placeholder=""></div>
<div><label><span></span>条 码:</label><input onfocus="clearErr()" id="barcode" type="text"></div>
<div><button id="submitBtn" type="submit">查询</button><div id="errContent"></div></div>

</form>
</div>

<div class="content">
<div><label>状态</label><div id="szRetMessage"></div></div>
<div><label>订单号</label><div id="orderno"></div></div>
<div><label>颜色</label><div id="color"></div></div>
<div><label>客户名称</label><div id="bzfs"></div></div>
<div><label>扫描扎数</label><div id="scannum"></div></div>
<div><label>单据号</label><div id="djno"></div></div>
<div><label>型号</label><div id="model"></div></div>
</div>

</body>
</html>