js的ajax做的省市联动

2024-06-10 19:38
文章标签 js ajax 联动 省市

本文主要是介绍js的ajax做的省市联动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

xml写法
<?xml version="1.0" encoding="utf-8" ?>
<shengs><陕西><city>西安</city><city>咸阳</city></陕西><河南><city>郑州</city><city>洛阳</city>    </河南>
</shengs>
jsp页面写法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>省市联动</title>
<script language="javascript" type="text/javascript">var xmlHttp = null;var objXML;function createXMLHttpRequest(){if (window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHttp");}else{xmlHttp = new XMLHttpRequest();}}function work(){if (xmlHttp.readyState==4){    if(xmlHttp.status==200){        objXML = xmlHttp.responseXML;showSheng();            }else{alert("服务器返回错误");}}}function showSheng(){var shengList = objXML.getElementsByTagName("shengs");  for(var i=0;i<shengList[0].childNodes.length;i++){      document.getElementById("SelectSheng").options.add(new Option(shengList[0].childNodes[i].nodeName,shengList[0].childNodes[i].nodeName));//给select标签加入选项//select标签对象.options.add(new Option(文本,值))}    showShi();
//     var selectSheng = document.createElement("select");
//     selectSheng.onchange = showShi;}function showShi(){        var shiList = objXML.getElementsByTagName(document.getElementById("SelectSheng").value);            document.getElementById("SelectShi").options.length=0;//清空select标签下的选项//select标签对象.options.length= 0        for (var i=0;i<shiList[0].childNodes.length;i++){document.getElementById("SelectShi").options.add(new Option(shiList[0].childNodes[i].firstChild.nodeValue,i));}        }function getContent(){  createXMLHttpRequest();  if (xmlHttp == null){alert("xmlHttp对象没有创建");}else{xmlHttp.onreadystatechange = work;xmlHttp.open("GET","shengshi.xml",true);xmlHttp.send();}}</script>    
</head><body οnlοad="getContent()"><form id="form1" runat="server"><div><select id="SelectSheng" οnchange="showShi()"></select><select id="SelectShi"></select></div></form>
</body>
</html>javascript的window.ActiveXObject对象,区别浏览器的方法
(window.ActiveXObject)的作用,用来判断浏览器是否支持ActiveX控件,如果支持ActiveX控件,我们可以利用var xml=new ActiveXObject("Microsoft.XMLHTTP")的形式来创建XMLHTTPRequest对象(这是在IE7以前的版本中)。在较新的IE版本中可以利用var xml=new ActiveXObject("Msxml2.XMLHTTP")的形式创建XMLHttpRequest对象;而在IE7及非IE浏览器中可以利用var xml=new XMLHttpRequest()创建XMLHttpRequest对象。因此我们在创建这个对象的时候必须得考虑浏览器的兼容问题。然后是XMLHTTPRequest的区别我们这里来看看这里是怎么使用它。在使用XMLHTTPRequest对象发送请求和处理响应之前,我们必须要用javascript创建一个XMLHTTPRequest对象。(IE把XMLHTTPRequest实现为一个ActiveX对象,其他的浏览器[如Firefox/Safari/Opear]则把它实现为一个本地的javascript对象)。下面我们就来看看具体怎么运用javascript来创建它吧:<script language="javascript" type="text/javascript">
<!--
var xmlhttp;    // 创建XMLHTTPRequest对象
function createXMLHTTPRequest(){
if(window.ActiveXObject){ // 判断是否支持ActiveX控件
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
}
else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象
xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例(本地javascript对象)
}
}
//-->
</script>

这篇关于js的ajax做的省市联动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1049084

相关文章

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con

vue+elementUI下拉框联动显示

<el-row><el-col :span="12"><el-form-item label="主账号:" prop="partyAccountId" :rules="[ { required: true, message: '主账号不能为空'}]"><el-select v-model="detailForm.partyAccountId" filterable placeholder="

js小题:通过字符串执行同名变量怎么做

在JavaScript中,你不能直接使用一个字符串来直接引用一个变量,因为JavaScript是一种静态类型语言(尽管它的类型在运行时可以变化),变量的名字在编译时就被确定了。但是,有几种方法可以实现类似的功能: 使用对象(或Map)来存储变量: 你可以使用一个对象来存储你的变量,然后使用字符串作为键来访问这些变量。 let myVars = { 'var1': 'Hello', 'var

图形编辑器基于Paper.js教程03:认识Paper.js中的所有类

先来认一下Paper的资源对象,小弟有哪些,有个整体的认识。认个脸。 在Paper.js的 官方文档中类大致有如下这些: 基类: ProjectViewItemPointToolSizeSegmentRectangleCurveCurveLocationMatrixColorStyleTweenToolEventGradientGradientStopEvent 二级或三级类 继承Ite

HTML文档插入JS代码的几种方法

在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内联,放置在< script>和标签对之间。 2.放置在由< script>标签的src属性指定的外部文件中。 3.放置在HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定。 4.放在一个URL里,这个URL使用特殊的“javascript:”协议。 在JS编程中,主张

js 正则表达式出现问题

帮同事写个页面,出现正则表达式不管怎么改都没法匹配的情况。。。。 reg = /^sy[0-9]+$/i; if(rtx.match(reg) == null){ alert("请输入正确的RTX账号!"); return false; } 因为之前一直用的是 reg ="/^sy[0-9]+$/i"; 写PHP写习惯了。。外面多写了两个双引号……T.T 改

bootstrap和JS相关

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。 bootstrap 显示隐藏div $('.show-info').click(function () {var show = $(this).data('show');if(show =='all'){$('#creative').show();$('#plan').show();$('#plan').attr('class','

sublime配置node.js

1、下载Nodejs插件,下载地址为: https://github.com/tanepiper/SublimeText-Nodejs(见本人网盘) 下载zip压缩包后解压,文件名改为Nodejs 2、打开Sublime Text3,点击菜单“Perferences” =>“Browse Packages”打开“Packages”文件夹,并将第1部的Nodejs文件夹剪切进来 3

Ajax及其工作原理

Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡。 AJAX是不能跨域的,如需跨域,可以使用document.domain='a.com';或者使用服务器代理,代理XMLHttpRequest文件 AJAX是基于现有的Internet标准,并且联合使用它们: XMLHttpRequest 对象 (异步的与服

Lodash-js工具库

1. Lodash 简介 Lodash 是一个现代 实用工具库,提供了许多有用的函数,帮助开发者处理常见的编程任务,如数组操作、对象处理、字符串处理等。Lodash 使得代码更简洁、更高效,极大地提高了开发效率。Lodash 的设计灵感来自于 Underscore.js,但提供了更多的功能和更好的性能。 2. 安装 Lodash Lodash 可以通过多种方式安装: 具体安装:参考官网