ASP+ajax无刷新提交表单演示代码

编辑： 点击量： 278
ASP+ajax无刷新提交表单演示代码

oneblog.asp表单填写页面:

<script type="text/javascript">
<!--
//将用户输入异步提交到服务器
function ajaxSubmit(){
    //获取用户输入
    var title=document.forms[0].title.value;
    var username=document.forms[0].username.value;
 var tel=document.forms[0].tel.value;
 var www=document.forms[0].www.value;
 var youremail=document.forms[0].youremail.value;
    var comment=document.forms[0].comment.value;

    //创建XMLHttpRequest对象
    var xmlhttp;
    try{
        xmlhttp=new XMLHttpRequest();
    }catch(e){
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  
    }
    //创建请求结果处理程序
    xmlhttp.onreadystatechange=function(){
        if (4==xmlhttp.readyState){
  //alert(xmlhttp.status);

            if (200==xmlhttp.status){
                var commenttime=xmlhttp.responseText;
   // window.location.reload();
   //document.getElementsByTagName("body")[0];
   document.body.scrollTop=0;

               // addToList(commenttime);
     //alert(xmlhttp.status);错误提示例如404、505
    
            }else{
      //alert(xmlhttp.status);错误提示例如404、505
               alert("error");
            }
        }
    }
    //打开连接，true表示异步提交
    xmlhttp.open("post", "ajaxadd.asp", true);
    //当方法为post时需要如下设置http头
    xmlhttp.setRequestHeader(Content-type,application/x-www-form-urlencoded;charset=utf-8);
    //发送数据
    xmlhttp.send("title="+escape(title)+"&username="+escape(username)+"&tel="+escape(tel)+"&www="+escape(www)+"&youremail="+escape(youremail)+"&comment="+escape(comment));
}

//将用户输入显示到页面
/*function addToList(commenttime){
    //获取留言列表div容器
    var msg=document.getElementById("msgList");
    //创建dl标记及其子标记
    var dl=document.createElement("dl");
    var dt=document.createElement("dt");
    var div=document.createElement("div");
    var div2=document.createElement("div");
 var divtel=document.createElement("div");
 var divwww=document.createElement("div");
 var divyouremail=document.createElement("div");
    //将结点插入到相应的位置
    msg.insertBefore(dl,msg.firstChild);
    dl.appendChild(dt);
    dl.appendChild(div);
    dl.appendChild(div2);
  dl.appendChild(divtel);
   dl.appendChild(divwww);
    dl.appendChild(divyouremail);
    //填充留言内容
    dt.innerHTML="标题："+document.forms[0].title.value;
    div.innerHTML="用户名："+document.forms[0].username.value+"  日期："+commenttime;
    div2.innerHTML=document.forms[0].comment.value;
 divtel.innerHTML="电话："+document.forms[0].tel.value;
 divwww.innerHTML="网址："+document.forms[0].www.value;
 divyouremail.innerHTML="EMAIL"+document.forms[0].youremail.value;
    //清空用户输入框
    document.forms[0].title.value="";
    document.forms[0].username.value="";
    document.forms[0].comment.value="";
  document.forms[0].tel.value="";
  document.forms[0].www.value="";
  document.forms[0].youremail.value="";
}*/
//-->
</script>

<!--递交数据给出弹窗提示-->
<script type="text/javascript">
 
/* Overriding Javascripts Confirm Dialog */

// NOTE; A callback must be passed. It is executed on "cotinue".
//  This differs from the standard confirm() function, which returns
//   only true or false!

// If the callback is a string, it will be considered a "URL", and
//  followed.

// If the callback is a function, it will be executed.


