原生js

100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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>