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,iVBORw0KGgoAAAANSUhEUgAAAgwAAAHVCAIAAAASPTQiAAAUf0lEQVR4nO3cP24a0RbAYdaUgr2kpfAuIiUlW4jEBl7BKyK59AZiyRL9a9J4A25c+RX8m4E5gHPD5XDn+6oYMMbM5Py4M+DJOwAEJrd+AADkJRIAhEQCgJBIABASCQBCIgFA6NJIPANwU1eNQeQTkXgD4EZEAoCQSAAQEgkAQiIBQEgkAAiJBAAhkQAgJBIAhEQCgJBIABASCQBCIgFAqIVIrObTyWw5dOlkMnDF8W2m81XJczhoOdv99PU/Tz+SwRt17qPEaj4d+BUvelTA2N1/JKJBH0diMx4nu29brZbrGx+YLXd3c5ndg9j/8O4PG/wB8W+x+daBhF3yoLb3vb3twd3s7uIahQSacf+RuHgi7wZn9wX6crabkgcXR+NzO11PvQTf3lX0av348vUl3Z946uecXCVFd354+xO/I8BGC5EYXkycW0nslwnr74v+HfywE5HYzeT5atk5EnbYss3lQ6uC2XJ4sXB8V/GPPzxwdcmyyLEn4EATkdgNwTNLic0MPIzEugbdF9Ylkdg/hINbBJO9d/Hui4OVxcGXn47E4O8wna9O/qYArURiQDhIB1+6z+fTzo1PnTHuRGKbpq7lbDKdz7vfvz2itX9AvTPtQ5HY2M/ufxWJ1Xw6mcyWR5GYHv/2lhXA2/1HYj9Vp/Phs8890/nq6LXz9qV/d5KfmJGHjRl6FX60Vtn/4G2PDrtw9MVydvQYDyNxUm/ZtLlg+7svd0ns3VP3lI1KAG9v9x+Jt7fTB4f+vf1KIn6D0CYS830h3noB6L7jKIrE22o+jQ43DT+kcKhvm7V7oo7PynTXPlYSwE5rkTh1UuLwCM9pZybywcvu/q33Q3h9RKq73tmP/V47Dh7pwZmPo0j0LrgwErPto+p880A3APbajMSZU8aHXw8ezLksEm/9ZUFgOes/qM4bb08cburcaxCJ/hukzkRiXYn9G4W3y5XNHS9nTmADR9qMxLArRWJ/D92Z3Xlxvlsr9E8TDC0DDg437b7rMBL9hxisjA4OVh285bb7A8UBCLQZictWEqd9KhIDN+gd5x88etS7auAsdqcmwYnrT60keu8RHvoEYf/mDj0Bb61GYtgVVxLH1w98Zm57mrpzMGl/vmIoEm+r+bR76uN45XB0SnxQvwTbY127p+rgN/XuJmCvnUisx9oNzkkMXj10jOits8pY7d67dCoSw7/A+qvde6d2x7NOP6KBHASsJICdBiLReyfqYCSGj+if8beRWM6mwx+NC+45+LMc4S/QT9iZv1a1DUjvmNfJ2597toFxaSASvb8V3o1Efyh25t+ZwzNlh5s+6+yJ6/7jP3yj1AV377Q08NeaiAQA1yESAIREAoDQ3UfifwAUEAkAQiIBQEgkAAiJBAAhkQAgJBIAhEQCgJBIABASCQBCo4/E4uvpP4/95dvThbf8uji466dvXyaTyZdvi29fzt52f//7HwhwcyLxNRrM2xn/2Zn9tG/Cl2+Lp8XT0/ayr4vtD/y6OB+dU0EBqEMkLl5JXOrp25fNt+160E3R/kKA9ETiOiuJL9+etvnZ/nMdhn1Cdj/9/CpiszhxJAqoTSQuWkk8HZ9WiG68u+nXRecbj6/5DJEAbmT0kfhLm7Fdetjo0yfDAaoaeySevn3prhV2J5R35w96r96fvn3pLy2+LroXbv378xwAtzHySGzG+dfFUCQOVwvbw0XbMqz/uS1C50V/7zxH541Nh1dZSQDZjTwS+2n/7TAS3772X/T3P8bQC8jhJxw++dmLE6fNRQK4rdFHYnPEabH42o/E18VieyTqf/1FRPeC3gJhN+4/uZI4HwknroEbEYmNwXMS+2ufusn438D7YxdfJ1++LZ72kbh8JXH+cJNIADcy6kj8zWeeu98THQyK1wd/uZIAuJFRRwKA00QCgJBIABASCQBCIgFASCQACIkEAKHGI/EMQIHGI3HVRwnQPJEAICQSAIREAoCQSAAQEgkAQiIBQEgkAAiJBAAhkQAgJBIAhEQCgJBIABASCQBCIgFASCQACIkEACGR+PPr+8Pez9+XXQUwCmOPxO+fD4e2MThxFcBIiMT3X382/94sHLYXnLgKYCTGHomeTQqG1gsnrgJol0jsaQTAAZHY2pyCGOrAiasAmiYS7+/vuwwMnXM4cRVA60Ri90bXgYXCiasAxmDskTjxtiXvaAIYdyT6n5bbWFfhxFUAoyESIgEQGnckADhJJAAIiQQAIZEAICQSAIREAoCQSAAQEgkAQiIBQEgkAAiJBAAhkQAgJBIAhEQCgJBIABASCQBCIgFASCQACIkEACGRACAkEgCEROIqfv982Pr5+4LLAXISiX/v9899AX7/fHj4/uvPycsB0hKJK/vz6/tgDaLLATIRiSv78+v74JGl6HKATETiuiwkgLsmEtf059f3wTPU0eUAyYjE9UQnp520Bu6GSFzJ75/Db3ONLgfISCSuwWEmoBEi8e85zAQ0QyT+tc6Hqnsfro4uB0hMJAAIiQQAIZEAICQSAIREAoCQSAAQEgkAQiIBQEgkAAiJBAAhkQAgJBIAhEQCgJBIABASCQBCjUfiGYACjUfiqo8SoHkiAUBIJAAIiQQAIZEAICQSAIREAoCQSAAQEgkAQiIBQEgkAAiJBAAhkQAgJBIAhEQCgJBIABASCQBCIvH+++fDxvdffy6+CmAMxh6JfQaOSnDiKoCRGHskNtZBGCzBiasAWicS7+/vIgEwTCTe399FAmCYSLy/v4sEwDCReH9/FwmAYSLx/v4uEgDDROL9/V0kAIaNPRJ/fn1/OPTz97mrAEZCJEQCIDT2SABwgkgAEBIJAEIiAUBIJAAIiQQAIZEAICQSAIREAoCQSAAQEgkAQiIBQEgkAAiJBAAhkQAgJBIAhEQCgJBIABASCQBCIgFASCQACInElfz++fDw8PDz96WXA2QkEv/cn1/fH7a6MYguB8hLJK7m98/hGESXA+QjElcjEsD9E4mrEQng/onE1YgEcP9E4mpEArh/InE1IgHcP5G4GpEA7p9IXI1IAPdPJP657ofmup+diy4HyEskAAiJBAAhkQAgJBIAhEQCgJBIABASCQBCIgFASCQACIkEACGRACAkEgCERAKAkEgAEBIJAEKNR+IZgAKNRwKA6xEJAEIiAUBIJAAIiQQAIZEocpv3IgD8rb+YcleNQaSdSHwA3AmRqE0kgDsiErWJBHBHRKI2kQDuiEjUJhLAHRGJ2kQCuCMiUZtIAHdEJGoTCeCOiERtIgHckbFGYjWfTmbLgUun89WJb4mvvZhIAHdkrJFYznoDf/NlHInVfDoZ9tluiARwR0Ycic5CYhuHIBLBGmI5mwysRi54+m690QEuNcJILGeHK4HhZcI6C6v5dDKZLQ+qcv7Y02o+HV5liARwR0YYiXUo1vN7OZvMlvsVweFKopeC5WwymcyW8fjvEQmgBeOMxHZZsJpPp7PZPgQnT1y/bTpRePJaJIA7MspIrObT9crh4BhSGImDI1Q9nz0rIRLAHRljJHYHkTaNCN65tD4RcboFh5W57Om79UYHuNQYI7GZ7gOj/8RKQiSAMRprJHbLh0sPN302Ek5cAy0YZyS2b1Q6fCfrPzwnIRJAC0YYicO/yBEWYH8jh5uAkRphJG5MJIA7IhK1iQRwR0SiNpEA7ohI1CYSwB0RidpEArgjIlGbSAB3RCRqEwngjohEbSIB3BGRqE0kgDsiErU9A9yVv5hyV41BpJFIALRNJAAIiQQAIZEAICQSAIREAoCQSAAQEgkAQiIBQEgkAAiJRJGaH6YH6rv1jLm9Z5Eo8ewP/EG7ks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOhqMxGo+nc5XF9xwOZtMJrPlXzxrOyIBDROJt3FFYjWfTs66rC+dp+/WuzFwLSLx1kYklrPLBn+nHstZZw2x/+LiRUjn6bv1bgxci0i8NROJ7mg/+PJg8K+XE9P5avPPXR1OrSJW8+nwtSIBDROJtxYjsZpPeycaOpHoVGF7QuJwSXHiQJVIwMiIxFuDkThaEwwcQlrOujfppuMvnr5b78bAtYjEW3ORWM2nk+l81X3l34vE5tz1cRL63fjM03fr3Ri4FpF4ayoS6wD0TkdPZst9JNbnt6fT8C1O09lsOliQk0/frXdj4FpE4q2ZSAy/e3U1n05m8+MT10MZCM9HnHv6br0bA9ciEm/NROLEfB94d9OnI+HENYyRSLyNNBKf/hydSMAYicRby5HYf8Sud6XDTcCFROKtjUjckEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+fOkSiiEhAw5LPnzpEoohIQMOSz586RKKISEDDks+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 & ...

