devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端动态显示mysql_mysql数据库前端展示

作者：花生_TL007 | 2024-04-15 06:17:56

赞

踩

mysql数据库前端展示

java web 前端动态显示mysql

1.说明

前端html页面, 使用axios(ajax的封装), 显示mysql的内容, 包括增删改查

2.使用的jar包

在这里插入图片描述

3.java类与代码

ProductDao

package com.huawei.dao;

import com.huawei.util.DBUtils;
import com.huawei.vo.Product;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

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

/**
 * @avthor HuangJun
 * @date 2022/4/29 14:14
 */

public class ProductDao {
    private QueryRunner queryRunner = null;

    public ProductDao() {
        queryRunner = new QueryRunner(DBUtils.getDataSource());
    }

    public List<Product> getProductAll() {
        List<Product> products = null;
        String sql = "select * from product";
        try {
            products = queryRunner.query(sql, new BeanListHandler<>(Product.class));
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return products;
    }

    /**
     * 新增
     * @param pro
     * @return
     */
    public boolean addProduct(Product pro) {
        boolean flag = false;
        String sql = "insert into product (pcode,title,price,putTime,pnum,cid) values(?,?,?,now(),?,10001)";
        try {
            int n = queryRunner.update(sql, pro.getPcode(), pro.getTitle(), pro.getPrice(), pro.getPnum());
            flag = n >= 1 ? true : false;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return flag;
    }

    /**
     * 修改
     * @param pro
     * @return
     */
    public boolean updateProduct(Product pro) {
        boolean flag = false;
            String sql = "update product set pcode=?,title=?,price=?,pnum=? where pcode="+pro.getCode();
            try {
                int n = queryRunner.update(sql, pro.getPcode(), pro.getTitle(), pro.getPrice(), pro.getPnum());
                flag = n >= 1 ? true : false;
            } catch (SQLException e) {
                e.printStackTrace();
            }
            return flag;
    }

    /**
     * 删除
     * @param pro
     * @return
     */
    public boolean delProduct(Product pro) {
        boolean flag = false;
        String sql = "delete  from product where pcode=?";
        try {
            int n = queryRunner.update(sql, pro.getPcode());
            flag = n >= 1 ? true : false;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return flag;
    }
}

  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84

AddProductServlet

package com.huawei.servlet;

import com.alibaba.fastjson.JSON;
import com.huawei.dao.ProductDao;
import com.huawei.vo.Product;

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.BufferedReader;
import java.io.IOException;

/**
 * 添加商品数据
 * @avthor HuangJun
 * @date 2022/4/29 15:32
 */
@WebServlet(value = "/addPro.do")
public class AddProductServlet extends HttpServlet {

    private ProductDao productDao = new ProductDao();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/json;charset=utf-8");
        //接收的是一个json数据
        BufferedReader br = req.getReader();//读取器
        String paJson = br.readLine();
        //将json字符串转对象
        Product product = JSON.parseObject(paJson, Product.class);
        //调用到方法
        if (productDao.addProduct(product)) {
            resp.getWriter().write("success");
        } else {
            resp.getWriter().write("error");
        }
    }

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

  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

DelProductServlet

package com.huawei.servlet;


import com.huawei.dao.ProductDao;
import com.huawei.vo.Product;

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;

/**
 * 删除数据
 * @avthor HuangJun
 * @date 2022/4/29 16:18
 */
@WebServlet(value = "/delPro.do")
public class DelProductServlet extends HttpServlet {
    private ProductDao productDao = new ProductDao();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        //接收的是一个json数据

        String code=req.getParameter("code");
        Product product = new Product();
        product.setPcode(Integer.parseInt(code));
        //调用到方法
        if (productDao.delProduct(product)) {
            req.getRequestDispatcher("/productList.html").forward(req,resp);
        }
    }

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

  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

UpdateProductServlet

package com.huawei.servlet;

import com.alibaba.fastjson.JSON;
import com.huawei.dao.ProductDao;
import com.huawei.vo.Product;

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.BufferedReader;
import java.io.IOException;

/**
 * 更新数据
 * @avthor HuangJun
 * @date 2022/4/29 16:35
 */
@WebServlet(value = "/toEdit.do")
public class UpdateProductServlet extends HttpServlet {

    private ProductDao productDao = new ProductDao();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        //接收的是一个json数据
        BufferedReader br = req.getReader();//读取器
        String paJson = br.readLine();
        System.out.println(paJson);
        //将json字符串转对象
            Product product = JSON.parseObject(paJson, Product.class);

        //调用到方法
        if (productDao.updateProduct(product)) {
            resp.getWriter().write("success");
//            req.getRequestDispatcher("/productList.html").forward(req,resp);
        } else {
            resp.getWriter().write("error");
        }
    }

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

  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

ProductServlet

package com.huawei.servlet;

import com.alibaba.fastjson.JSON;
import com.huawei.dao.ProductDao;
import com.huawei.vo.Product;

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.List;

/**
 * @avthor HuangJun
 * @date 2022/4/29 14:23
 */
@WebServlet(value = "/productList.do")
public class ProductServlet extends HttpServlet {
    private ProductDao productDao = new ProductDao();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Product> products = productDao.getProductAll();
        //将集合数据转为json
        String jsonStr = JSON.toJSONString(products);
        //将json数据响应到客户端
        resp.setContentType("text/json;charset=utf-8");
        resp.getWriter().println(jsonStr);
    }

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

  • 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
  • 35
  • 36
  • 37

DBUtils

package com.huawei.util;



import com.alibaba.druid.pool.DruidDataSource;

import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.*;
import java.util.Properties;

/**
 * Jdbc工具类[加入事务控制+线程+Druid连接池]
 * @avthor HuangJun
 * @date 2022/3/30 10:36
 */

public class DBUtils {
    static  String USER = null;
    static  String USER_PASS = null;
    static  String DB_URL = null;
    static  String DRIVER_CLASS =null;
    //容器变量      [ThreadLocal用于隔离多线程并发 产生的数据混乱]
    private  static ThreadLocal<Connection> local=new ThreadLocal<>();
    private static DataSource dataSource;

    /**
     * 静态代码块加载属性配置文件
     */
    static {
        Properties config=new Properties();
        try {
            //找到文件
            InputStream is= DBUtils.class.getResourceAsStream("/db.properties");
            //并读取到内存
            config.load(is);
            //读取属性数据的key
            DRIVER_CLASS =config.getProperty("jdbc.driverClassName");
            //初始化Durid连接池数据
            DruidDataSource dds=new DruidDataSource();
            dds.configFromPropety(config);//加载属性文件到数据源对象
            dataSource = dds;
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

        public static DataSource getDataSource(){
            return dataSource;
        }

    /**
     * 注册驱动
     */
    static {
        try {
            Class.forName(DRIVER_CLASS);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    public static Connection getConn(){
        if (local.get()==null){// 当前线程是否有连接对象
            Connection conn=null;
            try {
//                conn= DriverManager.getConnection(DB_URL,USER,USER_PASS);
                conn=dataSource.getConnection();
                local.set(conn);//放入当前线程对象中

            }catch (Exception e){
                e.printStackTrace();
            }
//            return conn;
        }
        return local.get();
    }

    /**
     *
     * @throws Exception
     */
    public static void beginTransaction() throws Exception {
        getConn().setAutoCommit(false);
    }

    /**
     * 提交事务
     */
    public static void commit(){
        try {
            getConn().commit();
        }catch (SQLException throwables){
            throwables.printStackTrace();
        }
    }

    /**
     * 回滚
     */
    public static void rollback(){
        try {
            getConn().rollback();
        }catch (SQLException throwables){
            throwables.printStackTrace();
        }
    }



    public static Connection getConn(String DB_URL){
        Connection conn=null;
        try {
            conn= DriverManager.getConnection(DB_URL,USER,USER_PASS);
        }catch (Exception e){
            e.printStackTrace();
        }
        return conn;
    }

    public static void close(Connection conn,Statement stmt,ResultSet rs){
        if (rs!=null){
            try {
                rs.close();
            }catch (Exception e){
                e.printStackTrace();
            }
        }
        if (stmt!=null){
            try {
                stmt.close();
            }catch (Exception e){
                e.printStackTrace();
            }
        }

        if (conn!=null){
            try {
                conn.setAutoCommit(true);
                conn.close();
                local.remove();
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }

    /**
     * 通用的DML sql语句执行方法
     * @param sql
     * @param params
     * @return
     */
    public static int update(String sql,Object... params) throws Exception {
        int result=0;
        Connection conn=getConn();
       PreparedStatement psmt= conn.prepareStatement(sql);
        //获取参数化SQL中的? 个数
       int count=psmt.getParameterMetaData().getParameterCount();
       if (count !=params.length){
           return -1;
       }
       //遍历参数个数 从动态数组中取出
        for (int i=1;i<=count;i++){
            psmt.setObject(i,params[i-1]);
        }
        //执行sql语句
        result=psmt.executeUpdate();
        close(conn,psmt,null);
        return result;
    }

    /**
     * 查询方法
     * @param sql
     * @param params
     * @return
     * @throws Exception
     */
    public static ResultSet query(String sql,Object... params) throws Exception {
        ResultSet result=null;
        Connection conn=getConn();
        PreparedStatement psmt= conn.prepareStatement(sql);
        //获取参数化SQL中的? 个数
        int count=psmt.getParameterMetaData().getParameterCount();
        if (count !=params.length){
            return null;
        }
        //遍历参数个数 从动态数组中取出
        for (int i=1;i<=count;i++){
            psmt.setObject(i,params[i-1]);
        }
        //执行sql语句
        result=psmt.executeQuery();
        return result;
    }
}

  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198

Product

package com.huawei.vo;

/**
 * 各个属性对应mysql的字段
 * @avthor HuangJun
 * @date 2022/4/29 14:07
 */

public class Product {
    private int code;
    private int pcode;
    private String title;
    private String pimg;
    private double price;
    private String putTime;
    private String description;
    private int pnum;
    private int cid;


    public Product() {
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public int getPcode() {
        return pcode;
    }

    public void setPcode(int pcode) {
        this.pcode = pcode;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getPimg() {
        return pimg;
    }

    public void setPimg(String pimg) {
        this.pimg = pimg;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public String getPutTime() {
        return putTime;
    }

    public void setPutTime(String putTime) {
        this.putTime = putTime;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public int getPnum() {
        return pnum;
    }

    public void setPnum(int pnum) {
        this.pnum = pnum;
    }

    public int getCid() {
        return cid;
    }

    public void setCid(int cid) {
        this.cid = cid;
    }

    @Override
    public String toString() {
        return "Product{" +
                "pcode=" + pcode +
                ", title='" + title + '\'' +
                ", pimg='" + pimg + '\'' +
                ", price=" + price +
                ", putTime='" + putTime + '\'' +
                ", description='" + description + '\'' +
                ", pnum=" + pnum +
                ", cid=" + cid +
                '}';
    }
}

  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109

db.properties

jdbc.url=jdbc:mysql://localhost:3306/hwmall?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&useSSL=false
jdbc.username=root
jdbc.password=123456
jdbc.driverClassName=com.mysql.cj.jdbc.Driver

druid.url=jdbc:mysql://localhost:3306/hwmall?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&useSSL=false
druid.username=root
druid.password=123456
druid.driverClassName=com.mysql.cj.jdbc.Driver
druid.maxActive=8
druid.maxWait=5000

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

productList.html

前端显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <script type="text/javascript" src="js/axios-v0.27.2.js"></script>
</head>
<body>
<a href="addProduct.html">添加商品</a>
<h3>商品列表</h3>
<table id="proTable" border="1" cellpadding="0" width="100%">
    <tr>
        <td>商品编号</td>
        <td>商品名称</td>
        <td>商品价格</td>
        <td>上架时间</td>
        <td>商品数量</td>
        <td>操作</td>
    </tr>
</table>
<script>
    //当页面加载完成后  发送Ajax请求 异步刷新表格
    window.onload = function () {
        //使用Axios框架发送请求
        axios({
            method: "get",
            url: "/productList.do"
        }).then(function (resp) {
            let products = resp.data;
            let tableData = " <tr>\n" +
                "            <td>商品编号</td>\n" +
                "            <td>商品名称</td>\n" +
                "            <td>商品价格</td>\n" +
                "            <td>上架时间</td>\n" +
                "            <td>商品数量</td>\n" +
                "            <td>操作</td>\n" +
                "        </tr>";
            //拼数据行
            for (let i = 0; i < products.length; i++) {
                let pro = products[i];
                tableData += " <tr>\n" +
                    "            <td>" + pro.pcode + "</td>\n" +
                    "            <td>" + pro.title + "</td>\n" +
                    "            <td>" + pro.price + "</td>\n" +
                    "            <td>" + pro.putTime + "</td>\n" +
                    "            <td>" + pro.pnum + "</td>\n" +
                    "            <td><a href='/updateProduct.html?code="+pro.pcode+"'>修改</a></td>\n" +
                    "          <td><a href='/delPro.do?code="+pro.pcode+"'>删除</a></td>\n"
                "        </tr>"
            }
            //将拼接好的字符  放在table的innerHTML内
            document.getElementById("proTable").innerHTML = tableData;
        });
    }
</script>
</body>
</html>

  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

在这里插入图片描述

addProduct.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品添加</title>
    <script type="text/javascript" src="js/axios-v0.27.2.js"></script>

</head>
<body>
<h3>商品添加</h3>
<form action="" method="post">
    商品编号:<input name="proName" id="proName"><br>
    商品名称:<input name="proTitle" id="proTitle"><br>
    商品价格:<input name="proPrice" id="proPrice"><br>
    商品数量:<input name="proNum" id="proNum"><br>
    <input type="button" id="btn" value="提交">
</form>
<script>
    document.getElementById("btn").onclick = function () {
        //将表单数据转为js对象
        var fromData = {
            pcode: "",
            title: "",
            price: "",
            pnum: "",
        }
        //从表单元素中获取数据, 填充到fromData
        fromData.pcode = document.getElementById("proName").value;
        fromData.title = document.getElementById("proTitle").value;
        fromData.price = document.getElementById("proPrice").value;
        fromData.pnum = document.getElementById("proNum").value;
        //使用Axios发送ajax请求
        axios({
            method: "post",
            url: "/addPro.do",
            data: fromData
        }).then(function (result) {
            if (result.data === "success") {
                //跳转到list页面
                location.href = "productList.html";
            } else {
                alert("添加失败!!");
            }
        });
    }

</script>
</body>
</html>

  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

updateProduct.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品修改</title>
    <script type="text/javascript" src="js/axios-v0.27.2.js"></script>

</head>
<body>
<h3>商品修改</h3>
<form action="" method="post">
    原商品编号:<input name="code" id="code" value="默认获取" disabled="true"><br>
    新商品编号:<input name="proName" id="proName"><br>
    商品名称:<input name="proTitle" id="proTitle"><br>
    商品价格:<input name="proPrice" id="proPrice"><br>
    商品数量:<input name="proNum" id="proNum"><br>
    <input type="button" id="btn" value="提交">
</form>
<script>
    //获取code参数值
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    var code =getQueryVariable("code");

    document.getElementById("btn").onclick = function () {
        //将表单数据转为js对象
        var fromData = {
            code:"",
            pcode: "",
            title: "",
            price: "",
            pnum: "",
        }
        //从表单元素中获取数据, 填充到fromData
        fromData.code = document.getElementById("code").value=code;
        fromData.pcode = document.getElementById("proName").value;
        fromData.title = document.getElementById("proTitle").value;
        fromData.price = document.getElementById("proPrice").value;
        fromData.pnum = document.getElementById("proNum").value;
        //使用Axios发送ajax请求
        axios({
            method: "post",
            url: "/toEdit.do",
            data: fromData
        }).then(function (result) {
            if (result.data === "success") {
                //跳转到list页面
                location.href = "/productList.html";
            } else {
                alert("修改失败!!");
            }
        });
    }

</script>
</body>
</html>

  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
    }
    //从表单元素中获取数据, 填充到fromData
    fromData.code = document.getElementById("code").value=code;
    fromData.pcode = document.getElementById("proName").value;
    fromData.title = document.getElementById("proTitle").value;
    fromData.price = document.getElementById("proPrice").value;
    fromData.pnum = document.getElementById("proNum").value;
    //使用Axios发送ajax请求
    axios({
        method: "post",
        url: "/toEdit.do",
        data: fromData
    }).then(function (result) {
        if (result.data === "success") {
            //跳转到list页面
            location.href = "/productList.html";
        } else {
            alert("修改失败!!");
        }
    });
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
```
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/426193
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号