idea原生ajax数据处理(增删改查)
2024-04-19 13:19:24
idea原生ajax数据处理(增删改查)
项目名称:Bookstore
UI界面
项目文件
操作:
jsp代码
<%@ page import="dao.BookDAO" %>
<%@ page import="entity.Book" %><%--Created by IntelliJ IDEA.User: 邦杠Date: 2018/8/15Time: 19:54To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title></head><style>html,body{width:100%;height: 100%}table{width: 1150px;height:500px;margin: auto}table,td,th{border: 1px solid #e6e6e6;border-collapse:collapse; }body{-moz-background-size:100% 100%;background-size:100% 100%;background-image:url("link.jpg");background-repeat: no-repeat}* { margin: 0; padding: 0; }table { border-collapse: collapse; text-align: center; }/*关键设置 tbody出现滚动条*/table tbody {display: block;height: 500px;overflow-y: scroll;overflow-x:hidden;}table thead, tbody tr { display: table;width: 100%; table-layout: fixed; }table thead th { height: 40px }table tbody td {height: 30px }td input{margin-left: 5px;width: 40px}</style></head><body><marquee><h1 style="color:white;">本页面用原生ajax进行展示</h1></marquee><table width="80%" border="1"><thead><tr><th style="width:230px">编号</th><th style="width:231px">书名</th><th style="width:231px">作者</th><th style="width:231px">价格</th><th style="width:249px">操作</th></tr><tr><td colspan="5"><input onclick="insert()" type="button"value="添加新数据" style="width:100%;height:40px;margin: 0px" ></td></tr></thead><tbody id="tbody"></tbody></table></body><script>window.onload=function () {select();}function insert() {window.location.href=("insert.jsp");}function update(id) {window.location.href=("BookUpdate?id="+id);}function dele(id) {if(confirm("是否真的删除?")){var ajax=new XMLHttpRequest();ajax.open("get","BookDelete?id="+id);ajax.send(null);ajax.onreadystatechange=function () {console.log(ajax.readyState);console.log(ajax.status);if(ajax.readyState == 4 && ajax.status == 200){if(ajax.responseText){alert("删除成功");select();}}}}}function sele(id){window.location.href=("BookUpdate?sele=sele&id="+id);}function select() {//创建对象var ajax=new XMLHttpRequest();//http请求
ajax.open("get","BookSelect.do")//发送请求 (get为null post为参数)
ajax.send(null);//设置状态
ajax.onreadystatechange=function () {if(ajax.readyState == 4 && ajax.status == 200){var data=JSON.parse(ajax.responseText);var tbody=document.getElementById("tbody");tbody.innerHTML="";console.log(data.data.length);for(var i=0;i<data.data.length;i++){var tr=document.createElement("tr");var tdid=document.createElement("td");var tdname=document.createElement("td");var tdprice=document.createElement("td");var tdcc=document.createElement("td");//创建按钮var inputse=document.createElement("input");inputse.value="详细";inputse.setAttribute("onclick", "sele("+data.data[i].id+");");var inputde=document.createElement("input");inputde.value="删除";inputde.setAttribute("onclick", "dele("+data.data[i].id+");");var inputup=document.createElement("input");inputup.value="修改";inputup.setAttribute("onclick", "update("+data.data[i].id+");");inputup.type=inputde.type=inputse.type="button";//添加进入var thid=document.createTextNode(data.data[i].id);var thname=document.createTextNode(data.data[i].name);var thprice=document.createTextNode(data.data[i].price);var thcc1=document.createTextNode(inputse);var thcc2=document.createTextNode(inputde);var thcc3=document.createTextNode( inputup);tdcc.appendChild(inputse);tdcc.appendChild(inputde);tdcc.appendChild(inputup);tdid.appendChild(thid);tdname.appendChild(thname);tdprice.appendChild(thprice);tr.appendChild(tdid);tr.appendChild(tdname);tr.appendChild(tdprice);tr.append(tdcc);tbody.append(tr);}}}}</script>
</html>View Code
项目下载地址:https://github.com/weibanggang/Book
posted @ 2018-08-15 23:56 韦邦杠 阅读(...) 评论(...) 编辑 收藏
idea原生ajax数据处理(增删改查)相关推荐
- ajax servlet增删改查,Servlet ajax 文件上传和JDBC+Servler用户表增删改查
昨天晚上帮一个妹子,应该是大二或者大三的.解决了Servlet+JDBC实现用户表的增删改查功能,当时妹子遇到的问题是文件上传和日期格式处理不太会. 我让她把代码发我,我本地调试,结果发现坑很多,就是 ...
- Node编写API接口，ajax实现增删改查
首先展示一下预览效果以及文件结构: 一.预览效果: 信息列表: 编辑: 新增: 删除: 二.代码结构: 文件说明: 1.css文件:存放项目页面样式 2.json:用于项目数据存储 3.index.h ...
- 基于springmvc、ajax，后台连接数据库的增删改查
前言 前段时间在博客园上找了一个springmvc的例子,照着学了一下,算是对springmvc有了一个初步的了解,打一个基础,下面是链接.(我只看了博客,视频太耗时间了) 博客链接:http://w ...
- java连接mysql数据库连接池_java使用原生MySQL实现数据的增删改查以及数据库连接池技术...
一.工具类及配置文件准备工作 1.1 引入jar包 使用原生MySQL,只需要用到MySQL连接的jar包,maven引用方式如下: mysql mysql-connector-java 5.1.48 ...
- Python操纵Mysql数据库的三种方法，实现增删改查
目录 这里使用的数据库是关系型数据库Mysql 一.首先,需要安装两个库 二.3种实现增删改查的方法 1. 使用原生语句进行增删改查 2. 使用表结构进行增删改查 3. 使用集成ORM类操纵数据库, ...
- 基于Python Flask框架+jquery Ajax技术实现的增删改查（CRUD）+Ajax的异步文件上传
运行界面(话不多说先上图) 运行之后的index界面,有登陆.注册功能 登陆界面,输入数据库中用户名.密码不为空且密码是加密的数据,进入main界面 注册界面,用的bootstrop的弹窗,用户名和密 ...
- 对表格实现修改查询html,【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
- datatables增删改查php,jQuery+datatables插件实现Ajax加载数据与增删改查功能示例_白峰_前端开发者...
本文实例讲述了 这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查 注意,需要引入 搜索 新增 编辑 删除 职业姓名性别爱好 //点击查找 $(" ...
- AJAX面试题：一个页面实现增删改查(ASP.NET实现)
[下载] 很多asp.net程序员面试的时候都遇到过用ajax效果实现一个页面的增删改查.这几个例子分别用纯JS,JQUERY及JSON实现.希望对大家有些帮助. 这里面的例子表格内容的刷新是直接返回 ...
- mvc php 分页,MVC+jQuery.Ajax异步实现增删改查和分页_jquery
本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; u ...
最新文章
- 我在 GitHub 上看到了一个丧心病狂的开源项目！治好了我的拖延症
- （每日一题）P1447 [NOI2010] 能量采集（莫反套路 + 欧拉反演 / 容斥原理）
- 【Android 应用开发】Android游戏音效实现
- Optimized Purchasing基础知识
- Java-String的常用方法总结！
- 前端怎么获取cookie的值_京东购物小程序cookie方案实践（附Demo）
- （转）Spring+JDBC组合开发
- 部署 Job (第二部分)
- .NET : 在定义项目模板的时候使用占位符
- hdu 2993 MAX Average Problem 斜率优化DP
- 【原创】关于nginx.pid丢失的解决办法
- ArcGIS Runtime SDK for Android 加载shp数据，中文乱码问题
- 数据元数据字典元数据
- H5：MathJax解析数学公式
- 自动生成 : Java方法 toString(); hashCode(); equals(); compareTo()的方法 避免繁杂的体力活
- 划拳是古老中国酒文化的一个有趣的组成部分。酒桌上两人划拳的方法为：每人口中喊出一个数字，同时用手比划出一个数字。如果谁比划出的数字正好等于两人喊出的数字之和，谁就输了，输家罚一杯酒。两人同赢或两人同输
- 字节跳动-后端开发岗最新春招面经分享，四面拿下，有惊无险
- 服务器状态监控app,服务器/网站连接状态监控工具
- PL3368C、PL3368CE
- 为什么网上Python爬虫教程这么多，但是做爬虫的这么少呢？爬虫发展又该是如何呢？