Ajax - 案例 - 英雄信息列表

最新推荐文章于 2023-02-24 00:11:02 发布
最新推荐文章于 2023-02-24 00:11:02 发布
阅读量447 收藏 3
点赞数
分类专栏： 案例 文章标签： ajax html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Henry_ID/article/details/120112555
版权

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>我们的68-英雄管理</title>
        <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
        <style>
            .panel {
                width: 900px;
                margin: 10px auto;
            }

            .table img {
                width: 40px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="panel panel-primary">
                <div class="panel-heading">英雄列表管理</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" id="hname" class="form-control" placeholder="输入英雄信息..." autocomplete="true" />
                                <span class="input-group-btn">
                                    <button class="btn btn-default" id="btn_search" type="button">搜索</button>
                                </span>
                            </div>
                        </div>

                        <div class="col-lg-3 col-lg-offset-3">
                            <button type="button" class="btn btn-success openDialog" data-toggle="modal" data-target="#addHeroModal">添加英雄</button>
                        </div>
                    </div>
                </div>

                <table class="table">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>英雄名称</th>
                            <th>英雄性别</th>
                            <th>头像</th>
                            <th>操作区</th>
                        </tr>
                    </thead>
                    <!-- 表格主体 -->
                    <tbody id="tbody"></tbody>
                </table>
            </div>
        </div>

        <!-- 添加英雄的模态框 -->
        <!-- 更改id,需要设置独立的id,避免重名;id要与触发按钮的id对应 -->
        <div class="modal fade" id="addHeroModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <!--  -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">添加英雄</h4>
                    </div>
                    <!--  -->
                    <div class="modal-body">
                        <form class="form-horizontal" id="addForm">
                            <div class="form-group">
                                <label for="heroName" class="col-sm-2 control-label">英雄名称</label>
                                <div class="col-sm-10">
                                    <input type="text" name="name" class="form-control" id="heroNameinput" placeholder="请输入英雄名称" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="heroGender" class="col-sm-2 control-label">英雄性别</label>
                                <div class="col-sm-10">
                                    <select class="form-control" id="heroGenderselect" name="gender">
                                        <option>男</option>
                                        <option>女</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- 底部按钮 -->
                    <div class="modal-footer">
                        <input type="button" class="btn btn-success btnAdd" data-dismiss="modal" value="提交" />
                        <button type="button" class="btn btn-default btnCancel">取消</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 上传用户头像的模态框 -->
        <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">上传头像</h4>
                    </div>
                    <div class="modal-body">
                        <form id="formImg"></form>
                            <input type="file" name="" id="myimg" />
                        </form>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-success btnUploadImg" data-dismiss="modal" value="提交" />
                        <button type="button" class="btn btn-default btnCancelUpload">取消</button>
                    </div>
                </div>
            </div>
        </div>

        <script src="./libs/jquery/jquery.min.js"></script>
        <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
        <script src="./js/index.js"></script>
    </body>
</html>

index.js

$(function () {
    // 1.获取所有英雄列表数据,实现动态渲染

    // 函数封装ajax请求
    function init(userKey) {
        $.ajax({
            url: 'http://127.0.0.1:3001/getHeroList',
            type: 'get',
            data: { heroName: userKey },
            success: res => {
                console.log(res);
                if (res.code === 200) {
                    // 遍历数据,拼接生成动态结构
                    let html = '';
                    $.each(res.data, function (index, value) {
                        html += `
                            <tr>
                            <td>${index + 1}</td>
                            <td>${value.name}</td>
                            <td>${value.gender}</td>
                            <td>
                                <img src="${value.img}" alt="" />
                            </td>
                            <td>
                                <button type="button" class="btn btn-info btnUp" myId="${value.id}">上传头像</button>
                                <button type="button" class="btn btn-warning btnDel" id = "${value.id}">删除</button>
                            </td>
                        </tr>
                            `;
                    });

                    // 渲染到页面
                    $('#tbody').html(html);

                    // 聚焦
                    $('#hname').focus();

                    // 清空
                    $('#hname').val('');
                }
            },
        });
    }
    //调用函数,不传参,获取所有
    init();

    // 2.实现英雄数据的搜索
    $('#btn_search').on('click', () => {
        //   2.1 收集用户数据
        let userKey = $('#hname').val().trim();

        // 发起ajax请求,传取参数,获取数据,实现动态渲染
        init(userKey);
    });

    // 键盘事件调用点击事件
    $(document).on('keydown', e => {
        // console.log(e.keyCode);

        if (e.keyCode === 13) $('#btn_search').trigger('click');
    });

    // 3.实现英雄数据的新增
    $('.btnAdd').on('click', () => {
        //收集数据
        let name = $('#heroNameinput').val().trim();
        let gender = $('#heroGenderselect').val().trim();
        // console.log(name, gender);
        if (name === '') alert('请输入英雄名称');

        // 查看接口文档,发送ajax请求
        $.ajax({
            type: 'post',
            url: 'http://127.0.0.1:3001/addHero',
            data: { name, gender },
            success: res => {
                console.log(res);
                if (res.msg === '添加成功') {
                    alert(res.msg);

                    // 实现列表的刷新,就是调用之前的数据渲染的方法
                    init();

                    // 清空
                    $('#heroNameinput').val('');
                    $('#heroGenderselect').val('男');
                }
            },
        });
    });

    // 4.删除用户数据,事件委托
    // 动态生成的元素的事件绑定需要使用委托，因为在绑定事件的时候，元素还没有生成 ，因为异步非阻塞
    $('#tbody').on('click', '.btnDel', function () {
        // 询问用户是否真的删除,增加用户体验度
        if (confirm('请问是否真的需要删除')) {
            // 获取 id
            let id = $(this).prop('id');

            // ajax请求
            $.ajax({
                type: 'get',
                url: 'http://127.0.0.1:3001/delHeroById',
                data: { id: id },
                success: res => {
                    console.log(res);
                    alert(res.msg);
                    init();
                },
            });
        }
    });

    //  定义全局变量,保存id
    let heroId = undefined;
    // 5. 上传头像,事件委托
    $('#tbody').on('click', '.btnUp', function () {
        // 弹出模态框
        $('#uploadModal').modal('show');

        heroId = $(this).attr('myId');
    });

    // 6.实现文件上传的功能
    $('.btnUploadImg').on('click', () => {
        // 1.收集用户的头像数据
        // files:是原生方式的属性,只能使用dom进行调用
        let myfile = $('#myimg')[0].files[0];
        let formdata = new FormData();
        formdata.append('file_data', myfile);

        // 2.实现文件上传
        $.ajax({
            type: 'post',
            url: 'http://127.0.0.1:3001/uploadFile',
            data: formdata,
            contentType: false, //告诉ajax数据不是普通的字符串值，所以不用对其进行编码处理
            processData: false, // 告诉ajax不能对传递的参数进行任何的处理
            success: res => {
                console.log(res);

                // 文件上传成功后,更新用户数据
                // 根据后天接口的说明,更新用户头像,需要传入两个参数:id,img
                // id:当前用户的 id
                // img:就是刚刚上传文件,后台服务器返回图片的 url

                $.ajax({
                    type: 'post',
                    url: 'http://127.0.0.1:3001/updateHero',
                    // 💥💥💥 因为我们需要通过id来唯一的标识你想操作的数据
                    // 💥💥💥 总结: 凡是 编辑 或者 删除 ,都需要传入 id
                    data: { id: heroId, img: res.src },
                    success: res => {
                        console.log(res);
                        init();
                    },
                });
            },
        });
    });
});

index.html - 渲染页面改进，模板引擎

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>我们的67</title>
        <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
        <style>
            .panel {
                width: 900px;
                margin: 10px auto;
            }

            .table img {
                width: 40px;
                height: 40px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="panel panel-primary">
                <!-- Default panel contents -->
                <div class="panel-heading">英雄列表管理</div>
                <div class="panel-body">
                    <!-- 存放的搜索区域 -->
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" id="hname" class="form-control" placeholder="输入英雄信息..." autocomplete="true" />
                                <span class="input-group-btn">
                                    <button class="btn btn-default" id="btn_search" type="button">搜索</button>
                                </span>
                            </div>
                            <!-- /input-group -->
                        </div>
                        <!-- /.col-lg-6 -->

                        <div class="col-lg-3 col-lg-offset-3">
                            <!-- 添加英雄的按钮 -->
                            <!-- data-toggle="modal"：说明控制显示隐藏的元素是toggle效果 -->
                            <!-- data-target：控制的模态框是#myModal -->
                            <!-- 属性的方式只能简单的弹出模态框，不能进行其它的业务处理 -->
                            <button type="button" class="btn btn-success openDialog">添加英雄</button>
                        </div>
                    </div>
                </div>

                <!-- Table -->
                <table class="table">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>英雄名称</th>
                            <th>英雄性别</th>
                            <th>头像</th>
                            <th>操作区</th>
                        </tr>
                    </thead>
                    <!-- 表格主体 -->
                    <tbody id="tbody"></tbody>
                </table>
            </div>
        </div>

        <!-- 创建模板引擎结构 -->
        <script type="text/template" id="heroListTemp">
              {{each data v i}}
              <tr>
                <td>{{i + 1}}</td>
                <td>{{v.name}}</td>
                <td>{{v.gender}}</td>
                <td>
                    <img src="{{v.img}}" alt="" />
                </td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                </td>
            </tr>
              {{/each}}
        </script>

        <script src="./libs/jquery/jquery.min.js"></script>
        <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
        <!-- 引入模板引擎js -->
        <script src="./libs/template-web.js"></script>
    </body>
    <script>
        $(function () {
            function init() {
                let userKey = $('#hname').val().trim();
                console.log(userKey);

                $.ajax({
                    type: 'get',
                    url: 'http://127.0.0.1:3001/getHeroList',
                    data: { heroName: userKey },
                    success: res => {
                        console.log(res);
                        // 调用模板引擎
                        let html = template('heroListTemp', res);
                        $('#tbody').html(html);
                    },
                });
            }
            init();
        });
    </script>
</html>
Henry_ww
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
AngularJs基于角色的前端访问控制的实现
11-28
最近做的项目是使用Angular做一个单页应用，但因为用户有不同的角色（管理员、编辑、普通财务人员等），所以需要进行不同角色的访问控制。 因为后端访问控制的经验比较丰富，所以这里只记录了前端访问控制的实现。请注意，前端最多只能做到显示控制！并不能保证安全，所以后端是一定要做访问控制的！ 基于角色的访问控制需要做到两个层面的访问控制： 控制页面路由的跳转，没有权限的用户不能跳转到指定url 页面元素的显示控制，没有对应权限的用户不能看到该元素 但在此之前，我们还有一项重要的事要做。 存储用户信息 首先我们要做的，并不是和访问控制有关的事，首先我们要保存好用户信息。包括用户的基本信息，如
用ajax三种方法实现英雄信息查询
u012271799的博客
04-20 227
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l
ajax之移动小英雄
FJSAY
06-25 130
ajax移动小英雄项目源码
关于Ajax的英雄联盟查询英雄案例
zhixuejia的博客
07-26 351
首先我们搭建静态页面，css js如下 <div class="wrapper"> <h1> <img src="../day01/code/images/search_title.png" alt=""> </h1> <div class="search"> <input type="text" name="hero" placeholder
Node学习（九）04-管理系统之删除英雄——ajax请求数据之get请求写法完成删除、remove()移除DOM元素 & 服务端之完成删除的接口-sql中的delete语句
weixin_44867717的博客
02-24 220
ajax
Nodejs 英雄管理系统
码小余の博客
07-04 2799
英雄管理系统 文件结构如下： |----heroManage ​ |----node_modules --> 这是用命令自动生成的 npm i express body-parser multer ​ |----uploads --> 这是用代码自动生成的 var upload = multer({ dest: “uploads/” }); ​ |----utils --> 这是复制的工具包 ​ |----www --> 这是主要的前端代码包 ​ |----app.js
jQuery实现英雄联盟英雄查找页面功能
Chen__sir__的博客
10-31 221
利用jQuery+BootStrap实现的英雄联盟英雄查找功能
Vue前端：几种搜索框功能实现
热门推荐
qq_46119575的博客
01-04 1万+
Vue前端：几种搜索框功能实现
Vue+element 实现英雄榜功能
清流弯弯
01-13 2068
目录一、英雄榜实现1、引入element Lib 和VUE2、设置滚动条动态显示1）设置对应的VUE参数名：scrollHiddenVar2）VUE data定义3）mounted 设置鼠标监听事件4）监听方法3、设置element Table4、table 数组5、VUE 核心代码6、DEMO下载实现类似功能，按分数分成不同段位 2、设置滚动条动态显示 :style="{'--fullCorlor': foolcolorVar,'--scrollCorlor': scrollcolorV
ajax英雄检索案例
m0_46950064的博客
08-12 169
ajax英雄查询案例练习
Jquery的Ajax应用
10-12
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
JavaScript案例-原生ajax
02-16
JavaScript案例-原生ajax
Ajax-hook：拦截由XMLHttpRequest发出的浏览器的AJAX请求
01-30
阿贾克斯钩原理解析： : 简介Ajax-hook是一个精巧的用于拦截浏览器XMLHttpRequest的库，它可以在XMLHttpRequest对象发起请求之前和接收响应内容之后获得处理权。通过它您可以在对请求和响应进行一些预处理。更新记录...
Ajax-hook：拦截由XMLHttpRequest发出的浏览器的AJAX请求-js源码
08-11
在源网页加载之前，实现一个XMLHttpRequest的代理对象，然后覆盖全局的XMLHttpRequest，这样一但上层调用 new XMLHttpRequest这样的代码时，其实创建的是Ajax-hook的代理对象实例
ajax-panel：用于Grafana的Ajax面板插件
01-28
AJAX Grafana面板 AJAX面板是将外部内容加载到grafana仪表板的一般方法。 选件 方法： GET或POST或iframe 网址： 要求的网址 参数： 将在请求中传递的参数。 这是一个可以访问变量的javascript对象： ctrl控制...
jquery-ajax-unobtrusive:[维护模式
05-17
重要信息：此存储库处于维护模式。 我们不工作，也不打算使用任何新功能。 只有安全性和重要的错误修复程序才能进行。jQuery简洁的Ajax jQuery Unobtrusive Ajax库通过添加对通过Ajax调用将HTML替换选项指定为...
Ajax-ajax-.zip
09-17
Ajax-ajax-.zip,一、获得职位,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
Ajax-ajax-chat.zip
09-17
Ajax-ajax-chat.zip,这是聊天室,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
Ajax-jquery-ajax-cache.zip
09-17
Ajax-jquery-ajax-cache.zip,jquery插件，用于用“localstorage”或“sessionstorage”缓存ajax。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页...
AJAX--- 前后端数据交互
最新发布
08-24
AJAX (Asynchronous JavaScript and XML) 是一种用于前后端数据交互的技术。它允许在不刷新整个页面的情况下，通过异步方式向服务器发送请求并获取响应数据。 使用 AJAX 可以实现以下功能： 1. 发送异步请求：通过 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Henry_ww

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

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

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

打赏作者

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

抵扣说明：

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

余额充值