随机推荐

USACO3.44Raucous Rockers
USACO挂了一小时..我坚持不懈的等..终于打开了把3章最后一题交了可以安心的睡去了之前题意没看清楚不知道要有序写了一状压结果TLE了再优化也TLE 后来想写状态转移时发现它必须有 ...
UVA_393_Doors_(计算几何基础+最短路)
描述 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=5&page ...
Azure 媒体服务的 RTMP 支持和实时编码器
Cenk Dingiloglu Azure 媒体服务高级项目经理直播流媒体目前已在公共预览版中提供,其中一项受支持的输入协议便是 RTMP.RTMP 是用于输入和分发包括直播流媒体在内的丰富媒体的一 ...
约瑟夫环的java实现
转自:http://www.cnblogs.com/timeng/p/3335162.html 约瑟夫环:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到 ...
DataSet用法详细
转自:http://www.cnblogs.com/zeroone/archive/2012/06/08/2541299.html DataSet用法详细一.特点介绍 1.处理脱机数据,在多层应用程 ...
大白书 209 remember the word
F - Remember the Word Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Sub ...
devi into python 笔记（四）python的类
import 与 from ... import ...: #types只是一个包,FunctionType只是这个包里的一个函数.这里用它来演示 import types #如果要用Function ...
Java之Arrays.asList陷阱
Java.Util.Arrays可以将数组转换为List,具体的定义如下: @SafeVarargs public static <T> List<T> asList(T... ...
Keepass 2.x 之同步与触发器
同步之前用的 Keepass 1.x, 要实现工作电脑和个人电脑上的数据库文件同步,使用的是第三方的网盘同步.但有个问题就是,个人不习惯设置同步网盘开机启动,所以有时候工作电脑上的改动还没有同步上传 ...
[LeetCode] 76. Minimum Window Substring 解题思路
Given a string S and a string T, find the minimum window in S which will contain all the characters ...

Ajax无刷新提交表单和显示

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

随机推荐

热门专题