zoukankan      html  css  js  c++  java
  • 原生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-u9fa5w]/.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>
    

      

  • 相关阅读:
    JavaScript递归函数解“汉诺塔”
    《JavaScript DOM编程艺术》学习笔记(三)
    《JavaScript DOM编程艺术》学习笔记(二)
    《JavaScript DOM编程艺术》学习笔记(一)
    《手把手教你实现电商网站开发》课程学习总结
    学校水卡、本地公交卡破解记
    第一篇博客
    mysql5.7.5以上版本使用distinct和order by 报错备忘录
    group_concat长度限制踩坑备忘录
    ArrayList、LinkedList、Vector的区别
  • 原文地址:https://www.cnblogs.com/gzhbk/p/13364803.html
Copyright © 2011-2022 走看看