jq管理系统总结

最新推荐文章于 2020-12-03 05:22:16 发布

Silent Land

最新推荐文章于 2020-12-03 05:22:16 发布

阅读量510

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_44757417/article/details/108207966

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述

一、项目介绍

实现对英雄的增、删、改、查

二、需求分析

首页（查询英雄列表）
- ajax请求数据
- 模板引擎渲染
增加英雄
- 选择文件，实现图片预览功能
- 点击提交，ajax提交表单数据（包含文件提交）
- 响应成功之后，跳转首页
编辑英雄
- 点击编辑按钮，实现页面间传值（要编辑的英雄id）
- 选择文件，实现图片预览功能
- 点击提交，ajax提交表单数据（包含文件提交）
- 响应成功之后，跳转首页
删除英雄
- 给删除按钮添加自定义属性存储要删除的英雄id
- 点击删除按钮，ajax发送请求删除数据
- 响应成功之后，刷新首页

三、技术分析

ajax的使用
art-template模板引擎
委托事件
文件预览
文件上传
页面间传值

四、布局分析

顶部通栏和logo
主体部分头部和新增部分使用bootstrap布局
英雄列表使用的是表格布局
新增和编辑皆主要采用bootstrap布局（栅格）

五、具体实现

（1）导包

 	 <!-- 导包 -->
  <script src="./lib/js/jquery-1.12.4.js"></script>
  <script src="./lib/js/bootstrap.js"></script>
  <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
  <script src="./lib/js/template-web.js"></script>

（2）首页查询加载英雄列表

接口文档

接口文档

- 请求地址:http://127.0.0.1:4399/hero/all
- 请求方法：get
- 请求参数：无
- 返回数据

js及模板

 <!-- 写模板 -->
  <script id="hero_list" type="text/html">
    {{each data v}}
    <tr>
      <td><img src=" {{v.icon}} " alt="" /></td>
      <td> {{v.name}} </td>
      <td> {{v.skill}} </td>
      <td>
        <button onclick="location.href='./edit.html'" class="btn btn-primary">编辑</button>
        <button data-id=' {{v.id}} ' class="btn btn-danger">删除</button>
      </td>
    </tr>
    {{/each}}
  </script>
  <script>
    //  页面一显示，就加载所有的英雄数据
    $.ajax({
      url: 'http://127.0.0.1:4399/hero/all',
      type: 'get',
      dataType: 'json',
      success: function (backData) {
        console.log(backData);
        // 渲染到页面
        $('#my-table>tbody').html(template('hero_list',backData));
      }
    });
    
  </script>

（3）删除功能

通过 <button data-id=' {{v.id}} ' class="btn btn-danger">删除</button>的自定义属性data-id获得id
window.location.reload(); 刷新页面

// 删除功能 数据是动态加载的所以需要注测委托事件
    $('body').on('click', '.btn-danger', function () {
      if (confirm('确定要删除？')) {
        // 获取id
        let id = $(this).attr('data-id');
        console.log(id);
        $.ajax({
          url: 'http://127.0.0.1:4399/hero/delete',
          type: 'get',
          dataType: 'json',
          data: {
            id: id
          },
          success: function (backData) {
            console.log(backData);
            if (backData.code == 204) {
              alert('删除成功');
              // 刷新页面
              window.location.reload();

            } else {
              alert('删除失败');
            }

          }
        });
      }
    });

（4）增加英雄功能

 <!-- img仅仅是用来显示图片的,真正用来选择头像文件的还是input标签 -->
    <input type="file" class="file-input" id="heroIcon" name="icon" />

文件预览(固定步骤4步)

/* 1.文件预览 */
    // (1)给file表单注册onchange事件：用户选择了文件
  	$('#heroIcon').change(function(){
    console.log('用户选择了文件');
    /* 核心原理：取出二进制图片转成img标签可以识别的路径 */
    //(2)获取图片：原生DOM语法
    let file= this.files[0];
    console.log(file);

    //(3)将图片二进制转成url
    let url = URL.createObjectURL(file);
    console.log(url);

    // (4)生成的ur显示到img标签的src中
    $('.preview').attr('src',url);
  });

在这里插入图片描述

