原生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>
猜你喜欢
