之前研究了post的 现在把get的通用函数也拿出来和大家分享下 不懂的加我qq852208555一起研究
ajax_get.php 代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>爱乐ajax例子</title> </head> <script language="javascript"> //这里是整个处理表单元素加载到变量的模块开始 //获取指定form中的所有的<input>对象 function getElements(formId) { var form = document.getElementById(formId); var elements = new Array(); var tagElements = form.getElementsByTagName('input'); for (var j = 0; j < tagElements.length; j++) { elements.push(tagElements[j]); } return elements; } //获取单个input中的【name,value】数组 function inputSelector(element) { if (element.checked) return [element.name,element.value]; } function input(element) { switch (element.type.toLowerCase()) { case 'submit': case 'hidden': case 'password': case 'text': return [element.name,element.value]; case 'checkbox': case 'radio': return inputSelector(element); } return false; } //组合URL function serializeElement(element) { var method = element.tagName.toLowerCase(); var parameter = input(element); if (parameter) { var key = encodeURIComponent(parameter[0]); if (key.length == 0) return; if (parameter[1].constructor != Array) parameter[1] = [parameter[1]]; var values = parameter[1]; var results = []; for (var i=0; i<values.length; i++) { results.push(key + '=' + encodeURIComponent(values[i])); } return results.join('&'); } } //调用方法 function serializeForm(formId) { var elements = getElements(formId); var queryComponents = new Array(); for (var i = 0; i < elements.length; i++) { var queryComponent = serializeElement(elements[i]); if (queryComponent) queryComponents.push(queryComponent); } return queryComponents.join('&'); } //这里是整个处理表单元素加载到变量的模块的结束(如果是研究的话 先不要管上面直接看下面的学习就行了)
function ajax_get(div_al,url,form_name)/*通用函数在这里*/ { var div_al=div_al; //接收表单的URL地址 var url = url; //获取接受返回信息层 var form_name = form_name; var params = serializeForm(form_name); //需要get的值,把每个变量都通过&来联接 var url =url+"?"+params; if(window.ActiveXObject){//IE的低版本系类 XHR=new ActiveXObject('Microsoft.XMLHTTP');//之前IE垄断了整个浏览器市场,没遵循W3C标准,所以就有了这句代码。。。但IE6之后开始有所改观 } else if(window.XMLHttpRequest) {//非IE系列的浏览器,但包括IE7 IE8 XHR=new XMLHttpRequest(); } XHR.open("GET",true);//true:表示异步传输,而不等send()方法返回结果,这正是ajax的核心思想 XHR.onreadystatechange=function(){byhongfei(div_al/*这里可以传参数*/)}; XHR.send(null); } function byhongfei(div_al/*这里接受参数*/)//这个在调用方法传参可不容易 呵呵 我搞了好久才实现了 { var div_al=div_al; if(XHR.readyState == 4) { if(XHR.status == 200) { document.getElementById(div_al).innerHTML= XHR.responseText; } } }//当状态改变时,调用byhongfei这个方法,方法的内容我们另外定义
</script> <body > <div id="al">测试</div> <form name="user_al" method="post" action=""> 账号:<input type="text" name="username" /><br /> 密码:<input type="password" name="password" /><br /> 邮箱:<input type="text" name="email" /><br /> <input type="button" value="提交" onClick="ajax_get('al','ajax_cs.php','user_al');"> </form> </body> </html>
下面是接收处理的函数 ajax_cs.php 代码:
<?php header('Content-Type:text/html;charset=GB2312'); //ajax返回默认为utf-8,这里在返回头里面指出编码为GB2312以免汉字乱码 echo "你输入的信息为:</br>";
echo "账户".$_GET['username']."</br>"; echo "密码".$_GET['password']."</br>"; echo "邮箱".$_GET['email']."</br>"; ?> (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|