文件上传(固定步骤)
- 第一种方式：创建空的formdata然后手动追加参数
- 第二种方式：直接使用form表单来创建formdata(参数是DOM对象Form表单)

 /* 
    2.文件上传
      a.form表单中的元素有默认跳转行为，需要阻止默认跳转
      b.如果是有文件接口，需要使用FormData来处理      
  */
 $('.btn-add').click(function(e){
  // (1)阻止表单默认跳转
    e.preventDefault();
    // (2)使用原生FormData对象处理文件
    // 第一种方式：创建空的formdata然后手动追加参数
    // let fd = new FormData();
    // fd.append('name',$('#heroName').val());
    // fd.append('skill',$('#skillName').val());
    // fd.append('icon',$('#heroIcon')[0].files[0]);

    // 第二种方式：直接使用form表单来创建formdata(参数是DOM对象Form表单)
    /* 自动遍历每一个表单元素，将表单的name属性和value属性自动追加到参数中 */
    let fd = new FormData($('form')[0]);
    // (3)发送ajax
    $.ajax({
      url:'http://127.0.0.1:4399/hero/add',
      type:'post',
      dataType:'json',
      data:fd,
      /* 
        processData属性作用，jq会把参数对象拼接成key=value&key2= value2的字符串
        true：默认值
        false：告诉jq不要拼接,而应该交给fd 自动处理（文件二进制不能拼接成字符串）
      */
      processData:false,
       /* 
        contentType属性作用 ： jq会把post请求自动设置请求头application/x-www-form-urlencoded
          true:默认值。 设置请求头：application/x-www-form-urlencoded
          false: 告诉jq不要去设置请求头。 交给fd来自动设置 （multipart/form-data）
        */
      contentType:false,
      success:function(backData){
        console.log(backData);
        if(backData.code==201){
          alert('新增成功');
          // 跳转首页
          window.location.href = './index.html';
        }
      }
    });

(5)编辑功能

页面传值
- <button onclick="location.href='./edit.html?id={{v.id}}'" class=“btn btn-primary”>编辑
- let id = window.location.href.split(’=’)[1];
- 如果接口文档参数>表单参数可以使用append()手动添加参数
  fd.append(‘id’, id);

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>编辑英雄</title>
  <!-- 导包 -->
  <script src="./lib/js/jquery-1.12.4.js"></script>
  <script src="./lib/js/bootstrap.js"></script>
  <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
  <script src="./lib/js/template-web.js"></script>
  <style>
    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('images/bg03.jpg') center bottom no-repeat;
      overflow: auto;
    }

    .navbar-brand {
      padding: 10px 15px;
    }

    .page-title {
      font-size: 16px;
      font-weight: bold;
    }

    .file-input {
      outline: none;
      display: inline-block;
      margin-top: 5px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-horizontal {
      margin-top: 10px;
    }

    .logout {
      font-weight: 900;
      font-size: 20px;
      color: #ff000d;
      text-decoration: none;
    }

    .logout:hover {
      text-decoration: none;
      color: yellowgreen;
    }

    .preview {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <div class="row">
                <div class="col-md-6 page-title">英雄信息修改</div>
                <div class="col-md-6 text-right">当前位置：首页 &gt; 英雄信息修改</div>
              </div>
            </div>
            <div class="panel-body">
              <form action="#" method="" class="form-horizontal" id="form">
                <div class="form-group">
                  <label for="heroName" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                    <input required type="text" class="form-control" id="heroName" name="name" placeholder="请输入姓名"
                      value="盖伦" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="skillName" class="col-sm-2 control-label">技能</label>
                  <div class="col-sm-10">
                    <input required type="text" class="form-control" id="skillName" name="skill" placeholder="请输入技能"
                      value="躲草丛" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="heroIcon" class="col-sm-2 control-label">头像</label>
                  <div class="col-sm-10">
                    <input required type="file" class="file-input" id="heroIcon" name="icon" />
                    <!-- 预览的标签 -->
                    <img src="" class="preview" alt="" style="height: 100px;" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary btn-save">
                      保存
                    </button>
                    <button type="submit" class="btn btn-cancel">取消</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    //1.获取从index.html页面传过来的参数id
    let id = window.location.href.split('=')[1];
    console.log(id);
    // 2.ajax加载英雄详细数据
    $.ajax({
      url: 'http://127.0.0.1:4399/hero/id',
      type: 'get',
      data: {
        id: id
      },
      success: function (backData) {
        console.log(backData);
        // 渲染到页面
        $('#heroName').val(backData.data.name);
        $('#skillName').val(backData.data.skill);
        $('.preview').attr('src', backData.data.icon);
      }
    });
    // 3.文件预览
    // (1)给file表单注册onchange事件
    $('#heroIcon').change(function () {
      // (2)获取选择的文件
      let file = this.files[0];
      // (3)将文件二进制转成url
      let url = URL.createObjectURL(file);
      // (4)img标签的src来显示这个url
      $('.preview').attr('src', url);
    });

    // 4.ajax发送请求：上传文件参数
    // (1)给按钮注册点击事件
    $('.btn-save').click(function (e) {
      // (2)阻止表单默认跳转
      e.preventDefault();
      // (3)创建formdata对象：处理文件参数
      let fd = new FormData($('form')[0]);
      /* 细节：如果接口文档参数>表单参数  可以使用append()手动添加参数 */
      fd.append('id', id);

      // (4)ajax发送请求：上传文件参数
      $.ajax({
        url: 'http://127.0.0.1:4399/hero/update',
        type: 'post',
        dataType: 'json',
        data: fd,
        processData: false,
        contentType: false,
        success: function (backData) {
          if (backData.code == 202) {
            // 服务器响应之后，跳转到首页
            alert('修改成功');
            window.location.href = './index.html';
          }
        }
      });
    });
    $('body').on('click', '.btn-cancel', function (e) {
      console.log('dj');
      e.preventDefault();
      window.location.href = './index.html';
    });
  </script>
</body>

</html>

六、完整代码

index.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>编辑英雄</title>
  <!-- 导包 -->
  <script src="./lib/js/jquery-1.12.4.js"></script>
  <script src="./lib/js/bootstrap.js"></script>
  <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
  <script src="./lib/js/template-web.js"></script>
  <style>
    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('images/bg03.jpg') center bottom no-repeat;
      overflow: auto;
    }

    .navbar-brand {
      padding: 10px 15px;
    }

    .page-title {
      font-size: 16px;
      font-weight: bold;
    }

    .file-input {
      outline: none;
      display: inline-block;
      margin-top: 5px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-horizontal {
      margin-top: 10px;
    }

    .logout {
      font-weight: 900;
      font-size: 20px;
      color: #ff000d;
      text-decoration: none;
    }

    .logout:hover {
      text-decoration: none;
      color: yellowgreen;
    }

    .preview {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <div class="row">
                <div class="col-md-6 page-title">英雄信息修改</div>
                <div class="col-md-6 text-right">当前位置：首页 &gt; 英雄信息修改</div>
              </div>
            </div>
            <div class="panel-body">
              <form action="#" method="" class="form-horizontal" id="form">
                <div class="form-group">
                  <label for="heroName" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                    <input required type="text" class="form-control" id="heroName" name="name" placeholder="请输入姓名"
                      value="盖伦" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="skillName" class="col-sm-2 control-label">技能</label>
                  <div class="col-sm-10">
                    <input required type="text" class="form-control" id="skillName" name="skill" placeholder="请输入技能"
                      value="躲草丛" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="heroIcon" class="col-sm-2 control-label">头像</label>
                  <div class="col-sm-10">
                    <input required type="file" class="file-input" id="heroIcon" name="icon" />
                    <!-- 预览的标签 -->
                    <img src="" class="preview" alt="" style="height: 100px;" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary btn-save">
                      保存
                    </button>
                    <button type="submit" class="btn btn-cancel">取消</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    //1.获取从index.html页面传过来的参数id
    let id = window.location.href.split('=')[1];
    console.log(id);
    // 2.ajax加载英雄详细数据
    $.ajax({
      url: 'http://127.0.0.1:4399/hero/id',
      type: 'get',
      data: {
        id: id
      },
      success: function (backData) {
        console.log(backData);
        // 渲染到页面
        $('#heroName').val(backData.data.name);
        $('#skillName').val(backData.data.skill);
        $('.preview').attr('src', backData.data.icon);
      }
    });
    // 3.文件预览
    // (1)给file表单注册onchange事件
    $('#heroIcon').change(function () {
      // (2)获取选择的文件
      let file = this.files[0];
      // (3)将文件二进制转成url
      let url = URL.createObjectURL(file);
      // (4)img标签的src来显示这个url
      $('.preview').attr('src', url);
    });

    // 4.ajax发送请求：上传文件参数
    // (1)给按钮注册点击事件
    $('.btn-save').click(function (e) {
      // (2)阻止表单默认跳转
      e.preventDefault();
      // (3)创建formdata对象：处理文件参数
      let fd = new FormData($('form')[0]);
      /* 细节：如果接口文档参数>表单参数  可以使用append()手动添加参数 */
      fd.append('id', id);

      // (4)ajax发送请求：上传文件参数
      $.ajax({
        url: 'http://127.0.0.1:4399/hero/update',
        type: 'post',
        dataType: 'json',
        data: fd,
        processData: false,
        contentType: false,
        success: function (backData) {
          if (backData.code == 202) {
            // 服务器响应之后，跳转到首页
            alert('修改成功');
            window.location.href = './index.html';
          }
        }
      });
    });
    $('body').on('click', '.btn-cancel', function (e) {
      console.log('dj');
      e.preventDefault();
      window.location.href = './index.html';
    });
  </script>
</body>

</html>

add.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>添加英雄</title>
  <!-- 导包 -->
  <script src="./lib/js/jquery-1.12.4.js"></script>
  <script src="./lib/js/bootstrap.js"></script>
  <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
  <script src="./lib/js/template-web.js"></script>
  <style>
    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('images/bg03.jpg') center bottom no-repeat;
      overflow: auto;
    }

    .navbar-brand {
      padding: 10px 15px;
    }

    .page-title {
      font-size: 16px;
      font-weight: bold;
    }

    .file-input {
      outline: none;
      display: inline-block;
      margin-top: 5px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-horizontal {
      margin-top: 10px;
    }

    .logout {
      font-weight: 900;
      font-size: 20px;
      color: #ff0000;
      text-decoration: none;
    }

    .logout:hover {
      text-decoration: none;
      color: yellowgreen;
    }

    .preview {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <div class="row">
                <div class="col-md-6 page-title">新增英雄</div>
                <div class="col-md-6 text-right">当前位置：首页 &gt; 新增英雄</div>
              </div>
            </div>
            <div class="panel-body">
              <form action="#" method="" class="form-horizontal">
                <div class="form-group">
                  <label for="heroName" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="heroName" name="name" placeholder="请输入姓名" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="skillName" class="col-sm-2 control-label">技能</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="skillName" name="skill" placeholder="请输入技能" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="heroIcon" class="col-sm-2 control-label">头像</label>
                  <div class="col-sm-10">
                    <!-- img仅仅是用来显示图片的,真正用来选择头像文件的还是input标签 -->
                    <input type="file" class="file-input" id="heroIcon" name="icon" />
                    <img src="" class="preview" alt="" style="height: 100px;" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success btn-add">
                      新 增
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    /* 1.文件预览 */
    // (1)给file表单注册onchange事件：用户选择了文件
  $('#heroIcon').change(function(){
    console.log('用户选择了文件');
    /* 核心原理：取出二进制图片转成img标签可以识别的路径 */
    //(2)获取图片：原生DOM语法
    let file= this.files[0];
    console.log(file);

    //(3)将图片二进制转成url
    let url = URL.createObjectURL(file);
    console.log(url);

    // (4)生成的ur显示到img标签的src中
    $('.preview').attr('src',url);
  });

  /* 
    2.文件上传
      a.form表单中的元素有默认跳转行为，需要阻止默认跳转
      b.如果是有文件接口，需要使用FormData来处理      
  */
 $('.btn-add').click(function(e){
  // (1)阻止表单默认跳转
    e.preventDefault();
    // (2)使用原生FormData对象处理文件
    // 第一种方式：创建空的formdata然后手动追加参数
    // let fd = new FormData();
    // fd.append('name',$('#heroName').val());
    // fd.append('skill',$('#skillName').val());
    // fd.append('icon',$('#heroIcon')[0].files[0]);

    // 第二种方式：直接使用form表单来创建formdata(参数是DOM对象Form表单)
    /* 自动遍历每一个表单元素，将表单的name属性和value属性自动追加到参数中 */
    let fd = new FormData($('form')[0]);
    // (3)发送ajax
    $.ajax({
      url:'http://127.0.0.1:4399/hero/add',
      type:'post',
      dataType:'json',
      data:fd,
      /* 
        processData属性作用，jq会把参数对象拼接成key=value&key2= value2的字符串
        true：默认值
        false：告诉jq不要拼接,而应该交给fd 自动处理（文件二进制不能拼接成字符串）
      */
      processData:false,
       /* 
        contentType属性作用 ： jq会把post请求自动设置请求头application/x-www-form-urlencoded
          true:默认值。 设置请求头：application/x-www-form-urlencoded
          false: 告诉jq不要去设置请求头。 交给fd来自动设置 （multipart/form-data）
        */
      contentType:false,
      success:function(backData){
        console.log(backData);
        if(backData.code==201){
          alert('新增成功');
          // 跳转首页
          window.location.href = './index.html';
        }
      }
    });
 });
  
  </script>
</body>

</html>

edit.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>编辑英雄</title>
  <!-- 导包 -->
  <script src="./lib/js/jquery-1.12.4.js"></script>
  <script src="./lib/js/bootstrap.js"></script>
  <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
  <script src="./lib/js/template-web.js"></script>
  <style>
    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('images/bg03.jpg') center bottom no-repeat;
      overflow: auto;
    }

    .navbar-brand {
      padding: 10px 15px;
    }

    .page-title {
      font-size: 16px;
      font-weight: bold;
    }

    .file-input {
      outline: none;
      display: inline-block;
      margin-top: 5px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-horizontal {
      margin-top: 10px;
    }

    .logout {
      font-weight: 900;
      font-size: 20px;
      color: #ff000d;
      text-decoration: none;
    }

    .logout:hover {
      text-decoration: none;
      color: yellowgreen;
    }

    .preview {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <div class="row">
                <div class="col-md-6 page-title">英雄信息修改</div>
                <div class="col-md-6 text-right">当前位置：首页 &gt; 英雄信息修改</div>
              </div>
            </div>
            <div class="panel-body">
              <form action="#" method="" class="form-horizontal" id="form">
                <div class="form-group">
                  <label for="heroName" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                    <input required type="text" class="form-control" id="heroName" name="name" placeholder="请输入姓名"
                      value="盖伦" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="skillName" class="col-sm-2 control-label">技能</label>
                  <div class="col-sm-10">
                    <input required type="text" class="form-control" id="skillName" name="skill" placeholder="请输入技能"
                      value="躲草丛" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="heroIcon" class="col-sm-2 control-label">头像</label>
                  <div class="col-sm-10">
                    <input required type="file" class="file-input" id="heroIcon" name="icon" />
                    <!-- 预览的标签 -->
                    <img src="" class="preview" alt="" style="height: 100px;" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary btn-save">
                      保存
                    </button>
                    <button type="submit" class="btn btn-cancel">取消</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    //1.获取从index.html页面传过来的参数id
    let id = window.location.href.split('=')[1];
    console.log(id);
    // 2.ajax加载英雄详细数据
    $.ajax({
      url: 'http://127.0.0.1:4399/hero/id',
      type: 'get',
      data: {
        id: id
      },
      success: function (backData) {
        console.log(backData);
        // 渲染到页面
        $('#heroName').val(backData.data.name);
        $('#skillName').val(backData.data.skill);
        $('.preview').attr('src', backData.data.icon);
      }
    });
    // 3.文件预览
    // (1)给file表单注册onchange事件
    $('#heroIcon').change(function () {
      // (2)获取选择的文件
      let file = this.files[0];
      // (3)将文件二进制转成url
      let url = URL.createObjectURL(file);
      // (4)img标签的src来显示这个url
      $('.preview').attr('src', url);
    });

    // 4.ajax发送请求：上传文件参数
    // (1)给按钮注册点击事件
    $('.btn-save').click(function (e) {
      // (2)阻止表单默认跳转
      e.preventDefault();
      // (3)创建formdata对象：处理文件参数
      let fd = new FormData($('form')[0]);
      /* 细节：如果接口文档参数>表单参数  可以使用append()手动添加参数 */
      fd.append('id', id);

      // (4)ajax发送请求：上传文件参数
      $.ajax({
        url: 'http://127.0.0.1:4399/hero/update',
        type: 'post',
        dataType: 'json',
        data: fd,
        processData: false,
        contentType: false,
        success: function (backData) {
          if (backData.code == 202) {
            // 服务器响应之后，跳转到首页
            alert('修改成功');
            window.location.href = './index.html';
          }
        }
      });
    });
    $('body').on('click', '.btn-cancel', function (e) {
      console.log('dj');
      e.preventDefault();
      window.location.href = './index.html';
    });
  </script>
</body>

</html>

七、总结

文件预览固定为四步

    //1.给file表单元素注册onchange事件
    $('file表单').change(function () {
    //1.2 获取用户选择的图片
    let file = this.files[0];
    //1.3 将文件转为src路径
    let url = URL.createObjectURL(file);
    //1.4 将url路径赋值给img标签的src
    $('img元素').attr('src', url);
  });

文件上传固定四步

$('提交按钮').on('click',function(e){
    //禁用表单默认提交事件
    e.preventDefault();
    //创建FormData对象：参数是表单dom对象
    let fd = new FormData('form表单DOM对象')
    $.ajax({
      url:'',
      type:'post',
      dataType:'json',
      data:fd,
      contentType: false,
      processData: false,
      success: function(backData){
      }
    });
  });

自定义属性应用

  <button  data-id="{{ v.id }}" class="btn btn-danger btn-delete">删除</button>

页面传值

<button onclick="location.href='./edit.html?id={{ v.id }}'" class="btn btn-primary btn-eidt">编辑</button>

Silent Land

关注

0
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录