zoukankan      html  css  js  c++  java
  • 一个问题提交的实例(js原生动画,原生ajax,js引用加参数)

    document.writeln("<div id="tanchuangwai" class="tanchuangwai" style="z-index:999;overflow:hidden;font-family:微软雅黑; background:#6cadde; 236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0; position:fixed; bottom:0; right:0;">");
    document.writeln("  <h3 style=" height:29px; 100px; color:#ffffff; font-size:12px; float:left; padding:0 0 0 10px; font-weight:normal; margin:0;">请您留言</h3>");
    document.writeln("  <span id="dakai" class="guanbi" style=" color:#ffffff; font-size:11px; height:29px; float:right; margin:0 5px 0 0; cursor:pointer;" id="guanbi" onclick="goPanel();">打开</span></div>");
    document.writeln("<div id="tanchuang" class="tanchuang" style="z-index:999;overflow:hidden;font-family:微软雅黑; position:fixed; 236px; background:#ffffff; right:0; bottom:0px; display:none;">");
    document.writeln("  <div style="background:#6cadde; 236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0;">");
    document.writeln("    <h3 style=" height:29px; 100px; color:#ffffff; font-size:12px; float:left; padding:0 0 0 10px; font-weight:normal; margin:0;">请您留言</h3>");
    document.writeln("    <span id="guanbi" class="guanbi" style=" color:#ffffff; font-size:11px; height:29px; float:right; margin:0 5px 0 0; cursor:pointer;" onclick="goClose();">关闭</span></div>");
    document.writeln("  <div style=" 194px; float:left; padding:0 20px; border-left:1px solid #6cadde; border-right:1px solid #6cadde; border-bottom:1px solid #6cadde; background:#f5f5f5;">");
    document.writeln("    <textarea id="pArea" style=" font-family:微软雅黑; 182px; height:80px; border:1px solid #cccccc; background:#ffffff; padding:5px; color:#a9a9a9; font-size:12px; line-height:20px; float:left; margin:10px 0 10px 0;" placeholder="请输入问题描述"></textarea>");
    document.writeln("    <div style="192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;"><span style=" 32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;">类型</span>");
    document.writeln("      <select id="pSel" name="select" style=" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 7px; 159px;">");
    document.writeln("        <option value="系统异常">系统异常</option>");
    document.writeln("        <option value="功能操作">功能操作</option>");
    document.writeln("        <option value="功能体验">功能体验</option>");
    document.writeln("      </select>");
    document.writeln("    </div>");
    document.writeln("    <div style="192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;"><span style=" 32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;">姓名</span>");
    document.writeln("      <input id="pName" type="text"/ placeholder="请输入您的姓名" style=" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 10px; 149px;">");
    document.writeln("    </div>");
    document.writeln("    <div style="192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;"><span style=" 32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;">电话</span>");
    document.writeln("      <input id="pTel" type="text"/ placeholder="请输入您的电话" style=" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 10px; 149px;">");
    document.writeln("    </div>");
    document.writeln("    <input style=" font-family:微软雅黑; background:#6cadde; border-radius:5px; 91px; height:23px; text-align:center; color:#000000; line-height:23px; margin:10px 51px; border:none; cursor:pointer;" type="button" value="提交" onclick="sub();" />");
    document.writeln("  </div>");
    document.writeln("</div>");
    
    var url = "XXX";
    var par;
    
    var a = document.getElementById("tanchuangwai");
    var b = document.getElementById("guanbi");
    var p; 
    var s;
    var h;
    function goPanel(){
        document.getElementById("tanchuangwai").style.display = "none";
        p = document.getElementById("tanchuang");
        p.style.display = "block";
        p.style.height = "29px";
        s = setInterval(upPanel,1);
    }
    function goClose(){
        p = document.getElementById("tanchuang");
        h = setInterval(downPanel,1);
    }
    function upPanel(){
        var height = parseInt(p.style.height.replace("px",""));
        height = height + 3;
        p.style.height = height+"px";
        if(height >= 281){
            clearInterval(s);
        }
    }
    function downPanel(){
        var height = parseInt(p.style.height.replace("px",""));
        height = height - 3;
        p.style.height = height+"px";
        if(height <= 29){
            clearInterval(h);
            p.style.display = "none";
            document.getElementById("tanchuangwai").style.display = "block";
        }
    }
    function ajax(){
        var oAjax = null;
        if(window.XMLHttpRequest){
            oAjax = new XMLHttpRequest();
        }else{
            oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        };
         
        oAjax.open('POST', url, true); 
        oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        var area = document.getElementById("pArea").value;
        var sel = document.getElementById("pSel").value;
        var name = document.getElementById("pName").value;
        var tel = document.getElementById("pTel").value;
        var url1 = window.location.href;
        oAjax.send("area=" + area + "&sel=" + sel + "&name=" + name + "&tel=" + tel + "&par=" + par + "&url=" + url1);
          
        oAjax.onreadystatechange = function(){ 
            if(oAjax.readyState == 4){  
                if(oAjax.status == 200){   
                    alert(oAjax.responseText) 
                }else{
                    alert("请求错误");
                }
            }
        };
    }
    function sub() {
        var js = document.getElementsByTagName("script");
        for (var i = 0; i < js.length; i++) {
            if (js[i].src.indexOf("panel.min.js") >= 0) {
                var arraytemp = new Array();
                arraytemp = js[i].src.split('?');
                arraytemp = arraytemp[1].split('=');
                if (arraytemp[0] == 'value') {
                    par = arraytemp[1];
                }
            }
        };
        ajax();
    }

     同样的代码,这是修改后的使用ajax上传图片的代码:

    var url = "http://XXX";
    document.writeln("<div id="tanchuangwai" class="tanchuangwai" style="z-index:999;overflow:hidden;font-family:微软雅黑; background:#6cadde; 236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0; position:fixed; bottom:0; right:0;">");
    document.writeln("  <h3 style=" height:29px; 100px; color:#ffffff; font-size:12px; float:left; padding:0 0 0 10px; font-weight:normal; margin:0;">请您留言</h3>");
    document.writeln("  <span id="dakai" class="guanbi" style=" color:#ffffff; font-size:11px; height:29px; float:right; margin:0 5px 0 0; cursor:pointer;" id="guanbi" onclick="goPanel();">打开</span></div>");
    document.writeln("<div id="tanchuang" class="tanchuang" style="z-index:999;overflow:hidden;font-family:微软雅黑; position:fixed; 236px; background:#ffffff; right:0; bottom:0px; display:none;">");
    document.writeln("  <div style="background:#6cadde; 236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0;">");
    document.writeln("    <h3 style=" height:29px; 100px; color:#ffffff; font-size:12px; float:left; padding:0 0 0 10px; font-weight:normal; margin:0;">请您留言</h3>");
    document.writeln("    <span id="guanbi" class="guanbi" style=" color:#ffffff; font-size:11px; height:29px; float:right; margin:0 5px 0 0; cursor:pointer;" onclick="goClose();">关闭</span></div>");
    document.writeln("  <div style=" 194px; float:left; padding:0 20px; border-left:1px solid #6cadde; border-right:1px solid #6cadde; border-bottom:1px solid #6cadde; background:#f5f5f5;">");
    document.writeln("    <textarea id="pArea" name='area' style=" font-family:微软雅黑; 182px; height:80px; border:1px solid #cccccc; background:#ffffff; padding:5px; color:#a9a9a9; font-size:12px; line-height:20px; float:left; margin:10px 0 10px 0;" placeholder="请输入问题描述(少于200字)"></textarea>");
    document.writeln("    <div style="192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;"><span style=" 32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;">类型</span>");
    document.writeln("      <select id="pSel" name="sel" style=" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 7px; 159px;">");
    document.writeln("        <option value="系统异常">系统异常</option>");
    document.writeln("        <option value="功能操作">功能操作</option>");
    document.writeln("        <option value="功能体验">功能体验</option>");
    document.writeln("      </select>");
    document.writeln("    </div>");
    document.writeln("    <div style="192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;"><span style=" 32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;">姓名</span>");
    document.writeln("      <input id="pName" name='name' type="text"/ placeholder="请输入您的姓名" style=" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 10px; 149px;">");
    document.writeln("    </div>");
    document.writeln("    <div style="192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;"><span style=" 32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;">电话</span>");
    document.writeln("      <input id="pTel" name='tel' type="text"/ placeholder="请输入您的电话" style=" font-family:微软雅黑; background:#ffffff; float:left; border:none; color:#a9a9a9; padding:0 0 0 10px; 149px;">");
    document.writeln("    </div>");
    document.writeln("    <div style="192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;"><span style=" 32px; height:20px; font-size:12px; color:#666666; text-align:center; float:left; background:#f2f2f2; border-right: 1px solid #cccccc;">上传</span>");
    document.writeln("      <input type='file' id='img' name='img' value='' style='150px;height:20px;' accept='.jpg,.bmp'/>");
    document.writeln("    </div>");
    document.writeln("    <input style=" font-family:微软雅黑; background:#6cadde; border-radius:5px; 91px; height:23px; text-align:center; color:#000000; line-height:23px; margin:10px 51px; border:none; cursor:pointer;" type="button" value="提交" onclick="sub();" />");
    document.writeln("  </div>");
    document.writeln("</div>");
    document.writeln("<input type='hidden' name='par' id='par' value=''/>");
    
    var par;
    var upload = "WebForm3.aspx";
    
    var a = document.getElementById("tanchuangwai");
    var b = document.getElementById("guanbi");
    var p; 
    var s;
    var h;
    var scs;
    function goPanel(){
        document.getElementById("tanchuangwai").style.display = "none";
        p = document.getElementById("tanchuang");
        p.style.display = "block";
        p.style.height = "28px";
        s = setInterval(upPanel,1);
    }
    function goClose(){
        p = document.getElementById("tanchuang");
        h = setInterval(downPanel,1);
    }
    function upPanel(){
        var height = parseInt(p.style.height.replace("px",""));
        height = height + 3;
        p.style.height = height+"px";
        if(height >= 313){
            clearInterval(s);
        }
    }
    function downPanel(){
        var height = parseInt(p.style.height.replace("px",""));
        height = height - 3;
        p.style.height = height+"px";
        if(height <= 29){
            clearInterval(h);
            p.style.display = "none";
            document.getElementById("tanchuangwai").style.display = "block";
        }
    }
    function ajax(){
        var oAjax = null;
        if(window.XMLHttpRequest){
            oAjax = new XMLHttpRequest();
        }else{
            oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        };
         
        oAjax.open('POST', url, true);
        var area = document.getElementById("pArea").value;
        var sel = document.getElementById("pSel").value;
        var name = document.getElementById("pName").value;
        var tel = document.getElementById("pTel").value;
        var url1 = window.location.href;
        var fd = new FormData();
        fd.append('area', area);
        fd.append('sel', sel);
        fd.append('name', name);
        fd.append('tel', tel);
        fd.append('par', par);
        fd.append('url', url1);
        fd.append("img", document.getElementById("img").files[0]);
        oAjax.send(fd);
          
        oAjax.onreadystatechange = function(){ 
            if(oAjax.readyState == 4){  
                if(oAjax.status == 200){   
                    alert(oAjax.responseText) 
                }else{
                    alert("请求错误");
                }
            }
        };
    }
    function sub() {
        var js = document.getElementsByTagName("script");
        for (var i = 0; i < js.length; i++) {
            if (js[i].src.indexOf("panel.js") >= 0) {
                var arraytemp = new Array();
                arraytemp = js[i].src.split('?');
                arraytemp = arraytemp[1].split('=');
                if (arraytemp[0] == 'value') {
                    par = arraytemp[1];
                }
            }
        };
        document.getElementById("par").value = par;
        ajax();
    }
  • 相关阅读:
    macOS下iTerm2+zsh+oh-my-zsh+powerlevel10k打造最强终端
    个别服务器通过公网登录MySQL数据库慢
    Linux永久添加静态路由
    mtr网络工具常用命令
    Fping常用的网络连通性测试技巧
    Linux 7修改网卡名称后配置文件中的默认网关不生效
    Mac TimeMachine备份数据到自建NAS(通过samba共享)
    Mac iTerm2使用lrzsz
    SSH登录服务器慢
    Linux服务器惨遭挖矿
  • 原文地址:https://www.cnblogs.com/wpcnblog/p/5486385.html
Copyright © 2011-2022 走看看