Ajax无刷新提交表单和显示

ajax无刷新表单提交：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Ajax留言本</title>

<style type="text/css">

* { 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; }

</style>

<script type="text/javascript">

var oBtn = null;

var oForm = null;

var oText = null;

var oTextarea = null;

var timer = null;

var speed = 0;

var oLi = null

var oH3 = null;

var oP = null;

window.onload = function()

{

oBtn = document.getElementById("btn");

oBtn.onclick = getValue;

};

function getValue()

{

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.onsubmit = 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 = "";

var h = oLi.offsetHeight;

oLi.style.height = '0px';

if(timer)

{

clearInterval(timer);

}

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

goTime(h);

}

function goTime(target)

{

var top = 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";

}

</script>

</head>

<body>

<div id="box">

        <h3>请留下您的足迹:</h3>

    <div id="message_text">

        <h2>显示留言:</h2>

        <ul></ul>

    </div> 

    <ul id="fill_in">

        <form>

            <li>姓名：<input id="text" type="text" class="text" /></li>

            <li>内容：<textarea id="content" style="width:300px; height:100px"></textarea></li>

            <li><input id="btn" type="submit" value="提交" class="btn" /><input id="ret" type="reset" value="重写" class="ret" /></li>

        </form>

    </ul> 

</div>

</body>

</html>

实例截图：

aaarticlea/png;base64,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iEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQGNeXl52/04+f+oQiSIiAS15fX3973//u/sy+fypQySKiAQ0LPn8qUMkiogEtGF3lMnhpgMiUUQkoAG7o0wONx0TiSIiAQ1LPn/qEIkiIgF37fgok8NNB0SiiEjA/dodXPrz589//vOfD4ebhohEEZGAhiWfP3WIRBGRgIYlnz91iESRZ6Bpt54xt/csEgBERAKAkEgAEBIJAEIiAUBIJAAIiQQAIZEAICQSAIREAoCQSBSp+ecBxuzW23nYrZ+Vsbj1dh67Z5Eo8ewP/F1f2n3A1q8g7dYfD5EoYkxUkHYfsPUrSLv1x0MkihgTFaTdB2z9CtJu/fEQiSLGRAVp9wFbv4K0W388RKKIMVFB2n3A1q8g7dYfD5EoYkxUkHYfsPUrSLv1x0MkihgTFaTdB2z9CtJu/fEQiSLGRAVp9wFbv4K0W388RKKIMVFB2n0g1dZ/WTycsXi59WP8G2m3/niIRJFUY+Lj42WxmwRDM+PH42vwXakHSNp9INnW73l9/DG8UV8ff5yrSbin3ELarT8eIlEk2ZjoR6I/I14ff4T/9XNnIu0+kGfrn19G7Ib/qf1g7fwtakq79cdDJIokHRM/Hl/jlcRFLyUzvZhMuw/k2frHTq0kfjy+niqBSNAjEkWSjYnPriReH390bpRrOOyl3Qdybf1z8e/vDqfWHqkWlWm3/niIRJFcY+LjZfGweFy/hDx/TuJl8fDw4/HltXPZ6+OPZCPi4yPxmMi19ftrh1NfDV2QVtqtPx4iUSTVmFh34aLFwLoGjwdLh5fFw4/Hx0WmQ00fH4nHRKqt/7mVxMsi2UYOpd364yESRfKMie2AX7ycHheLl4/Xxx/bCdGdFfsXl8kmSNp9IM/W//j43EriTFAyrTHSbv3xEIkiucbE8YmI4LL+1T8eXz+65cgm7T6Qa+t/7pxEKNkrhLxbfzxEokiuMdEJwv4k9OHbno6+aTtcMr187Em7DyTb+j3BSYfzSwiR4IBIFEk2JnaR6JyBPrOS2E+NVKOhK+0+kGrrn/+oxGUb+Mz+Ul3arT8eIlEk1ZjY/QdfHzp6WYci+k+/rUPvnETKBUXafSDZ1u/527cvpftcZdqtPx4iUSTPmNi8kNx8jG773/z46MLiZXNZ9Lpy+4o0z8Ii7T6QZutf+PnIaKP2FyGpEpF464+HSBRJMyZalnYfsPUrSLv1x0MkihgTFaTdB2z9CtJu/fEQiSLGRAVp9wFbv4K0W388RKKIMVFB2n3A1q8g7dYfD5EoYkxUkHYfsPUrSLv1x0MkihgTFaTdB2z9CtJu/fEQiSLGRAVp9wFbv4K0W388RKLIM1XcejsPu/WzMha33s5j9ywSAEREAoCQSAAQEgkAQiIBQEgkAAiJBAAhkQAgJBIAhEQCgJBIABASCQBCIgFASCQACIkEACGRACAkEgCERAKAkEgAEBIJAEIiAUBIJAAIiQQAIZEAICQSAITuIBIA3NBVYxC5NBIAjJBIABASCQBCIgFASCQACIkEACGRACAkEgCERAKAkEgAEBIJAEIiAUBIJAAIiQQAIZEAICQSAIREAoCQSAAQEgkAQiIBQEgkAAj9H9U/5LmONa1kAAAAAElFTkSuQmCC" alt="" />

