Ajax异步传输与PHP实现交互

原创 2013年12月02日 16:00:27

背景

前台页面两个select框,一个与学院关联,另一个与专业关联,现需要选择学院select框后,显示学院相关信息,且专业select下面仅有属于该学院的专业名称。也就是实现一个二级联动效果。

两个select里面分别定义onchange事件,事件中利用ajax的GET方法向后台PHP递交信息,再将查询得到的信息echo出来或document.write。

注:代码参考了有位叫y0umer的博主写的。

<script type="text/javascript">
var XmlHttp;
 function createXmlHttpRequestObject(){ 
	if(window.ActiveXobject){ // 判断是否是ie浏览器
	  try { // try开始 
		  xmlhttp = new ActiveXobject("Microsoft.XMLHTTP"); // 使用ActiveX对象创建ajax
	   }catch(e){
		   xmlHttp = false;
		} // try end
   }else{   //Chrome、FireFox等非ie内核
	   try{
		xmlHttp = new XMLHttpRequest(); //视为非ie情况下
	   }catch(e){
		  xmlHttp = false; // 其他非主流浏览器
	  }
	} // 判断结束,如果创建成功则返回一个DOM对象,如果创建不成功则返回一个false
		   
		if(xmlHttp)
		{
			return xmlHttp;
		}else{
			alert("对象创建失败,请检查浏览器是否支持XmlHttpRequest!");
		}
	
 } // 函数体 
//学院下拉框事件
function showCollegeInfo(){
   var selectIndex = document.getElementById("college").selectedIndex;//获得是第几个被选中了
   var value = document.getElementById("college").options[selectIndex].value;
   if(value)
   {
	// 先创建一个对象实例
	createXmlHttpRequestObject();
   // 使用事件对象获取文本框ID的值
   var vCollege = value;

   var url = "college.php?xy="+vCollege; //待发送URL  
  url=encodeURI(url);
 xmlHttp.onreadystatechange=ajaxok; // 判断浏览器状态栏 (接收玩数据触发的事件)
   xmlHttp.open("GET",url,false); // GET向服务器端发送数据
   xmlHttp.send(null);
   document.getElementById("collegeinfo").style.display="block";//显示学院信息的div
   }else{
		document.getElementById("collegeinfo").style.display="none";//隐藏学院信息的div
   }
}
 function ajaxok()
{
   if(xmlHttp.readyState == 4 && xmlHttp.status==200)
   {
	document.getElementById("collegeinfo").innerHTML = xmlHttp.responseText;
  }
}
//专业下拉框事件
function showMajorInfo(){
   var selectIndex = document.getElementById("major").selectedIndex;//获得是第几个被选中了
   var value = document.getElementById("major").options[selectIndex].value;
   if(value)
   {
	// 先创建一个对象实例
	createXmlHttpRequestObject();
   // 使用事件对象获取文本框ID的值
   var vMajor = value;

   var url = "major.php?zy="+vMajor; //待发送URL
 url=encodeURI(url);
  xmlHttp.onreadystatechange=ajaxok2; // 判断浏览器状态栏 (接收玩数据触发的事件)
   xmlHttp.open("GET",url,false); // GET向服务器端发送数据
   xmlHttp.send(null);
     document.getElementById("majorinfo").style.display="block";//显示专业信息的div
   }else{
	document.getElementById("majorinfo").style.display="none";//隐藏专业信息的div
   }
}
function ajaxok2()
{
   if(xmlHttp.readyState == 4 && xmlHttp.status==200)
   {
	document.getElementById("majorinfo").innerHTML = xmlHttp.responseText;
  }
}

</script>




相关文章推荐

ajax 异步传输php代码

  • 2015年03月14日 12:44
  • 685B
  • 下载

jQuery+Ajax+PHP 制作简单的异步数据传输(测试用户名是否可用)

实现基本异步数据传输,略去与数据库交换,先直接在
  • imwtr
  • imwtr
  • 2014年08月27日 00:33
  • 446

jQuery的Ajax实现异步传输List、Map

  • 2012年10月19日 17:16
  • 972KB
  • 下载

json+struts2+ajax+list实现异步传输一个列表

首先引包:很多包,漏了一个就会导致无法运行的,就是停在那个地方,不进行下去了...

Ajax实现的异步传输与验证

Ajax异步传输用得很广,就拿web开发来说吧,当用户注册时,当用户刚一输完,怎么立即判断用户是否存在,并在输入框后显示提示?这就用到了异步传输~~ 它可以让你不离开页面的情况下,获取后台你想要的数...
  • zeq9069
  • zeq9069
  • 2013年09月07日 08:09
  • 661

Ajax中利用jQuery简单实现异步交互

function verify(){ // alert("被点击了。。。。。。。"); //得到id为loginName的标签对象 var jqObject = $("#loginName")...

[php] ajax交互实现选择用户名显示用户数据

写这篇文章有点厚无耻了,因为这是从学习网站上扒下来的,不过我也不在乎了,,就当写给自己看的。。高手路过就行了。  如果有看不惯的,可以去www.runoob.com 或 www.w3school.co...

php +ajax +sql 实现数据交互

1.首先新建个sql表,表内容如上所示: 2.新建个公用文件conn.php来链接数据库: header("Content-Type:text/html;charset=utf8");//申明...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax异步传输与PHP实现交互
举报原因:
原因补充:

(最多只允许输入30个字)