Springboot2模块系列:thymeleaf+Bootstrap(五)前后端结合--数据操作

1 添加

1.0 添加页面

图1 添加

1.2 添加js

function click_add(){
    // var id = document.getElementById("uid").value;
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var email = document.getElementById("email").value;
    var sex = document.getElementById("sex").value;
    var position = document.getElementById("position").value;
    var telephoneNum = document.getElementById("telephoneNum").value;
    // alert(JSON.stringify({"username":username, "password":password, "email":email, "sex":sex, "position":position, "telephoneNum":telephoneNum}));
    $.ajax({
        type:'post', 
        url:'http://localhost:8091/api/page/ui/user/add/eject',
        contentType:"application/json;charset=utf-8",
        data:JSON.stringify({"username":username, "password":password, "email":email,
        "sex":sex, "position":position, "telephoneNum":telephoneNum}),
        dataType:"json",
        success: function(){
          console.log("success");
        }
      }
    );
  };

2 删除

• thymeleaf

<a href="datasshow/index.html" th:href="@{/api/page/ui/user/delete(id=${i.id})}"><button type="button" class="btn btn-danger">删除</button></a>

3 修改

3.1 修改页面

图2 修改

3.2 修改js

function table_click_test(){
    var rows = document.getElementById("editTable").rows.length;
    console.log("rows:"+rows);
    $("#editTable tr").click(function(){
      var td=$(this).find("td");
      uid = td.eq(1).html();
      console.log("uid:"+uid);
      username = td.eq(2).html();
      sex = td.eq(3).html();
      position = td.eq(4).html();
      telephoneNum = td.eq(5).html();

      console.log("uid new:"+uid);
      $('#modalTest').on('show.bs.modal', function(event){
        var modal=$(this);
        // p标签数据
        // modal.find('.modal-body #id').text("trans data");
        // input 数据
        modal.find('.modal-body input#uid').val(uid);
        modal.find('.modal-body input#username-edit').val(username);
        modal.find('.modal-body input#password-edit').val("");
        modal.find('.modal-body input#email-edit').val("");
        modal.find('.modal-body input#sex-edit').val(sex);
        modal.find('.modal-body input#position-edit').val(position);
        modal.find('.modal-body input#telephoneNum-edit').val(telephoneNum);
        
      });
      $('#modalTest').modal('show');
    });
  };

4 查询

4.1 查询页面

图3 查询

4.2 查询js

function click_query(){
      var username = document.getElementById("username-query").value;
      window.location.href="http://localhost:8091/api/page/ui/user/query?username="+username;
  };