Ajax的使用

最新推荐文章于 2024-08-02 13:55:36 发布
最新推荐文章于 2024-08-02 13:55:36 发布
阅读量161 收藏
点赞数
分类专栏： Web 文章标签： ajax jquery maven
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40055163/article/details/120439162
版权

1 jquery对Ajax的支持

在这里插入图片描述
1.点击File–>New–>Module。如图所示：
在这里插入图片描述
2.选择Maven，点击Next。如图所示：
在这里插入图片描述
3.修改如图所示，点击Next即可。
在这里插入图片描述
4.如图所示：点击Finish即可。在这里插入图片描述
6.修改pom.xml的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.txw</groupId>
  <artifactId>ajax1</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <!--jsp-->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.1</version>
    </dependency>
    <!--servlet-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
    </dependency>
    <!--struts2-->
    <dependency>
      <groupId>org.apache.struts</groupId>
      <artifactId>struts2-core</artifactId>
      <version>2.3.16.3</version>
    </dependency>
    <!--fastjson-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.48</version>
    </dependency>
  </dependencies>
  <build>
  </build>
</project>

如图所示：在这里插入图片描述

2 查询多个

流程如图所示：在这里插入图片描述
1.在webapp目录下创建queryAll.jsp的代码如下：

<%@page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用ajax查询多个用户</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            // 给按钮绑定单击事件
            $("#btn").click(function () {
                // 发送查询所有请求
                // 1.创建xhr对象 浏览器存在差异 webKit IE 6.0
                /**
                 判断用户的浏览器内核
                 Windows.XMLHttpRequest 返回值 布尔值
                 true: webKit
                 false: 是IE
                 */
                var xhr;
                if (window.XMLHttpRequest){
                    // webKit
                    xhr = new XMLHttpRequest();
                }else {
                    // IE
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 2.发送请求，并传递数据
                xhr.open("POST","${pageContext.request.contextPath}/user/queryAll");
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                xhr.send();
                // 3.处理响应并更新局部页面
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 响应的Json形式的字符串，转化为js中的Json对象
                        var users = JSON.parse(xhr.responseText);
                        var div = $("#users");
                        div.empty();
                        for (var i = 0; i < users.length; i++){
                             var ul = $("<ul>");
                        var idLi = $("<li>").text(users[i].id);
                        var nameLi = $("<li>").text(users[i].name);
                        var pwdLi = $("<li>").text(users[i].password);
                        var birthLi = $("<li>").text(users[i].birthday);
                        ul.append(idLi).append(nameLi).append(pwdLi).append(birthLi);
                        div.append(ul);
                    }
                    }
                }
            });
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="查询多个" />
    <div id="users">

    </div>
</body>
</html>

如图所示：在这里插入图片描述
8.修改web.xml的代码如下：

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <!--Struts2核心过滤器-->
  <filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

如图所示：
在这里插入图片描述
9.编写User的代码如下：

package com.txw.action.entity;

import com.alibaba.fastjson.annotation.JSONField;
import java.util.Date;
public class User {
    private int id;
    private String name;
    private String password;

    @JSONField(format = "yyyy-MM-dd")
    private Date birthday;

    public User() {
    }

    public User(int id, String name, String password, Date birthday) {
        this.id = id;
        this.name = name;
        this.password = password;
        this.birthday = birthday;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", password='" + password + '\'' +
                ", birthday=" + birthday +
                '}';
    }
}

如图所示：在这里插入图片描述
10.编写UserAction的代码如下：

package com.txw.action;

import com.alibaba.fastjson.JSONObject;
import com.txw.action.entity.User;
import org.apache.struts2.ServletActionContext;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
public class UserAction {

    public String queryAll() throws IOException {
        List<User> users = new ArrayList<User>();
        users.add(new User(1,"Adair","123456",new Date()));
        users.add(new User(2,"yu","123456",new Date()));
        users.add(new User(3,"wx","123456",new Date()));
        users.add(new User(4,"hxl","123456",new Date()));
        // 将集合转化为JSON字符串
        String jsonString = JSONObject.toJSONString(users);
        // 将jsonString响应给用户
        ServletActionContext.getResponse().getWriter().print(jsonString);
        return null;
    }
}