Ajax无刷新提交表单和显示的更多相关文章

不使用ajax,无刷新提交表单
<form action="form_action.asp" method="get" onsubmit"check_form()" ...
iframe实现面页无刷新提交表单
一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回一个xml或json数据,要 ...
HTML无刷新提交表单
通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法,是利用iframe框架实现的.现在整理出来分享给大家. 第一种: (html页面) <!DO ...
使用iframe实现页面无刷新提交表单
iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看. ...
Jquery Ajax自定义无刷新提交表单Form
Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法如Form ...
无刷新提交表单(非Ajax实现)
HTML代码: <iframe id="fra" name="frm" style="display: none;"></ ...
js无刷新提交表单
$("#form1").attr("target", "frameFile"); $("#form1").submit( ...
ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单
有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改.. ...
ajax.BeginForm异步提交表单并显示更新数据
view代码:  2 <div class="profile_box" id="basicInfo"> 3 & ...

随机推荐

php获取html checkbox的值。
一个小错误,搞了好久: <label><input class="short" type="checkbox" id="is_onl ...
linux操作Oracle导入导出dmp数据命令
--清空该表数据 :非索引清空TRUNCATE TABLE GE_INTERFACE_MESSAGE; --数据库导出指定导出某个用户的所有数据包括表索引序列存储过程函数等exp CX ...
利用if else 求房贷
static void Main(string[] args) { while (true) //主要就是公式的运用和if else 的嵌套 ...
HDOJ -- 4632 区间DP
Palindrome subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65535 K (Java/ ...
Count the string -- HDOJ 3336
Count the string Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
ubuntu14.04 swap not avalible交换分区不能使用
系统最近特别卡,打开＂System monitor＂中的resource发现＂swap not avalibe＂．原来系统每交换分区．我的是笔记本电脑,存储空间有限．首先我下载磁盘分区工具Gpart ...
Qt 对象间的父子关系
C++中只要有一个new就必须要有一个delete与之对应但是Qt中的对象之间有特殊的关系 Qt 对象间的父子关系每一个对象都保存有它所有子对象的指针每一个对象都有一个指向其父对象的指针 par ...
jquery获取节点的时候获取包含自己在内的HTML标签
jquery获取某个标签的html()方法的时候总是只能获取内部的如果获取包含自身的HTML代码呢? 用.prop("outerHTML")方法获取 <div id=&qu ...
(3/18)重学Standford_iOS7开发_Objective-C_课程笔记
第三课: 本节课主要是游戏实现的demo,因此我将把课程中简单的几个编程技巧提取出来,重点介绍如何自己实现作业中的要求. 纸牌游戏实现: ①游戏的进行是模型的一部分(理解什么是模型:Model = W ...
iOS socket小结01
一.网络各个协议:TCP/IP.SOCKET.HTTP等网络七层由下往上分别为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 其中物理层.数据链路层和网络层通常被称作媒体层,是网络工程 ...

Ajax无刷新提交表单和显示

Ajax无刷新提交表单和显示的更多相关文章

随机推荐

热门专题