function confirm(msg,callback) {
  $(#confirm)
    .jqmShow()
    .find(p.jqmConfirmMsg)
      .html(msg)
    .end()
    .find(:submit:visible)
      .click(function(){
        if(this.value == yes)
          (typeof callback == string) ?
            window.location.href = callback :
            callback(count);
        $(#confirm).jqmHide();
  
 
      });
}


function callback(count) {  
       window.setTimeout(function(){  
         count--;  
          if(count > 0) {  
             $(#num).attr(innerHTML, count);  
              callback(count);
          } else {  
                location.href="http://blog.163.com/yanglu_168/blog/static/130692931201062771049651/bloglist.asp";  
           }
     
        }, 1000); 
 }; 
              

$().ready(function() {
  $(#confirm).jqm({overlay: 88, modal: true, trigger: false});
 
  // trigger a confirm whenever links of class alert are pressed.
  $(a.confirm).click(function() {
    confirm(本页10秒后即将自动跳转到: 中盛博客列表页!,callback(10));
    return false;
  });
});
 

</script>

<form name="theForm"  id="theForm" method="post">
   <!--  <input name="ip" type="hidden" id="ip"  size="25" value="<%=ip%>" maxlength="100">-->
    <input name="title" type="hidden" id="title" readonly="0" size="25" value="<%=rs("title")%>" maxlength="100">
  
   
    <div >
    <div  >姓     名:     <input type="text" name="username" id="username" value="<%=username%>"  size="25" onBlur="if(this.value.replace(/^ +| +$/g,)==)alert(姓名必填!)"/> (* 必填)</div>
    <div  >电       话:     <input type="text" name="tel" id="tel" value="<%=tel%>"  onKeyPress="javascript:KeyPress(this);" onKeyUp="value=value.replace(/[^d.]/g,)" size="25"/> (* 只允许输入数字)</div>
   </div>
   <div >
    <div  >E-mail:     <input type="text" name="youremail" id="email" value="<%=youremail%>"  size="25"/></div>
    <div  >网       址:     <input type="text" name="www" id="www" value="<%=www%>"  size="25"/></div>
   </div>
   <div >
    <div >内容：</div>
    <div > <textarea   name="comment" rows="8" id="comment" style="WIDTH: 330;" onKeyDown="textCounter(this.form.comment,this.form.remLen,99);"   onKeyUp="textCounter(this.theForm.comment.form.remLen,99);" onPropertyChange="TxtMaxlength(100)"><%=comment%></textarea>  还可输入 <input readonly="0" name=ModCou size=4 value=100 >个字符</div>
    
    <div >
     
<!-- >  --->
    <!--<a href="http://blog.163.com/yanglu_168/blog/static/130692931201062771049651/" on ><a  href="http://blog.163.com/yanglu_168/blog/static/130692931201062771049651/#" id="submit"  ><img src="http://upload.server110.com/image/20140421/2335332X2-0.gif"/></a><!--</a>-->
     <!-- Confirm Dialog -->
     <!--<a href="http://blog.163.com/yanglu_168/blog/static/130692931201062771049651/#" >提交信息</a>-->
     <a href="http://blog.163.com/yanglu_168/blog/static/130692931201062771049651/#" ><input align="left" onClick="ajaxSubmit()" type="submit" name="submitSaveEdit" id="submitSaveEdit" value=""/></a>
<div id="confirm">
<div id="ex3b" >
<span ><img src="http://upload.server110.com/image/20140421/2335336159-1.png"/></span>
  
  <div class="jqmConfirmTitle clearfix">
    <h1><span>恭喜！您的评论已发表成功...</span></h1><a href="http://blog.163.com/yanglu_168/blog/static/130692931201062771049651/#" ><em>Close</em></a>
    </div>
  <div >
  <p ></p>
 当前还剩<span id="num">10</span>秒
  <!--<p>要继续吗?</p>-->
  </div>
  <!--<input type="submit" value="否" />
  <input type="submit" value="是" />-->
  </p>
</div>
</div>
   
   <a href="http://blog.163.com/yanglu_168/blog/static/130692931201062771049651/#"  ><input align="left" type="reset" name="resetEdit" id="resetEdit" value=""/></a>
    <!--<input align="left" type="reset" name="reset" id="reset" style="background:url(images/reset.gif) no-repeat; width:66px; height:22px; border-style:none;" value=""/>-->
    
    </div>
   </div>
   
 </form>

 

blogcomment.asp异步数据提交处理页面：

<!--#include file="../Include/NoSqlHack.asp" -->
<!--#include file="../Include/Const.asp" -->
<!--#include file="../Include/ConnSiteData.asp" -->
<%
Dim conn,rs
Dim connstr
Dim sqlCmd

创建数据库连接对象并打开
set conn=server.createobject("adodb.connection")
connstr="Provider=Microsoft.jet.oledb.4.0;data source=" & server.mappath("GuestBook.mdb")
conn.open connstr

将提交的数据加入数据库
sqlCmd="insert into data(title,author,content) values(" & request.form("title") & "," & request.form("author") & "," & request.form("content") & ")"
conn.execute(sqlCmd)

返回服务器时间
Response.write(Date)
%>

  <%
   dim title,tel,comment,commenttime,ip,www,youremail,username
      dim Action,rsRepeat
       action=request.QueryString("action")
      if action="blogcomment" then 保存编辑产品信息
    if Request.Form("title")="" then
     response.end
    response.Redirect "oneblog.asp?id="&id
    else
   
          title=Request.Form("title")
    tel=Request.Form("tel")
    comment=Request.Form("comment")
    www=Request.Form("www")
    username=Request.Form("username")
    youremail=Request.Form("youremail")
    ip=request.ServerVariables("REMOTE_ADDR")
    commenttime=now()
 
   Set rs = Server.CreateObject ("ADODB.Recordset")
   sql = "select * from blogcomment"
   rs.Open sql,Conn,1,3
   
   rs.addnew
   rs("title")=title
   rs("tel")=tel
   rs("comment")=comment
   rs("ip")=ip
   rs("youremail")=youremail
   rs("www")=www
   rs("username")=username
   rs("commenttime")=commenttime
   rs.update
     end if
     end if
      rs.close
        conn.close
     set rs=nothing
     set conn=nothing
    %>

内容的评论 3

王皓

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

王皓

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

王皓

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

发表评论

提交评论
Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros