北京市雨量监测信息管理(使用ajax实现)

代码如下:

 

pojo包(实体类):

pojo

package pojo;

public class RainManage {


    public RainManage() {
        super();
    }

    public RainManage(int count, int id, String districtName, String monitorTime, int rain, String monitoringStation, String monitoringAddress) {
        this.count = count;

    }

    private int count;
    private int id;

    private String districtName;

    private String monitorTime;

    private int rain;

    private String monitoringStation;

    private String monitoringAddress;

    public int getId() {
        return id;
    }

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

    public String getDistrictName() {
        return districtName;
    }

    public void setDistrictName(String districtName) {
        this.districtName = districtName;
    }

    public String getMonitorTime() {
        return monitorTime;
    }

    public void setMonitorTime(String monitorTime) {
        this.monitorTime = monitorTime;
    }

    public int getRain() {
        return rain;
    }

    public void setRain(int rain) {
        this.rain = rain;
    }

    public String getMonitoringStation() {
        return monitoringStation;
    }

    public void setMonitoringStation(String monitoringStation) {
        this.monitoringStation = monitoringStation;
    }

    public String getMonitoringAddress() {
        return monitoringAddress;
    }

    public void setMonitoringAddress(String monitoringAddress) {
        this.monitoringAddress = monitoringAddress;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    @Override
    public String toString() {
        return "RainManage{" +
                "count=" + count +
                ", id=" + id +
                ", districtName='" + districtName + '\'' +
                ", monitorTime='" + monitorTime + '\'' +
                ", rain=" + rain +
                ", monitoringStation='" + monitoringStation + '\'' +
                ", monitoringAddress='" + monitoringAddress + '\'' +
                '}';
    }
}

servlet(响应层): 三个 addServlet 、Servlet 、delectServlet

addServlet：

addServlet

package com.web.servlet;

import com.google.gson.Gson;
import dao.Test;
import pojo.Demo;
import pojo.RainManage;
import service.RainManageService;
import service.RainManageServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/add")
public class addServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("是否发送请求....dsgreystyg");
        resp.setContentType("text/html;charset=UTF-8");
        RainManageService rainManageService = new RainManageServiceImpl();
        RainManage rainManage = new RainManage();
        String name = req.getParameter("name");
        String date = req.getParameter("date");
        String rainfall1 = req.getParameter("rainfall");
        Integer rainfall = new Integer(rainfall1);
        String jc = req.getParameter("jc");
        String address = req.getParameter("address");
        rainManage.setDistrictName(name);
        rainManage.setMonitorTime(date);
        rainManage.setRain(rainfall);
        rainManage.setMonitoringStation(jc);
        rainManage.setMonitoringAddress(address);

        Gson gson = new Gson();
        int count = rainManageService.add(rainManage);
        rainManage.setCount(count);
        System.out.println(gson.toJson(rainManage));
        resp.getWriter().println(gson.toJson(rainManage));
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

Servlet :

Servlet

package com.web.servlet;

import com.google.gson.Gson;

import pojo.Demo;
import pojo.RainManage;
import service.RainManageService;
import service.RainManageServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("是否进入请求。。。");
        resp.setContentType("text/html;charset=UTF-8");
        Gson gson = new Gson();
        RainManage rainManage = new RainManage();
        RainManageService rainManageService = new RainManageServiceImpl();
        List<RainManage> list = new ArrayList<RainManage>();
        list = rainManageService.getList();
        System.out.println(gson.toJson(list));
        resp.getWriter().println(gson.toJson(list));


    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       this.doGet(req,resp);
    }
}

delectServlet:

delectServlet

package com.web.servlet;

import service.RainManageService;
import service.RainManageServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/delect")
public class delectServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");

        RainManageService rainManageService = new RainManageServiceImpl();

        String data = req.getParameter("data");
        Integer integer = new Integer(data);
        int delect = rainManageService.delect(integer);

        System.out.println(delect);

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       this.doGet(req,resp);
    }
}

Dao层: BaseDao层JDBC等省略

RainManageDao:

RainMangeDao

RainManageDaoImpl:

RainMangeDaoImpl

package dao;

import pojo.RainManage;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class RainManageDaoImpl extends BaseDao implements RainManageDao{
    /**
     * 1、编写查询方法，查询所有雨量监测信息，查询结果按照监测时间倒序排列
     *
     */
    public List<RainManage> getList() throws SQLException {
        List<RainManage> rainManageList = new ArrayList<RainManage>();
        RainManage rainManage = null;
        String sql = "SELECT * FROM rain";
        Object [] objs = {};
        ResultSet rs = this.executeSQL(sql, objs);
        while(rs.next()){
            rainManage = new RainManage();
            rainManage.setId(rs.getInt("id"));
            rainManage.setDistrictName(rs.getString("districtName"));
            rainManage.setMonitoringAddress(rs.getString("monitoringAddress"));
        rainManage.setMonitoringStation(rs.getString("monitoringStation"));
        rainManage.setMonitorTime(rs.getString("monitorTime"));
        rainManage.setRain(rs.getInt("rain"));
        rainManageList.add(rainManage);

        }
        this.closeResource();
        return rainManageList;
    }
    /**
     * 2、编写添加方法，新增雨量监测信息
     *
     */
    public int add(RainManage rainManage) {
        int count = 0;
        String sql = "INSERT INTO rain(id,districtName,monitorTime,rain,monitoringStation,monitoringAddress) VALUES(?,?,?,?,?,?);";
        Object[] objs = {rainManage.getId(),
                rainManage.getDistrictName(),
                rainManage.getMonitorTime(),
                rainManage.getRain(),
                rainManage.getMonitoringStation(),rainManage.getMonitoringAddress()};
        count += this.executeUpdate(sql, objs);

        this.closeResource();
        return count;

    }

    /**
     *   * 3、编写删除方法，删除指定的雨量监测信息
     */
    public int delect(int id) {
        int result = 0;
        String sql = "DELETE FROM rain WHERE id=?";
        Object [] objs = {id};
        result = this.executeUpdate(sql, objs);
        this.closeResource();
        return result;
    }

    public static void main(String[] args) {
        RainManageDao rainManageDao = new RainManageDaoImpl();

    }
}

Service层:

RainManageService:

RainManageService

package service;

import pojo.RainManage;

import java.util.List;

public interface RainManageService {
    /**
     * 1、编写查询方法，查询所有雨量监测信息，查询结果按照监测时间倒序排列
     *
     */
    List<RainManage> getList();

    /**
     * 2、编写添加方法，新增雨量监测信息
     *
     */
    int add(RainManage rainManage);

    /**
     *   * 3、编写删除方法，删除指定的雨量监测信息
     */
    int delect(int id);
}

 

RainManageServiceImpl:

RainMangeServiceImpl

package service;

import dao.RainManageDao;
import dao.RainManageDaoImpl;
import pojo.RainManage;

import java.sql.SQLException;
import java.util.List;

public class RainManageServiceImpl implements RainManageService{
    private static final RainManageDao rainManageDao = new RainManageDaoImpl();
    public List<RainManage> getList() {
        List<RainManage> list = null;
        try {
            list = rainManageDao.getList();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }

    public int add(RainManage rainManage) {
        int count = rainManageDao.add(rainManage);

        return count;
    }

    public int delect(int id) {
        int result = 0;
        result = rainManageDao.delect(id);
        return result;
    }

//    public static void main(String[] args) {
//        RainManageService rainManageService = new RainManageServiceImpl();
//
//        int delect = rainManageService.delect(10);
//        System.out.println(delect>0?"删除成功!":"删除失败");
//    }
}

 

Web方面: 两个 index.jsp、add.jsp

index.jsp:

index.jsp

<%@ page import="dao.BaseDao" %><%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2019/10/18
  Time: 17:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

