发布三个ajax相关的函数,包括无刷新提交表单等
发布三个ajax相关的函数,包括无刷新提交表单等
发布时间:2016-12-29 来源:查字典编辑
摘要:几个月前,因为项目需求,我写了下面的三个ajax相关的函数。发布出来和大家分享。第一个是用来无刷新加载一段HTML第二个是把表单数据转换成一...

几个月前,因为项目需求,我写了下面的三个ajax相关的函数。发布出来和大家分享。

第一个是用来无刷新加载一段HTML

第二个是把表单数据转换成一串请求字符串

第三个是结合函数一和函数二的无刷新提交表单实现。

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

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

可以在这里下载。

复制代码 代码如下:

//@descloadapage(somehtml)viaxmlhttp,anddisplayonacontainer

//@paramurltheurlofthepagewillload,suchas"index.php"

//@paramrequestrequeststringtobesent,suchas"action=1&name=surfchen"

//@parammethodPOSTorGET

//@paramcontainerthecontainerobject,theloadedpagewilldisplayincontainer.innerHTML

//@usage

//ajaxLoadPage('index.php','action=1&name=surfchen','POST',document.getElementById('my_home'))

//supposethereisahtmlelementof"my_home"id,suchas"<spanid='my_home'></span>"

//@authorSurfChen<surfchen@gmail.com>

//@urlhttp://www.surfchen.org/

//@licensehttp://www.gnu.org/licenses/gpl.htmlGPL

functionajaxLoadPage(url,request,method,container)

{

method=method.toUpperCase();

varloading_msg='Loading...';//thetextshowsonthecontaineronloading.

varloader=newXMLHttpRequest;//requireCross-BrowserXMLHttpRequest

if(method=='GET')

{

urls=url.split("?");

if(urls[1]==''||typeofurls[1]=='undefined')

{

url=urls[0]+"?"+request;

}

else

{

url=urls[0]+"?"+urls[1]+"&"+request;

}

request=null;//forGETmethod,loadershouldsendNULL

}

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

}

//@desctransformtheelementsofaformobjectandtheirvaluesintorequeststring(suchas"action=1&name=surfchen")

//@paramform_objtheformobject

//@usageformToRequestString(document.form1)

//@noticethisfunctioncannotbeusedtouploadafile.ifthereisafileinputelement,thefuncwilltakeitasatextinput.

//asIknow,becauseofthesecurity,inmostofthebrowsers,wecannotuploadafileviaxmlhttp.

//asolutionisiframe.

//@authorSurfChen<surfchen@gmail.com>

//@urlhttp://www.surfchen.org/

//@licensehttp://www.gnu.org/licenses/gpl.htmlGPL

functionformToRequestString(form_obj)

{

varquery_string='';

varand='';

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

}

elseif(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="&"

}

}

returnquery_string;

}

//@descnorefreshsubmit(ajax)byusingajaxLoadPageandformToRequestString

//@paramform_objtheformobject

//@paramcontainerthecontainerobject,theloadedpagewilldisplayincontainer.innerHTML

//@usageajaxFormSubmit(document.form1,document.getElementById('my_home'))

//@authorSurfChen<surfchen@gmail.com>

//@urlhttp://www.surfchen.org/

//@licensehttp://www.gnu.org/licenses/gpl.htmlGPL

functionajaxFormSubmit(form_obj,container)

{

ajaxLoadPage(form_obj.getAttributeNode("action").value,formToRequestString(form_obj),form_obj.method,container)

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新AJAX相关学习
热门AJAX相关学习
编程开发子分类