原生js
JS 原生
2023-09-11 14:22:42 时间
<!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>
相关文章
- js和原生应用常用的数据交互方式
- 原生Js_简易图片轮播模板
- A2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)
- 《Ext JS 4 First Look》翻译之三:布局
- node.js原生后台进阶(一)
- [Vue-rx] Cache Remote Data Requests with RxJS and Vue.js
- Js模板引擎mustache
- 我为什么选择采用node.js来做新一代的EasyDarwin RTSP开源流媒体服务器
- paip.php 与js 的相似性以及为什么它们这么烂还很流行。。
- 在 Kyma 云原生平台上开发并部署 Node.js 应用
- three.js(JS 三维模型库)介绍和入门
- JS富文本下一代所见即所得编辑器 - Froala Editor 4.1.6
- 〖大前端 - 基础入门三大核心之JS篇④〗- JavaScript中的数据类型之数字类型
- js正则验证方法大全
- JS:crypto-js实现AES加密解密
- (十)js获取日期
- js中let和var定义变量的区别
- 原生js实现随机验证码HTMl-JS
- JS中的括号和点号