如图所示：在这里插入图片描述

11.在resources目录下创建struts.xml的代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
        "-//Apaxche Software Foundation//DTD Struts Configuration 2.5//EN"
        "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
    <package name="user" extends="struts-default" namespace="/user">
        <action name="queryAll" class="com.txw.action.UserAction" method="queryAll"></action>
    </package>
</struts>

如图所示：在这里插入图片描述

3 三级联动

1.在webapp目录下创建city.jsp的代码如下：

<%@page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false"%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市县三级联动</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            // 加载完页面，查询所有省份信息
            $.get("${pageContext.request.contextPath}/city/queryAllProvince" ,function (result) {
                for (var i = 0; i < result.length; i ++){
                   var provinceOption = $("<option>").text(result[i].name).val(result[i].id);
                   $("#province").append(provinceOption);
                }
                // 调用省份改变后的操作，查询当前省份的城市
                ("#province").change();
            },"json");
            // 选择省份信息后查询城市
            $("#province").change(function () {
                // 1.获取选中省份的option的value属性值
                var proId = $("#province").val();
                // 2.清空原有城市信息
                $("#city").empty();
                // 3.发送请求，根据省份id查询城市信息
                $.post("${pageContext.request.contextPath}/city/queryByProvinceId","id=" + proId,function (result) {
                    for (var i = 0; i < result.length; i ++){
                        var cityOption = $("<option>").text(result[i].name).val(result[i].id);
                        $("#city").append(cityOption);
                    }
                    // 调用城市改变后的操作，查询当前城市的县/区
                    $("#city").change();
                },"json");
                 });
            // 选择城市信息后查询县/区
            $("#city").change(function () {
                // 1.获取选中城市的option的value属性值
                var cityId = $("#city").val();
                // 2.清空原有县/区信息
                $("#county").empty();
                // 3.发送请求，根据城市id查询县/区信息
                $.ajax({
                    url:"${pageContext.request.contextPath}/city/queryByCityId",
                    data:"id=" +cityId,
                    type:"POST",
                    dataType:"json",
                    success:function (result) {
                        for (var i = 0; i < result.length; i ++){
                            var countyOption = $("<option>").text(result[i].name).val(result[i].id);
                            $("#county").append(countyOption);
                        }
                    }
                });
            });

        });
    </script>
</head>
<body>
    省：<select id="province"></select>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    市：<select id="city"></select>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    县/区：<select id="county"></select>
</body>
</html>

如图所示：
在这里插入图片描述
2.创建数据库以及表的语句如下：