        function x(data) {
            // alert("aaaa")
            $.ajax(
                {
                    "url": "delect",//要提交的url路径
                    "type": "get",     // 发送的请求方法
                    "data": "data=" + data,  // 要发送到服务器的数据
                    "dataType": "text",   // 指定返回的数据格式
                    // "success": callBack,    //响应成功后要执行的代码
                    "success": function(data){

                        confirm("确定还是取消")
                    },
                    "error": function () {  // 请求失败后要执行的代码
                        alert("用户名验证时出现错误，请稍后再试或与管理员联系！");
                    }
                });
        }
        $(function () {
            // alert("aaaa")

            $.ajax(
                {
                    "url": "Servlet",//要提交的url路径
                    "type": "get",     // 发送的请求方法
                    "data": "userName=" + Math.random(),  // 要发送到服务器的数据
                    "dataType": "json",   // 指定返回的数据格式
                    "success": callBack,    //响应成功后要执行的代码
                    // "success": function(data){
                    //     // document.getElementById("b").innerHTML = data;
                    //     // $("#b").html(data.id+"<br/>"+data.name);
                    //     alert(data.id>0?"添加成功":"添加失败")
                    // },
                    "error": function () {  // 请求失败后要执行的代码
                        alert("用户名验证时出现错误，请稍后再试或与管理员联系！");
                    }
                });
            function callBack(data) {
                // alert(data)
                var trs = "<tr style='background-color: dimgray'><td>序号</td><td>区域名称</td><td>监测时间</td><td>雨量值</td><td>监测站</td><td>站点地址</td><td>操作</td></tr>";
                $.each(data,function (i,val) {

                    if (i%2==0){
                        trs += "<tr><td>"+data[i].id+"</td><td>"+data[i].districtName+
                            "</td><td>"+data[i].monitorTime+"</td><td>"+data[i].rain+
                            "</td><td>"+data[i].monitoringStation+"</td><td>"+data[i].monitoringAddress
                            +"</td><td><a href='javascript:x("+(i+1)+")'>删除</a></td></tr>";

                    }else {
                        trs += "<tr style='background-color: dimgray'><td>"
                            +data[i].id+"</td><td>"+data[i].districtName
                            +"</td><td>"+data[i].monitorTime+"</td><td>"
                            +data[i].rain+"</td><td>"+data[i].monitoringStation+"</td><td>"+data[i].monitoringAddress+"</td><td><a href='javascript:x("+(i+1)+")'>删除</a></td></tr>";

                    }
                })

                $("#b").html(trs);
            }

        })
    </script>

</head>
<body>

<table id="b"border="1"width="300px"></table>

<a href="add.jsp">添加</a>
<%--<div id="b"></div>--%>

</body>
</html>

 

add.jsp:

add.jsp

<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2019/10/19
  Time: 9:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加信息页面</title>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <style>
            span{
                color: red;
            }
        </style>

        <script>
            $(function () {

                $("#bto").click(function () {
                    var serializeArray = $("#a").serialize();
                    alert(serializeArray);
                    $.ajax(
                        {
                            "url": "add",//要提交的url路径
                            "type": "get",     // 发送的请求方法
                            "data": serializeArray,  // 要发送到服务器的数据
                            "dataType": "json",   // 指定返回的数据格式
                            // "success": callBack,    //响应成功后要执行的代码
                            "success": function(data){
                                // document.getElementById("b").innerHTML = data;
                                // $("#b").html(data);
                                // alert(data.count>0?"添加成功!":"添加失败")
                                alert("添加成功");
                            },
                            "error": function () {  // 请求失败后要执行的代码
                                alert("用户名验证时出现错误，请稍后再试或与管理员联系！");
                            }
                        });
                })

            })
        </script>
    </head>
<body>

<form id="a">
    <table align="center"border="1px"width="300px">
        <tr><td>
            <h3>新增雨量监测信息</h3>
        </td></tr>

        <tr><td>

            区域名称: &nbsp;&nbsp; <input type="text"name="name"id="name"/> <span>*</span> <br/><br/>

            监测时间: &nbsp;&nbsp; <input type="date"name="date"id="date"/> <span>*</span> <br/><br>

            雨量(mm): &nbsp;&nbsp; <input type="text"name="rainfall"id="rainfall"/> <span>*</span> <br/><br>

            监测站:   &nbsp;&nbsp; <input type="text"name="jc"id="jc">  <span>*</span> <br/><br/>

            站点地址: &nbsp;&nbsp; <input type="text"name="address"id="address"/> <span>*</span><br/><br/>

            <button id="bto">按钮</button>
        </td></tr>
    </table>
</form>
</body>
</html>

 

MYSQL:

 

 

 

实现效果: