发布三个ajax相关的函数,包括无刷新提交表单等
程序员文章站
2022-06-17 14:14:09
几个月前,因为项目需求,我写了下面的三个ajax相关的函数。发布出来和大家分享。第一个是用来无刷新加载一段html第二个是把表单数据转换成一串请求字符串第三个是结合函数一和...
几个月前,因为项目需求,我写了下面的三个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 开发守则 10条说明
下一篇: AJAX 二级级联菜单实现代码