/*
 Navicat Premium Data Transfer

 Source Server         : 192.168.64.128
 Source Server Type    : MySQL
 Source Server Version : 50734
 Source Host           : 192.168.64.128:3306
 Source Schema         : test

 Target Server Type    : MySQL
 Target Server Version : 50734
 File Encoding         : 65001

 Date: 24/09/2021 10:50:57
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_c
-- ----------------------------
DROP TABLE IF EXISTS `t_c`;
CREATE TABLE `t_c`  (
  `id` int(11) NOT NULL,
  `name` varchar(100) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL,
  `parent_id` int(11) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_unicode_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of t_c
-- ----------------------------
INSERT INTO `t_c` VALUES (1, '六盘水市', 1);
INSERT INTO `t_c` VALUES (2, '贵阳市', 1);
INSERT INTO `t_c` VALUES (3, '遵义市', 1);

-- ----------------------------
-- Table structure for t_s
-- ----------------------------
DROP TABLE IF EXISTS `t_s`;
CREATE TABLE `t_s`  (
  `id` int(11) NOT NULL,
  `name` varchar(100) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_unicode_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of t_s
-- ----------------------------
INSERT INTO `t_s` VALUES (1, '贵州省');
INSERT INTO `t_s` VALUES (2, '云南省');
INSERT INTO `t_s` VALUES (3, '四川省');
INSERT INTO `t_s` VALUES (4, '河南省');

-- ----------------------------
-- Table structure for t_x
-- ----------------------------
DROP TABLE IF EXISTS `t_x`;
CREATE TABLE `t_x`  (
  `id` int(11) NOT NULL,
  `name` varchar(100) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL,
  `parent_id` int(11) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_unicode_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of t_x
-- ----------------------------
INSERT INTO `t_x` VALUES (1, '盘州市', 1);
INSERT INTO `t_x` VALUES (2, '花溪区', 2);
INSERT INTO `t_x` VALUES (3, '六枝', 1);

SET FOREIGN_KEY_CHECKS = 1;

如图所示：在这里插入图片描述
3.在pom.xml文件中添加依赖坐标的代码如下：

 <!--mybaits-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.4.6</version>
    </dependency>
    <!--mysql-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.16</version>
    </dependency>

如图所示：在这里插入图片描述
4.在resources目录下创建mybaits-config.xml的代码如下：

log4j.rootLogger=DEBUG, stdout

# SqlMap logging configuration...
log4j.logger.com.ibatis=DEBUG
log4j.logger.com.ibatis.common.jdbc.SimpleDataSource=DEBUG
log4j.logger.com.ibatis.sqlmap.engine.cache.CacheModel=DEBUG
log4j.logger.com.ibatis.sqlmap.engine.impl.SqlMapClientImpl=DEBUG
log4j.logger.com.ibatis.sqlmap.engine.builder.xml.SqlMapParser=DEBUG
log4j.logger.com.ibatis.common.util.StopWatch=DEBUG
log4j.logger.java.sql.Connection=DEBUG
log4j.logger.java.sql.Statement=DEBUG
log4j.logger.java.sql.PreparedStatement=DEBUG
log4j.logger.java.sql.ResultSet=DEBUG

# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

如图所示：
在这里插入图片描述
5.在resources目录下创建jdbcConfig.propertiesl的代码如下：

jbbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://192.168.64.128:3306/test?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimeZone=Asia/Shanghai
jdbc.username=root
jdbc.password=123456

如图所示：
在这里插入图片描述
6.在resources目录下创建mybaits-config.xml的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!-- 配置properties-->
    <properties resource="jdbcConfig.properties"></properties>
    <!--使用typeAliases配置别名，它只能配置entity中类的别名 -->
    <typeAliases>
        <package name="com.txw.action.entity"></package>
    </typeAliases>
    <!--配置环境-->
    <environments default="mysql">
        <!-- 配置mysql的环境-->
        <environment id="mysql">
            <!-- 配置事务 -->
            <transactionManager type="JDBC"></transactionManager>
            <!--配置连接池-->
            <dataSource type="POOLED">
                <property name="driver" value="${jbbc.driver}"/>
                <property name="url" value="${jdbc.url}"></property>
                <property name="username" value="${jdbc.username}"></property>
                <property name="password" value="${jdbc.password}"></property>
            </dataSource>
        </environment>
    </environments>
    <!-- 配置映射文件的位置 -->
    <mappers>
        <mapper resource="com/txw/mapper/ProvinceDaoMapper.xml"/>
        <mapper resource="com/txw/mapper/CityDaoMapper.xml"/>
        <mapper resource="com/txw/mapper/CountyDaoMapper.xml"/>
    </mappers>
</configuration>

如图所示：在这里插入图片描述
7.编写Province的代码如下：

package com.txw.action.entity;

/**
 * 省
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24 下午 12:40
 */
@SuppressWarnings("all")   // 注解警告信息
public class Province {
    private int id;
    private String name;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

如图所示：在这里插入图片描述
8.编写City的代码如下：

package com.txw.action.entity;

/**
 * 市
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24  下午 12:45
 */
@SuppressWarnings("all")   // 注解警告信息
public class City {
    private int id;
    private String name;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

如图所示：
在这里插入图片描述
9.编写County的代码如下：

package com.txw.action.entity;

/**
 * 县/区
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24  下午 12:48
 */
@SuppressWarnings("all")   // 注解警告信息
public class County {
    private int id;
    private String name;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

如图所示：在这里插入图片描述
10.编写ProvinceDao的代码如下：

package com.txw.action.dao;

import com.txw.action.entity.Province;
import java.util.List;
/**
 * 省
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24 下午 12:55
 */
@SuppressWarnings("all")   // 注解警告信息
public interface ProvinceDao {

