利用ajax获取数据对学生表进行简单的增删改查

前言本次练习没有使用前端框架，默认以表格方式拼接渲染数据，后端数据返回没有采用规范的数据形式返回
默认你能用springboot-mybatis从后端获取到数据
spring boot 静态资源处理

在application.prepeties加上

spring .mvc.static-path-pattern=/static/**

增加学生记录

利用jquery获取用户输入学生的信息

    let studentNo = $("#studentNo").val()let name = $("#studentName").val()let age = parseInt($("#studentAge").val())let sex = $("#studentSex").find("option:selected").val()let data = {"studentNo":studentNo,"name":name,"age":age,"sex":sex}

利用ajax传递新增学生信息给后端,后端返回结果为受影响的行数

$.ajax({url: '/student/add',type: 'POST',dataType: 'json',data:data}).done(function (dat) {console.log(dat)if ( dat === 1 ) {alert('添加成功');location.reload();}}).fail(function () {alert('服务器超时，请重试！');});

删除学生记录

获取当前行学生记录的学号

// 由于数据的拼接形成的表格，故获取学号则采用获取当前行表格的第几列数据// 获取删除按钮的父节点父节点，即tr标签
let tr1 = obj.parentNode.parentNode
// 获取tr
let id = tr1.cells[0].innerText

传递学号到后端进行删除操作，返回受影响的行数

$.ajax({url: '/student/delete',type: 'DELETE',dataType:'json',data:{"id":id}}).done(function (dat) {console.log(dat)alert("删除成功！")location.reload();}).fail(function () {alert('服务器超时，请重试！');});

更新学生记录

对于待更新学生记录，采用获取当前行数据的方式对待更新框进行赋值

var tr1 = obj.parentNode.parentNode$("#studentNoU").attr("value",tr1.cells[0].innerText)$("#studentNameU").attr("value",tr1.cells[1].innerText)$("#studentAgeU").attr("value",tr1.cells[2].innerText)document.getElementById("studentSexU").value= tr1.cells[3].innerText;//对于学号 采用可读不可编辑方式 在id = "studentNo"标签那添加如下属性
readonly="true"

获取更新框的数据

let studentNo = $("#studentNoU").val()let name = $("#studentNameU").val()let age = parseInt($("#studentAgeU").val())let sex = $("#studentSexU").find("option:selected").val()let data = {"studentNo":studentNo,"name":name,"age":age,"sex":sex}

传递更新的数据到后端进行更新操作，返回受影响的行数

$.ajax({url: '/student/update',type: 'PUT',dataType: 'json',data:data}).done(function (dat) {console.log(dat)if ( dat === 1 ) {alert('更新成功');location.reload();}}).fail(function () {alert('服务器超时，请重试！');});

查询学生表

获取后端数据，使用ajax

$.ajax({url: '/student/getAll',type: 'GET',dataType: 'json'
}).done(function (dat) {data = datshowData(data)}).fail(function () {alert('服务器超时，请重试！');});

渲染数据到表格采用循环数据拼接表格的方式

function showData(data) {let str = "";for (let i = 0; i < data.length; i++) {str = "<tr><td>" + data[i].studentNo + "</td><td>" + data[i].name + "</td><td>" + data[i].age + "</td><td>" + data[i].sex+ "</td>"+'<td>&nbsp;&nbsp;<button  type="button"  οnclick="deleteStudent(this)" >删除</button >&nbsp;&nbsp;<button  type="button"  οnclick="updateStudent(this)" >更新</button ></td>'+"</tr>";$("#container").append(str);}
}

后端数据返回如同以下格式

[{"studentNo": "s001","name": "张三","age": 23,"sex": "男"},{"studentNo": "s002","name": "李四","age": 23,"sex": "男"}
]

利用ajax获取数据对学生表进行简单的增删改查相关推荐

python删除数据库的数据完整代码_利用python操作小程序云数据库实现简单的增删改查...
不止python,你可以利用任何语言那实现通过http请求来操作你自己的小程序云数据库了背景也是在最近吧,小程序更新了云开发 HTTP API 文档,提供了小程序外访问云开发资源的能力,使用 HT ...
javaweb简单的登录增删改查系统_利用python操作小程序云数据库实现简单的增删改查！
不止python,你可以利用任何语言那实现通过http请求来操作你自己的小程序云数据库了背景也是在最近吧,小程序更新了云开发 HTTP API 文档,提供了小程序外访问云开发资源的能力,使用 HT ...
Android前端通过Http协议与J2EE后端数据交互。工具eclipse、MySQL、Tomcat。通过JoSn获取数据。Android端实现对MySQL增删改查功能。
Android:目录 HttpThread.java package com.example.saads; import java.io.BufferedReader; import java.io. ...
mongodb修改数据语句_MongoDB安装及简单的'增删改查'语句
* 1. 简介 * 推荐理由 * MongoDB 是一个基于分布式的开源文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. * MongoDB是一个介于关 ...
mongodb修改数据语句_mongodb之一些简单的增删改查语句
数据库操作: show dbs;#查看数据库 use test;#如果没有就创建一个 db;#查看当前数据库 db.dropDatabase();#删除数据库数据操作: show collectio ...
ajax获取数据中文乱码问题最简单的完美解决方案
ajax获取数据中文乱码问题最简单的完美解决方案参考文章: (1)ajax获取数据中文乱码问题最简单的完美解决方案 (2)https://www.cnblogs.com/konglxblog/p/1 ...
Java-spring数据库编程（idea）实现学生账号登录以及管理员增删改查功能
通过所学的Spring数据库编程知识,实现学生管理系统的登录及增删改查的功能.要求学生在控制台输入用户名密码,如果用户账号密码正确则显示登录成功,如果登录失败则显示登录失败.登录成功后,可以进行增删改 ...
html单页面js完成表数据库自动生成带注释的java实体类和简单的增删改查sql
支持Mysql和Oracle,mybatis和ibatis可选.功能主要还是字符串的拼凑完成的,把用把表信息复制过来或者增加后台,就可以生成简单的增删改查了临时体验点这里我也不知道地址什么时候失效 ...
oracle 赋予dorp,oracle表空间(tablespace)的增删改查(create/drop/rename,move/select)
oracle表空间(tablespace)的增删改查(create/drop/rename,move/select) 2013-03-05 oracle维护中经常会对表空间进行操作,整理了一下tabl ...

利用ajax获取数据对学生表进行简单的增删改查

增加学生记录

删除学生记录

更新学生记录

查询学生表

利用ajax获取数据对学生表进行简单的增删改查相关推荐

最新文章

热门文章