Ajax异步传输与PHP实现交互示例
程序员文章站
2022-06-19 23:20:32
背景 前台页面两个select框,一个与学院关联,另一个与专业关联,现需要选择学院select框后,显示学院相关信息,且专业select下面仅有属于该学院的专业名称。也就是...
背景
前台页面两个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>
前台页面两个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>
上一篇: Python设置在shell脚本中自动补全功能的方法
下一篇: python概率计算器实例分析