Ajax的编辑修改案例，form表单概念和提交数据，jq序列化，快速获取表单数据，get和post请求，axios简写，上传图片加传送到服务器，拦截器使用加网址

最新推荐文章于 2023-02-21 20:07:35 发布

web老猴子

最新推荐文章于 2023-02-21 20:07:35 发布

阅读量338

点赞数

文章标签： javascript ajax 服务器

本文链接：https://blog.csdn.net/web220507/article/details/124863087

版权

本文通过Ajax技术讲解图书管理系统的编辑功能，包括编辑案例、表单概念、异步提交避免页面刷新，以及如何使用jQuery进行序列化操作。同时介绍axios执行POST请求、文件上传图片至服务器及拦截器的使用。

摘要由CSDN通过智能技术生成

1.图书管理-编辑

就是点一下编辑的时候把需要编辑的数据渲染到编辑框内

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>02-编辑</title>

    <style> body {
            height: 100vh;
            display: flex;
            justify-content: space-around;
        }

        .left {
            width: 1000px;
        }

        .right {
            flex: 1;
        }

        form {
            width: 90%;
            margin: 0 auto;
            background-color: #eee;
        }

        h3 {
            background-color: brown;
            color: #fff;
            padding: 10px;
        }

        input {
            display: block;
            width: 80%;
            margin: 10px auto;
            height: 50px;
            border-radius: 5px;
            font-size: 25px;
            color: #666;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table {
            width: 800px;
            margin: 0 auto;
        }

        thead tr {
            background-color: blue;
            color: #fff;
            font-size: 20px;
        }

        tbody tr:nth-child(odd) {
            background-color: green;
            color: #fff;
            font-size: 18px;
        }

        tbody tr:nth-child(even) {
            background-color: peru;
            color: #fff;
            font-size: 18px;
        }

        td,
        th {
            padding: 10px;
        }

        input {
            width: 800px;
            display: block;
            margin: 30px auto;
            height: 100px;
            border-radius: 50px;
            border: none;
            background-color: skyblue;
            font-size: 40px;
            text-indent: 20px;
            color: #666;
            outline: none;
        } </style>
</head>

<body>
    <div class="left">
        <input type="text" class="keyword" />
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="right">
        <form>
            <h3>编辑</h3>
            <input type="text" placeholder="书名" class="bookname" />
            <input type="text" placeholder="作者" class="author" />
            <input type="text" placeholder="出版社" class="publisher" />
            <input type="button" value="编辑" class="btnadd" />
        </form>
    </div>
    <script src="../lib/axios.js"></script>
    <script> const tbody = document.querySelector('tbody');
        // 全局变量
        let arr;
        const booknameValue = document.querySelector('.bookname');
        const authorValue = document.querySelector('.author');
        const publisherValue = document.querySelector('.publisher');

        tbody.addEventListener('click', function (event) {
            if (event.target.className === 'editbtn') {
                // 获取a身上的下标
                const { index } = event.target.dataset;
                //  获取到 另外一个方法中的 数组
                console.log(arr[index]);
                // 把对应的数据显示到表单中
                booknameValue.value = arr[index].bookname;
                authorValue.value = arr[index].author;
                publisherValue.value = arr[index].publisher;
            }
        });

        getData();
        // 定义一个方法 发送请求 获取数据  渲染页面
        function getData() {
            axios({
                url: 'http://www.itcbc.com:3006/api/getbooks',
                method: 'get',
                params: {
                    appkey: 'lishupeng123',
                },
            }).then((result) => {
                console.log(result);
                arr = result.data.data;
                const html = arr
                    .map((value, index) => {
                        return `
          <tr>
          <td>${value.id}</td>
          <td>${value.bookname}</td>
          <td>${value.author}</td>
          <td>${value.publisher}</td>
          <td><a class="editbtn" data-index="${index}" href="javascript:;" >编辑</a></td>
        </tr>
          `;
                    })
                    .join('');
                tbody.innerHTML = html;
            });
        } </script>
</body>

</html>

2.图书管理-编辑-完成编辑功能案例

点编辑的时候把需要更改的内容编辑到需要更改的内容中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content=&#

最低0.47元/天解锁文章

web老猴子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