正文

Ajax无刷新提交表单和显示

IP云
IP云V管理员/3 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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="" />

相关阅读

目录[+]