Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

创建数据库和数据表

首先，需要先创建一个数据库，可以取名为demo，然后在这个数据库中创建一张名为province的数据表，并插入一些数据。表结构如下：

CREATE TABLE IF NOT EXISTS `province` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '省份ID',
  `name` varchar(50) NOT NULL COMMENT '省份名称',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COMMENT='省份表';

INSERT INTO `province` (`id`, `name`) VALUES
(1, '北京市'),
(2, '天津市'),
(3, '河北省'),
(4, '山西省'),
(5, '内蒙古自治区'),
(6, '辽宁省'),
(7, '吉林省'),
(8, '黑龙江省'),
(9, '上海市'),
(10, '江苏省'),
(11, '浙江省'),
(12, '安徽省'),
(13, '福建省'),
(14, '江西省'),
(15, '山东省'),
(16, '河南省'),
(17, '湖北省'),
(18, '湖南省'),
(19, '广东省'),
(20, '广西壮族自治区'),
(21, '海南省'),
(22, '重庆市'),
(23, '四川省'),
(24, '贵州省'),
(25, '云南省'),
(26, '西藏自治区'),
(27, '陕西省'),
(28, '甘肃省'),
(29, '青海省'),
(30, '宁夏回族自治区'),
(31, '新疆维吾尔自治区'),
(32, '台湾省'),
(33, '香港特别行政区'),
(34, '澳门特别行政区');

接着，再创建一张名为city的数据表，并插入一些数据。表结构如下：

