• jquery+json+struts实现省市二级联动


      发现自己好久没写过博客了,算超来有一个多月了吧。这段时间一直在忙着考试,连项目都耽搁下来了。这几天在研究jquery,发现页面上添加省市可以不用js写好脚本去实现,我们可以用后台处理的方法,利用jquery与json的完美结合来实现这一功能。具体实现如下:

      第一步:本次实现的功能是在struts下实现的基本功能,故必须先完成struts的基本配置,这里就做详细介绍。接着是完成jquery的下载与安装这里也不做详细介绍,读者可以查阅相关资料完成相关的配置。

      第二步:在第一步完成好的情形下,我们就可以来实现具体的代码实现了。因为这是进行在后台中的处理的方法,所以,我们需要建立一张表,来存储与省市相关的字段。我使用的数据库是MySql,建表语句为:

      

    /*
    MySQL Data Transfer
    Source Host: localhost
    Source Database: hao
    Target Host: localhost
    Target Database: hao
    Date: 2012-12-1 21:44:01
    */

    SET FOREIGN_KEY_CHECKS=0;
    -- ----------------------------
    -- Table structure for pro_city
    -- ----------------------------
    DROP TABLE IF EXISTS `pro_city`;
    CREATE TABLE `pro_city` (
    `id` int(10) NOT NULL AUTO_INCREMENT,   **存储省市的ID
    `name` varchar(30) NOT NULL,                   **存储省市的名称
    `parent_id` int(10) DEFAULT '0',       **存储每个市所对应的省的ID
    PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;

    -- ----------------------------
    -- Records
    -- ----------------------------
    INSERT INTO `pro_city` VALUES ('1', '江西', '0');
    INSERT INTO `pro_city` VALUES ('2', '南昌', '1');
    INSERT INTO `pro_city` VALUES ('3', '赣州', '1');
    INSERT INTO `pro_city` VALUES ('4', '北京', '0');
    INSERT INTO `pro_city` VALUES ('5', '北京', '4');
    INSERT INTO `pro_city` VALUES ('6', '福建', '0');
    INSERT INTO `pro_city` VALUES ('7', '福州', '6');
    INSERT INTO `pro_city` VALUES ('8', '厦门', '6');

      第三步,完成了表的建立后,我们就可以开始后台处理了。 我用的架构的struts+spring+mybatis的架构,首先,先在数据字段对应的实体类。其次编写dao层,service层,最后编写action层。

      具体实现代码如下:

    实体类:

    dao层:

      ProvinceMapper.java

      

      ProvinceMapper.xml

      

    service层:

      ProvinceService.java

      ProvinceServiceImpl.java

      

    action层:

      PrivinceAction.java

      第四步:配置struts.xml,将json与struts结合.

      

      第五步:这一步就是最关键的一步了,因为前面的后台配置对于大家来说也是轻车熟路了,所以,接下来,我们将在页面上将jquery与json相结合,调用action里的具体方法;

      login.jsp

      以上完成后,我们就可起起动服务器,看下效果

      

      至此,所以的工作完成了,效果和我们预期的是一样的。

      

  • 相关阅读:
    prototype的本质
    如何只用CSS做到完全居中
    CSS3 过渡效果触发时机的问题
    HTML转义字符
    SVG总结小知识
    JavaScript中Switch使用
    AngularJS注入依赖路由总结
    echart模块化单文件引入
    CSS定义input disabled样式
    海盗船长小米首页小船来回摆动CSS3.0效果
  • 原文地址:https://www.cnblogs.com/haohai/p/2797713.html
Copyright © 2020-2023  润新知