    /**
     * 查询所有省级信息
     * @return
     */
    public List<Provice> selectAll();
}

如图所示：在这里插入图片描述
11.编写CityDao的代码如下：

package com.txw.action.dao;

import com.txw.action.entity.City;
import java.util.List;
/**
 * 市
 * @author:Adair
 * @qq 1578533828@qq.com
 * 2021/9/24  下午 1:03
 */
@SuppressWarnings("all")   // 注解警告信息
public interface CityDao {

    /**
     * 根据省级id，查询城市信息
     * @return
     */
    public List<City> selectByParentID(int id);
}

如图所示：在这里插入图片描述
12.编写CountyDao的代码如下：

package com.txw.action.dao;

import com.txw.action.entity.County;
import java.util.List;
/**
 * 县/区
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24 下午 1:08
 */
@SuppressWarnings("all")   // 注解警告信息
public interface CountyDao {

    /**
     * 根据城市id，查询县/区信息
     * @param id
     * @return
     */
    public List<County> selectByParentID(int id);
}

如图所示：在这里插入图片描述
13.编写ProvinceDaoMapper.xml的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.txw.action.dao.ProvinceDao">
    <!--查询所有操作-->
    <select id="selectAll" resultType="Province">
         select * from t_s
    </select>
</mapper>

如图所示：在这里插入图片描述
14.编写ProvinceDAoTest的代码如下：

package com.txw.test;

import com.txw.action.dao.ProvinceDao;
import com.txw.action.entity.Province;
import com.txw.action.uitls.MybaitsUitl;
import org.junit.Test;
import java.util.List;
/**
 * 省测试类
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24  下午 1:30
 */
@SuppressWarnings("all")   // 注解警告信息
public class ProvinceDAoTest {

    /**
     * 查询所有省级信息
     */
    @Test
    public void testselectAll(){
        ProvinceDao pd = (ProvinceDao) MybaitsUitl.getMapper(ProvinceDao.class);
        List<Province> list = pd.selectAll();
        for (Province province : list) {
            System.out.println(province);
        }
    }
}

如图所示：
在这里插入图片描述
15.编写CityDaoMapper.xml的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.txw.action.dao.CityDao">
    <!--根据省级id，查询城市信息-->
    <select id="selectByParentID" resultType="City">
         select * from t_c where parent_id = #{id}
    </select>
</mapper>

如图所示：在这里插入图片描述
16.编写CountyDaoMapper.xml的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.txw.action.dao.CountyDao">
    <!--根据市id，查询县/区信息-->
    <select id="selectByParentID" resultType="County">
         select * from t_x where parent_id = #{id}
    </select>
</mapper>

如图所示：在这里插入图片描述
17.编写ProvinceService 的代码如下：

package com.txw.action.service;

import com.txw.action.entity.Province;
import java.util.List;
/**
 * 省
 * @author:Adair
 * @qq 1578533828@qq.com
 * 2021/9/24 下午 2:42
 */
@SuppressWarnings("all")   // 注解警告信息
public interface ProvinceService {

    /**
     * 查询所有省级信息
     * @return
     */
    public List<Province> queryAll();
}

如图所示：
在这里插入图片描述
18.编写CityService的代码如下：

package com.txw.action.service;

import com.txw.action.entity.City;
import java.util.List;
/**
 * 市
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24 0024 下午 2:46
 */
@SuppressWarnings("all")   // 注解警告信息
public interface CityService {

    /**
     * 根据省级id，查询城市信息
     * @return
     */
    public List<City> queryByParentID(int id);
}

如图所示：在这里插入图片描述在这里插入图片描述

19.编写CountyService的代码如下：

package com.txw.action.service;

import com.txw.action.entity.County;
import java.util.List;
/**
 * 县/区
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24 下午 2:49
 */
@SuppressWarnings("all")   // 注解警告信息
public interface CountyService {

