读书人

不刷新交付表单

发布时间: 2012-11-01 11:11:32 作者: rapoo

不刷新提交表单

<% Response.Charset="gb2312" %><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title></head><script>//@desc    load a page(some html) via xmlhttp,and display on a container//@param   url          the url of the page will load,such as "index.php"//@param   request      request string to be sent,such as "action=1&name=surfchen"//@param   method       POST or GET//@param   container          the container object,the loaded page will display in container.innerHTML//@usage  //         ajaxLoadPage('index.php','action=1&name=surfchen','POST',document.getElementById('my_home'))//         suppose there is a html element of "my_home" id,such as "<span id='my_home'></span>"  //@author  SurfChen <surfchen@gmail.com>//@url     http://www.surfchen.org///@license http://www.gnu.org/licenses/gpl.html GPLfunction ajaxLoadPage(url,request,method,container){    method=method.toUpperCase();    var loading_msg='Loading...';//the text shows on the container on loading.    //var loader=new XMLHttpRequest;//require Cross-Browser XMLHttpRequest    var loader = new ActiveXObject("Microsoft.XMLHTTP");    if (method=='GET')    {        urls=url.split("?");        if (urls[1]=='' || typeof urls[1]=='undefined')        {            url=urls[0]+"?"+request;        }        else        {            url=urls[0]+"?"+urls[1]+"&"+request;        }        request=null;//for GET method,loader should send NULL    }    loader.open(method,url,true);    if (method=="POST")    {        loader.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    }    loader.onreadystatechange=function(){        if (loader.readyState==1)        {            container.innerHTML=loading_msg;        }        if (loader.readyState==4)        {            container.innerHTML=loader.responseText;        }    }    loader.send(request);}//@desc    transform the elements of a form object and their values into request string( such as "action=1&name=surfchen")//@param   form_obj          the form object//@usage   formToRequestString(document.form1)//@notice  this function can not be used to upload a file.if there is a file input element,the func will take it as a textinput.//         as I know,because of the security,in most of the browsers,we can not upload a file via xmlhttp.//         a solution is iframe.//@author  SurfChen <surfchen@gmail.com>//@url     http://www.surfchen.org///@license http://www.gnu.org/licenses/gpl.html GPLfunction formToRequestString(form_obj){    var query_string='';    var and='';    //alert(form_obj.length);    for (i=0;i<form_obj.length ;i++ )    {        e=form_obj[i];        if (e.name!='')        {            if (e.type=='select-one')            {                elementvalue=e.options[e.selectedIndex].value;            }            else if (e.type=='checkbox' || e.type=='radio')            {                if (e.checked==false)                {                    break;                    }                elementvalue=e.value;            }            else            {                elementvalue=e.value;            }            query_string+=and+e.name+'='+element_value.replace(/\&/g,"%26");            and="&"        }    }    return query_string;}//@desc    no refresh submit(ajax) by using ajaxLoadPage and formToRequestString//@param   form_obj          the form object//@param   container          the container object,the loaded page will display in container.innerHTML//@usage   ajaxFormSubmit(document.form1,document.getElementById('my_home'))//@author  SurfChen <surfchen@gmail.com>//@url     http://www.surfchen.org///@license http://www.gnu.org/licenses/gpl.html GPLfunction ajaxFormSubmit(form_obj,container){    ajaxLoadPage(form_obj.getAttributeNode("action").value,formToRequestString(form_obj),form_obj.method,container)}</script><body><form name="form1" method="post" action="bbb.asp" >  <p>    <input type="text" name="t1">  </p>  <p>    <input type="text" name="t2">  </p>  <p>  </p></form><a href=# onclick="javascript:ajaxFormSubmit(document.form1,document.getElementById('my_home'))">aa</a><span id='my_home'></span></body></html><% Response.Charset="gb2312" %>bbb你好<%=request("t1") %>+<%=request("t2") %>-------------另附第一个函数使用方法<a href=# onclick="javascript:ajaxLoadPage('aaa.asp','action=1&name=surfchen','POST',document.getElementById('my_home')) ">aa</a><span id='my_home'></span>--------//下面两行使浏览器不会在本地缓存结果Response.setHeader(“Cache-Control”,”no-cache”);Response.setHeader(“Pragma”,”no-cache”);
?

?

读书人网 >Web前端

热点推荐