Ajax留言本

*{padding:0;margin:0; }li{list-style:none; }body{background:#f9f9f9;font-size:14px; }#box{width:450px;padding:10px;border:1px solid #ccc;background:#f4f4f4;margin:10px auto; }#fill_in{margin-bottom:10px; }#fill_in li{padding:5px 0; }#fill_in .text{width:380px;height:30px;padding:0 10px;border:1px solid #ccc;line-height:30px;font-size:14px;font-family:arial; }#fill_in textarea{width:380px;height:100px;line-height:20px;padding:5px 10px;border:1px solid #ccc;font-size:14px;font-family:arial;overflow:auto;vertical-align:top; }#fill_in .btn{border:none;width:120px;height:30px;border:1px solid #ccc;background:#fff;color:#666;font-size:14px;position:relative;left:42px; }#fill_in .ret{border:none;width:120px;height:30px;border:1px solid #ccc;background:#fff;color:#666;font-size:14px;position:relative;left:42px;margin-left:50px; }#message_text{display:none; }#message_text h2{font-size:14px;padding:6px 0 4px 10px;background:#ddd;border-bottom:1px solid #ccc; }#message_text li{background:#f9f9f9;border-bottom:1px solid #ccc;color:#666;overflow:hidden; }#message_text h3{padding:10px;font-size:14px;line-height:24px; }#message_text p{padding:0 10px 10px;text-indent:28px;line-height:20px; }

varoBtn= null;varoForm= null;varoText= null;varoTextarea= null;vartimer= null;varspeed= 0;varoLi= null

varoH3= null;varoP= null;

window.οnlοad= function()

{

oBtn=document.getElementById("btn");

oBtn.οnclick=getValue;

};functiongetValue()

{

document.getElementById("message_text").style.display= "block";

oForm=document.getElementsByTagName("form")[0];

oText=document.getElementById("text");

oTextarea=document.getElementsByTagName("textarea")[0];

oUl=document.getElementById("message_text").getElementsByTagName("ul")[0];

oForm.οnsubmit= function(){return false; };if( oText.value== "" ||oTextarea.value== "")

{

alert("就二个框,你还不写全了啊?");return;

}

oLi=document.createElement("li");

oH3=document.createElement("h3");

oP=document.createElement("p");

oH3.innerHTML=oText.value;

oP.innerHTML=oTextarea.value;if(oUl.childNodes[0])

{

oUl.insertBefore(oLi,oUl.childNodes[0]);

}else{

oUl.appendChild(oLi);

}

oLi.appendChild(oH3);

oLi.appendChild(oP);

oText.value= "";

oTextarea.value= "";varh=oLi.offsetHeight;

oLi.style.height= ‘0px‘;if(timer)

{

clearInterval(timer);

}

timer=setInterval("goTime("+h+")",35);

goTime(h);

}functiongoTime(target)

{vartop=oLi.offsetHeight;

speed+= 3;

top+=speed;if(top>target)

{

top=target;

speed*= -0.7;

}if(top===target&&Math.abs(speed)< 3)

{

clearInterval(timer);

timer= null;

oLi.style.height=target+ "px";

}

oLi.style.height=top+ "px";

}

请留下您的足迹:

显示留言:

ajax无刷新提交表,Ajax无刷新提交表单和显示相关推荐

  1. ajax无刷新留言板远吗,php+ajax制作无刷新留言板,phpajax刷新留言板_PHP教程

    php+ajax制作无刷新留言板,phpajax刷新留言板 本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图: 数据库连接代码如下: index.php文件代码 ...

  2. ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...

    HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如 ...

  3. from提交ajax,form表单提交与ajax消息传递

    form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...

  4. ajax异步提交 java_jquery ajax异步提交表单数据的方法

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  5. php ajax 点击后刷新当前页面,ajax请求值后返回会刷新页面?

    模板 控制器 模型 我用$.post提交表单,如果登录成功直接将信息保存到session,如果失败返回失败原因. 我是在模态框上写的表单,把失败原因显示在模态框上.但是返回后会自动刷新并关闭模态框. ...

  6. [html] From表单提交时为什么会刷新页面?怎么预防刷新?

    [html] From表单提交时为什么会刷新页面?怎么预防刷新? 因为早期网页交互模型只能是浏览器提交数据给服务器,服务器做出响应重新返回一个页面,浏览器加载这个页面进行显示.早期前端没有编程式发送网 ...

  7. form和ajax同时提交吗,form表单提交与ajax消息传递

    form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...

  8. html页面ajax提交数据,ajax请求提交form表单

    AJAX表单提交以及数据接收 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务 ...

  9. ajax提交,form表单提交,onsubmit=return checksubmit()提交验证

    Ajax提交的两种方式: 一是url参数提交数据, 二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交 一.Url参数提交数据 ...

  10. Ajax(jQuery封装),表单form提交(Ajax),art-template模板引擎,原生Ajax,XML和JSON,axios,跨域和JSONP,防抖和节流,HTTP协议

    目录 服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...

最新文章

  1. 在一台电脑上使用两个github账号
  2. CVPR 2020录用率十年最低,商汤官宣62篇入选
  3. 【转】mssql中大小写的区分
  4. 寄存器(cpu工作原理)
  5. Codeforces Round #588 (Div. 2) D. Marcin and Training Camp 思维
  6. historyReverser array reverse
  7. 论文浅尝 | 探索将预训练语言模型用于事件抽取和事件生成
  8. 内存泄露和溢出的区别_Java 中的内存溢出和内存泄露是什么?我给你举个有味道的例子?...
  9. TextView的跑马灯效果(AS开发实战第二章学习笔记)
  10. Facebook产品更新,官方通知你收到了吗?
  11. 170609、Nginx配置文件详细说明
  12. 怎样解决编程语言之间的差异性问题?
  13. plsql oracle 使用教程
  14. 达梦数据库导出表格形式(Excel)方式
  15. 【IoT】创业:一份价值主张画布送给你
  16. 基于nodejs的excel表格合并工具
  17. linux磁盘组修复,Linux磁盘坏道的检测及修复
  18. 微信小程序蓝牙打印(中文乱码已解决)-分包发送(安卓和苹果手机均兼容)
  19. java o2o 源码_电子商务平台 java 源码 b2b2c o2o
  20. orange's学习--第七章:l处理退格换行

热门文章

  1. 线代中最基础的两种玩法
  2. 安装TensorFlow-gpu的注意点
  3. Matlab之semilogx、semilogx、loglog函数
  4. 《深入剖析Tomcat》源码
  5. Oracle Real Application Clusters (RAC)
  6. cf1042d 树状数组逆序对+离散化
  7. USACO 3.2.6 Sweet Butter 香甜的黄油(最短路)
  8. MSFT_NetAdapter修改网卡名
  9. 浅谈JSONP 的本质工作原理
  10. 《Android开发从零开始》——31.模拟Http请求