几个月前,因为项目需求,我写了下面的三个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)
}
ajax函数,无刷新,表单
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 群星.2002-恋爱物语情歌对唱精选2CD(引进版)【滚石】【WAV+CUE】
- 群星《闽南情24K德国HD金碟》2CD[WAV+CUE]
- 周传雄《恋人创世纪》环球唱片[WAV+CUE]
- 关淑怡-《真假情话K2HD》(日本压制)【WAV+CUE】
- 王菲 -《Faye Wong》雨果LPCD45 [WAV+分轨][1G]
- 陈百强《世纪10星·永恒篇》环球[WAV+CUE][1G]
- 陈奕迅《黑·白·灰》台湾版[WAV+CUE][400M]
- 张尕怂.2024-甘肃娃娃【FLAC分轨】
- 张惠妹.2011-A.MEI.ACOUSTIC.BEST.2CD【丰华】【WAV+CUE】
- ZEN.1996-珍惜所有【华纳】【WAV+CUE】
- 群星《环球国语元素》香港首版[WAV+CUE][1G]
- 周慧敏《玉女天后》原音母版1:1直刻[WAV+CUE][1G]
- 谭咏麟《20世纪中华歌坛名人百集珍藏版》[WAV+CUE][1G]
- 炉石传说40轮盘术最新卡组代码在哪找 标准40轮盘术卡组代码分享
- 炉石传说亲王贼怎么玩 2024亲王贼最新卡组代码分享