发布三个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) }

2005-12-26 11:03:33
[...] 2 关于Ajax中Form元素的拼接,surfchen同学提供了一个不错的函数,为了方便查找copy到这里。 [...]
2006-02-20 10:26:18
很不错哦,
2006-04-30 15:59:25
fdaadfsd
2006-04-30 16:06:54
dsafdsdfdffd
2006-09-06 20:32:41
abcdefg烦烦
2006-09-06 20:33:10
慢慢慢
2006-09-06 20:37:00
在晃是
2006-09-13 17:21:25
好,不错
2006-09-14 12:25:24
楼主做个例子,打个包吧?让我们这些新手也能顺利地学习学习。谢谢。
2006-11-01 13:41:42
表单中select元素如果是multiple怎么解决呢?
2006-11-16 16:16:14
不太理解怎么用,没有学过js呵呵,可以这样用吗?
user
submit
loading一下之后没有显示呢
2006-11-18 12:54:25
to 蓝色多瑙河:
我更新了代码,可以支持multiple了。这里可以下载
2006-11-24 14:51:29
感谢
2007-03-16 05:47:34
无刷新表单不通过ifame就不能实现吗?
2007-03-16 08:22:38
不用通过iframe
2007-04-02 07:06:22
per la pace
发布三个ajax相关的函数,包括无刷新提交表单等
2007-04-09 10:41:24
thanks 谢
2007-06-12 13:31:40
能不能给个使用这三个表单的例子。。能发份到我邮箱吗?
谢谢
QQ:63683984(验证:AJAX实例)
2007-07-10 19:01:17
试试
2007-07-10 19:01:42
怎么自己不用?
2007-09-23 10:48:53
test this one
这是无刷新吗??
2008-04-17 00:17:34
好东西哦
2008-08-20 11:50:54
合理咯
2009-05-19 22:46:19
额外我