原生js
<!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>