时间:2021-05-28
背景
前台页面两个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>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jquery框架中提供了$.ajax、$.get、$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get示例:实现省市区
目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件
本文用示例讲述了如何使用jQuery与PHP及Mysql结合,实现WEB版在线拍照、上传、显示浏览的功能,ajax交互技术贯穿本文始末,所以本文的读者要求具备相
jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程
AJAX。服务器数据解析与页面数据获取问题,创建动态网页,能有效减少后台与服务器间的数据交互量,从而实现网页异步更新。因此,AJAX是一种能有效减少信息请求量,