document.writeln("<div id=\"tanchuangwai\" class=\"tanchuangwai\" style=\"z-index:999;overflow:hidden;font-family:微软雅黑; background:#6cadde; width: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; width: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; width:236px; background:#ffffff; right:0; bottom:0px; display:none;\">");
document.writeln(" <div style=\"background:#6cadde; width:236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0;\">");
document.writeln(" <h3 style=\" height:29px; width: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=\" width: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:微软雅黑; width: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=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width: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; width: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=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width: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; width:149px;\">");
document.writeln(" </div>");
document.writeln(" <div style=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width: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; width:149px;\">");
document.writeln(" </div>");
document.writeln(" <input style=\" font-family:微软雅黑; background:#6cadde; border-radius:5px; width: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; width: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; width: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; width:236px; background:#ffffff; right:0; bottom:0px; display:none;\">");
document.writeln(" <div style=\"background:#6cadde; width:236px; height:29px; line-height:29px; float:left; border-radius:3px 3px 0 0;\">");
document.writeln(" <h3 style=\" height:29px; width: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=\" width: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:微软雅黑; width: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=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width: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; width: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=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width: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; width:149px;\">");
document.writeln(" </div>");
document.writeln(" <div style=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width: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; width:149px;\">");
document.writeln(" </div>");
document.writeln(" <div style=\"width:192px; border:1px solid #cccccc; height:20px; line-height:20px; float:left; margin:0 0 10px 0;\"><span style=\" width: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='width:150px;height:20px;' accept='.jpg,.bmp'/>");
document.writeln(" </div>");
document.writeln(" <input style=\" font-family:微软雅黑; background:#6cadde; border-radius:5px; width: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();
}

一个问题提交的实例(js原生动画,原生ajax,js引用加参数)的更多相关文章

  1. js用img代替ajax js心跳 向服务器定时传送参数 主要计算用户在线时长

    html: <!doctype html><html><head><meta charset="utf-8"><title&g ...

  2. 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  3. vue.js之动画篇

    本文引入类库的方式均采用CND的方式,可直接复制代码到编辑器中学习和测试 不使用动画切换元素 <div id="app"> <input type="b ...

  4. Ajax_简介: 异步的 JS 和 XML_原生写 ajax 分析其原理_jquery_ajax_art-template

    AJAX Asynchronous JavaScript And XML 通过 AJAX 可以在 浏览器中向 服务器 发送异步请求 一种 使用现有标准的 新方法,而非新语言 XML  可扩展标记语言 ...

  5. 关于购物车添加按钮的动画(vue.js)

    来自:https://segmentfault.com/a/1190000009294321 (侵删) git 源码地址  https://github.com/ustbhuangyi/vue-sel ...

  6. Bodymovin:Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

    转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...

  7. 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

    前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...

  8. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  9. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

随机推荐

  1. mark资料-selenium断言的分类

    操作(action).辅助(accessors)和断言(assertion): 操作action: 模拟用户与 Web 应用程序的交互. 辅助accessors: 这是辅助工具.用于检查应用程序的状态 ...

  2. eclipse ERROR: Unable to add module to the current project as it is not of ...

    原因: Workspace下放了个POM文件,造成了M2eclipse插件的误解. 解决方案: 删掉就OK了.

  3. Apache Flex + Adobe Flash Builder环境配置

    在开始学习Flex之前,需要配置开发环境.Apache Flex SDK包含了你开发所需要的东西,当然除了集成开发环境(Integrated Development Environment,IDE). ...

  4. yii2后台上传图片,前台也能显示 的方法

    备注:::很low    高端人士 勿入  支持 吐槽  有你们的吐槽才有我的进步 还不会yii上传的  go   out    (哈哈,开玩笑)

  5. PHP部分---字符串处理(文中例子不断更新);

    字符串处理: 1.去除   ltrim(),rtrim()函数  trim()函数 trim(字符串名)函数:--去掉字符串两边的空格 ltrim(字符串名,“特殊字符”);--去除字符串左边的空格和 ...

  6. hdu4725 拆点+最短路

    题意:有 n 个点,每个点有它所在的层数,最多有 n 层,相邻两层之间的点可以互相到达,消耗 c (但同一层并不能直接到达),然后还有一些额外的路径,可以在两点间互相到达,并且消耗一定费用.问 1 点 ...

  7. 越狱Season 1- Episode 22: Flight

    Season 1, Episode 22: Flight -Franklin: You know you got a couple of foxes in your henhouse, right? ...

  8. 黑马程序员——JAVA基础之System,Runtime,Date,Calendar,Math

    ------- android培训.java培训.期待与您交流! ---------- System:  类中的方法和属性都是静态的. out:  标准输出,默认是控制台. in:标准输入,默认是键盘 ...

  9. Machine and Deep Learning with Python

    Machine and Deep Learning with Python Education Tutorials and courses Supervised learning superstiti ...

  10. Qt QTreeWidget节点的添加+双击响应+删除详解(转)

    QTreeWidget是实现树形结构的类,在很多软件中都可以看到类似树形结构的界面. 我做的一个示例如下图,用来处理图像,最顶层节点是图像的路径名,子节点是图像的各个波段,双击各个波段会显示图像各波段 ...