不刷新提交表单

lionelf

浏览: 81543 次
性别:
来自: 北京

最近访客更多访客>>

yuzhaocai

wangkooler

wdne63956

William丶张

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Gmail ASP JavaScript PHP Ajax

<% 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 GPL

function 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 text

input.

//         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 GPL

function 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 GPL

function 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”);

分享到：