ajax无刷新提交表,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无刷新提交表单和显示相关推荐
- ajax无刷新留言板远吗,php+ajax制作无刷新留言板,phpajax刷新留言板_PHP教程
php+ajax制作无刷新留言板,phpajax刷新留言板 本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图: 数据库连接代码如下: index.php文件代码 ...
- ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如 ...
- from提交ajax,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- ajax异步提交 java_jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- php ajax 点击后刷新当前页面,ajax请求值后返回会刷新页面?
模板 控制器 模型 我用$.post提交表单,如果登录成功直接将信息保存到session,如果失败返回失败原因. 我是在模态框上写的表单,把失败原因显示在模态框上.但是返回后会自动刷新并关闭模态框. ...
- [html] From表单提交时为什么会刷新页面?怎么预防刷新?
[html] From表单提交时为什么会刷新页面?怎么预防刷新? 因为早期网页交互模型只能是浏览器提交数据给服务器,服务器做出响应重新返回一个页面,浏览器加载这个页面进行显示.早期前端没有编程式发送网 ...
- form和ajax同时提交吗,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- html页面ajax提交数据,ajax请求提交form表单
AJAX表单提交以及数据接收 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务 ...
- ajax提交,form表单提交,onsubmit=return checksubmit()提交验证
Ajax提交的两种方式: 一是url参数提交数据, 二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交 一.Url参数提交数据 ...
- Ajax(jQuery封装),表单form提交(Ajax),art-template模板引擎,原生Ajax,XML和JSON,axios,跨域和JSONP,防抖和节流,HTTP协议
目录 服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
最新文章
- 在一台电脑上使用两个github账号
- CVPR 2020录用率十年最低,商汤官宣62篇入选
- 【转】mssql中大小写的区分
- 寄存器(cpu工作原理)
- Codeforces Round #588 (Div. 2) D. Marcin and Training Camp 思维
- historyReverser array reverse
- 论文浅尝 | 探索将预训练语言模型用于事件抽取和事件生成
- 内存泄露和溢出的区别_Java 中的内存溢出和内存泄露是什么?我给你举个有味道的例子?...
- TextView的跑马灯效果(AS开发实战第二章学习笔记)
- Facebook产品更新,官方通知你收到了吗?
- 170609、Nginx配置文件详细说明
- 怎样解决编程语言之间的差异性问题?
- plsql oracle 使用教程
- 达梦数据库导出表格形式(Excel)方式
- 【IoT】创业:一份价值主张画布送给你
- 基于nodejs的excel表格合并工具
- linux磁盘组修复,Linux磁盘坏道的检测及修复
- 微信小程序蓝牙打印(中文乱码已解决)-分包发送(安卓和苹果手机均兼容)
- java o2o 源码_电子商务平台 java 源码 b2b2c o2o
- orange's学习--第七章:l处理退格换行