Ajax异步传输与PHP实现交互示例

背景

前台页面两个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数据交互并且局部刷新页面的实现详解
  • php 接口与前端数据交互实现示例代码
  • 利用php做服务器和web前端的界面进行交互
  • Android App端与PHP Web端的简单数据交互实现示例
  • 微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
  • php变量与JS变量实现不通过跳转直接交互的方法
  • Ajax+PHP简单数据交互
  • PHP与MySQL交互使用详解
  • PHP与服务器文件系统的简单交互
  • PHP与Web页面交互操作实例分析
张贴在3