CREATE TABLE IF NOT EXISTS `city` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '城市ID',
  `name` varchar(50) NOT NULL COMMENT '城市名称',
  `pid` int(10) unsigned NOT NULL COMMENT '所属省份ID',
  PRIMARY KEY (`id`),
  KEY `idx_pid` (`pid`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COMMENT='城市表';

INSERT INTO `city` (`id`, `name`, `pid`) VALUES
(1, '北京市', 1),
(2, '天津市', 2),
(3, '石家庄市', 3),
(4, '唐山市', 3),
(5, '秦皇岛市', 3),
(6, '邯郸市', 3),
(7, '邢台市', 3),
(8, '保定市', 3),
(9, '张家口市', 3),
(10, '承德市', 3),
(11, '沧州市', 3),
(12, '廊坊市', 3),
(13, '衡水市', 3),
(14, '太原市', 4),
(15, '大同市', 4),
(16, '阳泉市', 4),
(17, '长治市', 4),
(18, '晋城市', 4),
(19, '朔州市', 4),
(20, '晋中市', 4),
(21, '运城市', 4),
(22, '忻州市', 4),
(23, '临汾市', 4),
(24, '吕梁市', 4),
(25, '呼和浩特市', 5),
(26, '包头市', 5),
(27, '乌海市', 5),
(28, '赤峰市', 5),
(29, '通辽市', 5),
(30, '鄂尔多斯市', 5),
(31, '呼伦贝尔市', 5),
(32, '巴彦淖尔市', 5),
(33, '乌兰察布市', 5),
(34, '兴安盟', 5),
(35, '锡林郭勒盟', 5),
(36, '阿拉善盟', 5),
(37, '沈阳市', 6),
(38, '大连市', 6),
(39, '鞍山市', 6),
(40, '抚顺市', 6),
(41, '本溪市', 6),
(42, '丹东市', 6),
(43, '锦州市', 6),
(44, '营口市', 6),
(45, '阜新市', 6),
(46, '辽阳市', 6),
(47, '盘锦市', 6),
(48, '铁岭市', 6),
(49, '朝阳市', 6),
(50, '葫芦岛市', 6),
(51, '长春市', 7),
(52, '吉林市', 7),
(53, '四平市', 7),
(54, '辽源市', 7),
(55, '通化市', 7),
(56, '白山市', 7),
(57, '松原市', 7),
(58, '白城市', 7),
(59, '延边朝鲜族自治州', 7);

后端程序实现

接着，需要编写一个用于获取省份和城市信息的后端程序。在这里，我使用PHP语言来实现。

<?php
//连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=demo;charset=utf8', 'root', 'password');

//设置返回的数据格式为XML
header('Content-Type:text/xml');

//获取省份和城市信息
$provinces = $pdo->query('SELECT * FROM province')->fetchAll(PDO::FETCH_ASSOC);
$cities = $pdo->query('SELECT * FROM city')->fetchAll(PDO::FETCH_ASSOC);

//生成XML格式的数据
echo '<?xml version="1.0" encoding="utf-8"?>';
echo '<data>';
foreach ($provinces as $province) {
    echo '<province id="'.$province['id'].'" name="'.$province['name'].'">';
    foreach ($cities as $city) {
        if ($city['pid'] == $province['id']) {
            echo '<city id="'.$city['id'].'" name="'.$city['name'].'"></city>';
        }
    }
    echo '</province>';
}
echo '</data>';
?>

在这个程序中，我们首先使用PDO连接到MySQL数据库，并分别从province和city表中获取数据。然后，我们使用XML格式来生成数据，并返回给前端。

前端页面实现

最后，我们需要编写一个前端页面，来演示如何异步获取省份和城市信息。

首先，我们需要在HTML中引入jQuery库，并在页面中添加下面的HTML代码：

<div>
  <select id="province" name="province">
    <option value="">请选择省份</option>
  </select>
  <select id="city" name="city">
    <option value="">请选择城市</option>
  </select>
</div>

<script>
$(function() {
  //加载省份信息
  $.ajax({
    type: 'GET',
    url: '/get-data.php',
    dataType: 'xml',
    success: function(xml) {
      $(xml).find('province').each(function() {
        var id = $(this).attr('id');
        var name = $(this).attr('name');
        var option = $('<option></option>').attr('value', id).text(name);
        $('#province').append(option);
      });
    },
    error: function() {
      alert('加载省份信息失败');
    }
  });

  //选择省份后，加载城市信息
  $('#province').change(function() {
    var pid = $(this).val();
    $('#city option:gt(0)').remove();
    if (pid) {
      $.ajax({
        type: 'GET',
        url: '/get-data.php',
        dataType: 'xml',
        success: function(xml) {
          $(xml).find('city[pid='+pid+']').each(function() {
            var id = $(this).attr('id');
            var name = $(this).attr('name');
            var option = $('<option></option>').attr('value', id).text(name);
            $('#city').append(option);
          });
        },
        error: function() {
          alert('加载城市信息失败');
        }
      });
    }
  });
});
</script>

在这个页面中，我们首先使用jQuery来异步加载省份信息。在成功加载省份信息后，我们使用jQuery的each方法遍历所有省份，并将它们添加到省份下拉框中。

当用户选择了某个省份后，我们再使用jQuery的change方法来异步加载该省份下的城市信息。与上面相似，我们在成功加载城市信息后，使用jQuery的each方法遍历该省份下的所有城市，并将它们添加到城市下拉框中。

同时，这里的Ajax请求返回的是XML格式的数据，因此我们要指定dataType为"xml"，这样jQuery会自动将返回的数据解析为XML格式，并方便我们使用find等方法操作数据。

示例说明

这里为您提供两个示例帮助您理解整个过程。

第一个示例是开始页面，它的功能就是两个下拉框，其中一个下拉框是省份的，另外一个则为城市的。一开始，它并没有任何省份和城市，只需要将它的指针移动到省份的下拉框中，可以看到下面列出了省份列表，而当您选择某个省份时，下面的城市下拉框将会自动载入所选省份中所有的城市。

第二个示例是省市区的级联列表，可以使用脚本演示如何将三个下拉列表组合在一起创建出一个简单的地址编辑器，以此来说明这个方法的具体运用。

以上就是Ajax通过XML异步提交的实现从数据库获取省份和城市信息实现二级联动（XML方法）的完整攻略。

阅读剩余 79%

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法) - Python技术站

Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

相关文章

分享到: