Ajax实现城市二级联动d

这篇文章主要介绍了Ajax实现城市二级联动d,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联-专业网站定制、快速模板网站建设、高性价比扶风网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式扶风网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖扶风地区。费用合理售后完善,十载实体公司更值得信赖。

1、html


 
 
 
 
 

2、javascript

//创建获取ajax核心对象的函数
  function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
   }else{
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   return xhr;
  }
  var xhr = getXhr();
  // 第一次执行Ajax异步请求 - 省份
  window.onload = function(){
   xhr.open("get","finaly.php?state=1");
   xhr.send(null);
   xhr.onreadystatechange = function(){
   if(xhr.readyState==4&&xhr.status==200){
     var data = xhr.responseText;
     // 将字符串转换为数组
     var provinces = data.split(",");
     // 遍历数组
     for(var i=0;i0;z--){
    city.removeChild(opts[z]);
   }
   if(province.value != "请选择"){
    xhr.open("post","finaly.php");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send("state=2&province="+province.value);
    xhr.onreadystatechange = function(){
     if(xhr.readyState==4&&xhr.status==200){
      var data = xhr.responseText;
      var cities = data.split(",");
      for(var i=0;i

3、finaly.php

什么是ajax

ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。

感谢你能够认真阅读完这篇文章,希望小编分享的“Ajax实现城市二级联动d”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前文章:Ajax实现城市二级联动d
网站链接:http://hbruida.cn/article/ieshsi.html