项目实战：给首页上库存名称添加超链接然后带fid跳转到edit页面

小丁学Java

已于 2023-11-23 23:14:15 修改

阅读量133

点赞数

分类专栏： # Tomcat-Servlet 文章标签：前端 javascript html axios

于 2023-11-02 21:34:44 首次发布

本文链接：https://blog.csdn.net/m0_65152767/article/details/134191305

版权

Tomcat-Servlet 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这个fid是从后端数据库获取到的

1、提取公共方法common.js

function $(key){
    if(key){
        if(key.startsWith("#")){
            key = key.substring(1)
            return document.getElementById(key)
        }else{
            let nodeList = document.getElementsByName(key)
            return Array.from(nodeList)
        }
    }
}

2、给库存名称添加超链接

2.1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/index.css">
    <script src="script/axios.min.js"></script>
    <script src="script/index.js"></script>
    <script src="script/common.js"></script>
</head>
<body>
  <div id="div0">
    <div id="div_title">
      <p>欢迎使用水果库存系统</p>
    </div>
    <div id="div_fruit_table">
      <table id="fruit_tbl">
        <tr>
          <th class="w25">名称</th>
          <th class="w25">单价</th>
          <th class="w25">库存</th>
          <th>操作</th>
        </tr>
        <!--
        <tr>
          <td><a href='edit.html?fid=1'>苹果</a></td>
          <td>5</td>
          <td>100</td>
          <td><img class="delImg" src="imgs/del.png" onclick='delFruit(1)'/></td>
        </tr>
        -->
      </table>
    </div>
  </div>
</body>
</html>

2.2、index.js

window.onload=function(){
    loadData();
}
loadData=function(){
    axios({
        method:'get',
        url:'/index'
    }).then(response=>{
        debugger
        let fruitList = response.data.data
        // 此处使用的是axios，那么响应回来的数据自动就是js对象，
        // 不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)
        // let fruitArr = JSON.parse(fruitList)
        let fruitArr = fruitList
        for(let i = 0 ; i<fruitArr.length; i++){
            let fruitTbl = $("#fruit_tbl")
            let tr = fruitTbl.insertRow()
            let fnameTD = tr.insertCell()
            let priceTD = tr.insertCell()
            let fcountTD = tr.insertCell()
            let operTD = tr.insertCell()

            let fruit = fruitArr[i]
            //fnameTD.innerText = fruit.fname
            fnameTD.innerHTML = '<a href="edit.html?fid='+fruit.fid+'">'+fruit.fname+'</a>';
            priceTD.innerText = fruit.price
            fcountTD.innerText = fruit.fcount
            operTD.innerHTML="<img class=\"delImg\" src=\"imgs/del.png\"/>"
        }
    })
}

3、创建编辑水果库存页面edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/index.css">
    <script src="script/axios.min.js"></script>
    <script src="script/edit.js"></script>
    <script src="script/common.js"></script>
</head>
<body>
<div id="div0">
    <div id="div_title">
        <p>编辑水果库存信息</p>
    </div>
    <div id="div_fruit_table">
        
        <table id="fruit_tbl">
            <tr>
                <th class="w25">名称:</th>
                <td><input type="text" id="fname"/></td>
            </tr>
            <tr>
                <th class="w25">单价:</th>
                <td><input type="text" name="price" id="price"/> </td>
            </tr>
            <tr>
                <th class="w25">库存:</th>
                <td><input type="text" name="fcount" id="fcount"/> </td>
            </tr>
            <tr>
                <th class="w25">备注:</th>
                <td><input type="text" name="remark" id="remark"/> </td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="button" value="修改" onclick="update()"/>
                    <input type="button" value="取消"/>
                </th>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

4、获取URL参数中的queryString查询字符串edit.js

let queryString = window.location.search.substring(1)

小丁学Java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目实战：给首页上库存名称添加超链接然后带fid跳转到edit页面

获取URL参数中的queryString代码：let queryString = window.location.search.substring(1)。//axios会自动将响应的数据解析为js对象，所以不需要手动将json字符串解析为js对象 //此处使用的是axios，那么响应回来的数据自动就是js对象 //不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)
复制链接

扫一扫