    /**
     * 根据城市id，查询县/区信息
     * @param id
     * @return
     */
    public List<County> queryByParentID(int id);   
}

如图所示：在这里插入图片描述
10.编写ProvinceServiceImpl的代码如下：

package com.txw.action.service.impl;

import com.txw.action.dao.ProvinceDao;
import com.txw.action.entity.Province;
import com.txw.action.service.ProvinceService;
import com.txw.action.uitls.MybaitsUitl;
import java.util.List;
/**
 * 省
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24  下午 2:52
 */
@SuppressWarnings("all")   // 注解警告信息
public class ProvinceServiceImpl implements ProvinceService {

    /**
     * 查询所有省级信息
     * @return
     */
    @Override
    public List<Province> queryAll() {
        ProvinceDao pd = (ProvinceDao) MybaitsUitl.getMapper(ProvinceDao.class);
        return pd.selectAll();
    }
}

如图所示：在这里插入图片描述
20.编写CityServiceImpl的代码如下：

package com.txw.action.service.impl;

import com.txw.action.dao.CityDao;
import com.txw.action.entity.City;
import com.txw.action.service.CityService;
import com.txw.action.uitls.MybaitsUitl;
import java.util.List;
/**
 * 市
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24 下午 2:58
 */
@SuppressWarnings("all")   // 注解警告信息
public class CityServiceImpl implements CityService {

    /**
     * 根据省级id，查询城市信息
     * @param id
     * @return
     */
    @Override
    public List<City> queryByParentID(int id) {
        CityDao cd = (CityDao) MybaitsUitl.getMapper(CityDao.class);
        return cd.selectByParentID(id);
    }
}

如图所示：在这里插入图片描述
21.编写CountyServiceImpl的代码如下：

package com.txw.action.service.impl;

import com.txw.action.dao.CountyDao;
import com.txw.action.entity.County;
import com.txw.action.service.CountyService;
import com.txw.action.uitls.MybaitsUitl;
import java.util.List;
/**
 * 县/区
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24  下午 3:03
 */
@SuppressWarnings("all")   // 注解警告信息
public class CountyServiceImpl implements CountyService {

    /**
     * 根据城市id，查询县/区信息
     * @param id
     * @return
     */
    @Override
    public List<County> queryByParentID(int id) {
        CountyDao cd = MybaitsUitl.getMapper(CountyDao.class);
        return cd.selectByParentID(id);
    }
}

如图所示：在这里插入图片描述
22.编写CityAction的代码如下：

package com.txw.action;

import com.alibaba.fastjson.JSONObject;
import com.txw.action.entity.City;
import com.txw.action.entity.County;
import com.txw.action.entity.Province;
import com.txw.action.service.CityService;
import com.txw.action.service.CountyService;
import com.txw.action.service.ProvinceService;
import com.txw.action.service.impl.CityServiceImpl;
import com.txw.action.service.impl.CountyServiceImpl;
import com.txw.action.service.impl.ProvinceServiceImpl;
import org.apache.struts2.ServletActionContext;

import javax.servlet.http.HttpServletResponse;
import java.util.List;
/**
 * @author Adair
 * @qq 1578533828@qq.com
 * 2021/9/24  下午 3:08
 */
@SuppressWarnings("all")   // 注解警告信息
public class CityAction {

    private int id; // 接收数据

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    /**
     * 查询所有省级信息
     * @return
     * @throws Exception
     */
    public String queryAllProvince() throws Exception {
        ProvinceService ps = new ProvinceServiceImpl();
        List<Province> provinces = ps.queryAll();
        String jsonString = JSONObject.toJSONString(provinces);
        // 通过响应，回传省份信息
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        response.getWriter().print(jsonString);
        return null;
    }

    /**
     * 根据省级id，查询城市信息
     * @return
     * @throws Exception
     */
    public String queryByProvinceId() throws Exception {
        CityService cs = new CityServiceImpl();
        List<City> cities = cs.queryByParentID(id);
        String jsonString = JSONObject.toJSONString(cities);
        // 通过响应，回传省份信息
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        response.getWriter().print(jsonString);
        return null;
    }

