幾個(gè)月前,因?yàn)轫?xiàng)目需求,我寫了下面的三個(gè)ajax相關(guān)的函數(shù)。發(fā)布出來和大家分享。
第一個(gè)是用來無刷新加載一段HTML
第二個(gè)是把表單數(shù)據(jù)轉(zhuǎn)換成一串請(qǐng)求字符串
第三個(gè)是結(jié)合函數(shù)一和函數(shù)二的無刷新提交表單實(shí)現(xiàn)。
還有一點(diǎn)要提到的是,無刷新表單提交,還不能對(duì)文件上傳進(jìn)行處理,這個(gè)主要是因?yàn)闉g覽器的安全設(shè)置。目前無刷新的上傳,一般是用iframe來實(shí)現(xiàn)的。關(guān)于這個(gè),我們?cè)趃oogle里搜索能找到很多。
網(wǎng)上雖然已經(jīng)有很多優(yōu)秀的ajax的類和函數(shù)了,但是或許我這幾個(gè)函數(shù)對(duì)大家還有點(diǎn)用處,于是我就發(fā)布出來了。
可以在這里下載。
//@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"http://@param request request string to be sent,such as "action=1&name=surfchen"http://@param method POST or GET//@param container the container object,the loaded page will display in container.innerHTML//@usage// ajaxLoadPage(‘index.php‘,‘a(chǎn)ction=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>"http://@author SurfChen <surfchen@gmail.com>//@url http://www.surfchen.org///@license http://www.gnu.org/licenses/gpl.html GPLfunction 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 XMLHttpRequestif (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 GPLfunction 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 GPLfunction ajaxFormSubmit(form_obj,container){ajaxLoadPage(form_obj.getAttributeNode("action").value,formToRequestString(form_obj),form_obj.method,container)}
聯(lián)系客服
December 26th, 2005 at 11:03:33
[…] 2 關(guān)于Ajax中Form元素的拼接,surfchen同學(xué)提供了一個(gè)不錯(cuò)的函數(shù),為了方便查找copy到這里。 […]