首页  > 计算机 >

发布三个ajax相关的函数,包括无刷新提交表单等

本文按署名·非商业用途·保持一致授权
作者:  ,发表于2005年12月25日18时59分 

几个月前,因为项目需求,我写了下面的三个ajax相关的函数。发布出来和大家分享。
第一个是用来无刷新加载一段HTML
第二个是把表单数据转换成一串请求字符串
第三个是结合函数一和函数二的无刷新提交表单实现。

还有一点要提到的是,无刷新表单提交,还不能对文件上传进行处理,这个主要是因为浏览器的安全设置。目前无刷新的上传,一般是用iframe来实现的。关于这个,我们在google里搜索能找到很多

网上虽然已经有很多优秀的ajax的类和函数了,但是或许我这几个函数对大家还有点用处,于是我就发布出来了。
可以在这里下载。

//@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
	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')
			{
				element_value=e.options[e.selectedIndex].value;
			}
			else if (e.type=='checkbox' || e.type=='radio')
			{
				if (e.checked==false)
				{
					break;	
				}
				element_value=e.value;
			}
			else
			{
				element_value=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)
}


24个评论

  1. Think·Easy » Blog Archive » [留言]总结下前几天贴的几个问题:

    [...] 2 关于Ajax中Form元素的拼接,surfchen同学提供了一个不错的函数,为了方便查找copy到这里。 [...]

  2. 马国庆:

    很不错哦,

  3. sfdfdsfsd:

    fdaadfsd

  4. sfdfdsfsd:

    dsafdsdfdffd

  5. guwl:

    abcdefg烦烦

  6. guwl:

    慢慢慢

  7. guwl:

    在晃是

  8. auzn:

    好,不错

  9. yz:

    楼主做个例子,打个包吧?让我们这些新手也能顺利地学习学习。谢谢。

  10. 蓝色多瑙河:

    表单中select元素如果是multiple怎么解决呢?

  11. 7thpark:

    不太理解怎么用,没有学过js呵呵,可以这样用吗?

    user

    submit

    loading一下之后没有显示呢

  12. SurfChen:

    to 蓝色多瑙河:
    我更新了代码,可以支持multiple了。这里可以下载

  13. ZORRO:

    感谢

  14. 小寒:

    无刷新表单不通过ifame就不能实现吗?

  15. SurfChen:

    不用通过iframe

  16. per la pace:

    per la pace

    发布三个ajax相关的函数,包括无刷新提交表单等

  17. lollipop:

    thanks 谢

  18. 海南菜:

    能不能给个使用这三个表单的例子。。能发份到我邮箱吗?

    谢谢

    QQ:63683984(验证:AJAX实例)

  19. sss:

    试试

  20. sss:

    怎么自己不用?

  21. test:

    test this one
    这是无刷新吗??

  22. wrw:

    好东西哦

  23. 我来世医学影像:

    合理咯

  24. 22:

    额外我

发表评论

  本站文章若无注明,则以署名·非商业用途·保持一致授权
  桂ICP备05004302号 感谢WordPress提供本程序 本模板下载