    /**
     * 根据城市id，查询县/区信息
     * @return
     * @throws Exception
     */
    public String queryByCityId() throws Exception {
        CountyService cs = new CountyServiceImpl();
        List<County> counties = cs.queryByParentID(id);
        String jsonString = JSONObject.toJSONString(counties);
        // 通过响应，回传省份信息
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        response.getWriter().print(jsonString);
        return null;
    }
}

如图所示：在这里插入图片描述
23.编写struts.xml的代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
        "-//Apaxche Software Foundation//DTD Struts Configuration 2.5//EN"
        "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
    <package name="user" extends="struts-default" namespace="/user">
        <action name="queryAll" class="com.txw.action.UserAction" method="queryAll"></action>
    </package>


    <package name="city" extends="struts-default" namespace="/city">
        <action name="queryAllProvince" class="com.txw.action.CityAction" method="queryAllProvince"></action>
        <action name="queryByProvinceId" class="com.txw.action.CityAction" method="queryByProvinceId"></action>
        <action name="queryByCityId" class="com.txw.action.CityAction" method="queryByCityId"></action>
    </package>
</struts>

如图所示：在这里插入图片描述
通过浏览器访问：http://localhost:8080/city.jsp，如图所示：在这里插入图片描述

学无止路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ajax-utils:用于 jQuery ajax 的包装器
06-18
ajax-utils 我们经常使用ajax函数。 但这有点痛苦。 $.ajax({ type: 'POST', // some parameters success: function () { // when success }, error: function () { // when error }, complete: function () { // always } }); AjaxUtils 使您能够编写简单的代码。 var params = { // some parameters for jQuery.ajax // You don't have to write "type", "sucess", "error" or "complete" } AjaxUtils.post(params, fun
utils.ajax,Ajax的工具类AjaxUtils，使用struts返回Json类型
weixin_29230901的博客
08-06 378
public class AjaxUtil {/*** ajax response method* 如果出现异常，则返回错误代码505** @param response* @param text* ajax返回的内容**/public static void ajaxResponse(HttpServletResponse response, String text) {try {respons...
JavaScript 学习笔记（八）前后端交互；Ajax进行前后端交互
小张小张的博客
03-18 9752
目录 一、前后端 二、前后端接口 三、Ajax 1. ajax接口步骤 2. 返回为json格式 四、请求方式 五、案例：登录 一、前后端 前端：用户可以看见的界面，我们一般浏览网页时看到的界面，展现网页数据给用户看的地方。 后端：要将前端的数据存储到数据库中，并且把数据库的数据传递给前端。 数据库：存储数据的地方。 前后端交互：前端将数据传递给服务端，并且能够从服务端接收到返回的数据的过程。 二、前后端接口 前端与后端进行数据交互的统称， 也叫做数据接口，指前端通过HTTP..
封装过的Ajax工具类库AjaxUtil.js
10-09 796
封装过的Ajax工具类库AjaxUtil.js  可以500%提高开发效率的前端UI框架！ .代码   var AjaxUtil = {               // 基础选项       options : {           method : "get", // 默认提交的方法,get post           url : "", // 请求的
AJAX异步同步
空空行者
07-04 1303
为了更好的用户体验，AJAX的异步同步技术给了我们一个很好的用户体验下面是我做的一个例子。        1、客户端处理        UserId.HTML  function validate(field){ //创建XML var xmlHttp; if(window.XMLHttpRequest){ xmlHttp=new XMLHt
Ajax使用示例
12-07
在本项目中，“Ajax使用示例”提供了一个完整的Ajax应用实例，帮助开发者更好地理解和运用Ajax。 1. **Ajax的基本原理**：Ajax的核心是XMLHttpRequest对象，它允许JavaScript在不刷新整个页面的情况下与服务器进行...
Ajax（Ajax使用js包）
02-27
使用Ajax实现从服务器读取数据，包括Ajax实现的详细步骤
ThinkPHP中ajax使用实例教程
10-25
主要介绍了ThinkPHP中ajax使用, 是ThinkPHP开发中非常实用的技巧,需要的朋友可以参考下
jQuery Ajax使用实例
10-24
主要介绍了jQuery Ajax使用实例,本文讲解了$.ajax的一般格式、$.ajax的参数描述、$.ajax需要注意的一些地方、$.ajax我的实际应用例子,需要的朋友可以参考下
前端网络——Ajax使用
01-08
这是开发者已经订好的规则，我们只要记住固定的代码，就可以使用，只是这个固定的代码片段有点长而已 开始了,下面这一堆就是规定的代码： function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {//...
ajaxUtil.js
02-09
同域中,通过ajax发出异步和同步请求的工具方法方法
utils.ajax,ajax小工具ajaxutils.js
weixin_33379297的博客
08-06 352
ajaxutils.js页面//创建request对象function createXMLHttpRequest(){try{return new XMLHttpRequest(); //大多数浏览器}catch(e){try{return ActvieXobject("Msxml2.XMLHTTP"); //ie6}catch(e){try{return ActiveXOBject("Micr...
ajax小工具ajaxutils.js
这个队友很拉风
10-26 1615
ajaxutils.js页面 //创建request对象 function createXMLHttpRequest(){      try{          return new XMLHttpRequest(); //大多数浏览器      }catch(e){         try{              return ActvieXobject("Msxml2.XMLHTTP")...
ajaxutils.js
sagahu0359的专栏
12-16 717
/* =========================================================== 模块说明：对于Ajax操作的一些补充功能 charset：gb2312 调用模块： 搜集整理：sagahu@163.com 最后修订：2011-12-06 */ // 根据实际的浏览器类型，智能创建XMLHttpRequest对象。 function cre
ajax-utils：打包ajax生成小工具
刘伟佳的博客
02-21 489
ajaxutils 我们要写一个js文件，作为我们的ajax工具包。我们一些常用的操作我们都把它放在里面，形成函数。 1. 生成xmlHttpRequest 首先就是生成xmlHttpRequest的方法，这个我们以前写过很多次了，拿过来复制进去，就可以了。 // 创建异步对象 function createXMLHttpRequest() { try { return new XMLHtt...
utils.ajax,ajaxUtils.js
weixin_35577004的博客
08-06 206
该楼层疑似违规已被系统折叠隐藏此楼查看此楼var Ajax = { createXHR:function(){if(window.XMLHttpRequest){var xhr = new XMLHttpRequest();return xhr;}else if(window.ActiveXObject){var xhr = new ActiveXObject("Microsoft.XML...
vue项目工具文件utils.js
热门推荐
Ajaxguan的博客
04-13 1万+
import Vue from 'vue'import XLSX from 'xlsx'/** * 图片预览方法 * 已注入所有Vue实例， * template模板里调用 $imgPreview(src) * 组件方法里调用 this.$imgPreview(src) */const imgPreview = (src) =&gt; { let div = document.createEle...
Ajax的工具类AjaxUtils，使用struts返回Json类型
Andyの笔记
12-25 3221
public class AjaxUtil { /** * ajax response method * 如果出现异常，则返回错误代码505 * * @param response * @param text * ajax返回的内容 * */ public static void ajaxResponse(HttpServletResponse respo
ajax next()执行顺序,ajax调用后的slimbox，使用next / previous函数
weixin_42361608的博客
08-06 282
在使用AJAX调用动态加载内容后，我正试图让下一个/上一个按钮与SLIMBOX库一起使用。$(document).ready(function() {$('.content_box').hide();$('.sf-menuUP a').click(function(){$('.content_box').fadeIn('slow');});var hash = window.location.ha...
fieldIndex on a Row without schema is undefined
最新发布
SunnyRivers
08-02 82
这种情况可能是因为第一次 flatMap 操作改变了原始 Dataset 的结构或类型，导致后续的操作失去了原有的 schema 信息。为了解决这个问题，你需要确保在 flatMap 中处理的数据仍然保持有 schema 信息。有些bug网络上可能没有对应的解决方式，不同是spark版本可能遇到不同的问题，我们可以根据给出的异常提示进行不同的尝试。明显能打印出schema信息，下面去尝试解决这个问题。我们直译一下大概就是你用row.getAs(“字段名”)的时候代码根本不清楚你这个row里面有哪些字段。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学无止路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值