PhoneGap下Web SQL实践
HTML5里的Web SQL数据库，内置了SQLite数据库，
对数据库的操作使用executeSql执行增删改查
1. 创建数据库
function creatDatabase(){
db = openDatabase('Student', '1.0', 'StuManage', 2 * 1024 * 1024);
}
2. 创建表
function createTable(){
if (db) {
var strSQL = "create table if not exists StuInfo ";
strSQL += " (StuID unique,Name text,Sex text,Score int)";
db.transaction(function(tx) {
tx.executeSql(strSQL)
},
function() {
console.log("创建表错误");
},
function() {
console.log("创建表成功");
})
}
3. 增加数据
function addData() {
if (db) {
var strSQL = "insert into StuInfo values";
strSQL += "(?,?,?,?)";
db.transaction(function(tx) {
tx.executeSql(strSQL,[
$$("txtStuID").value,$$("txtName").value,
$$("selSex").value,$$("txtScore").value
],
function(){
$$("txtName").value="";
$$("txtScore").value="";
alert("成功增加1条记录!");
},
function(tx,ex){
console.log(ex.message)
})
})
}
}
4. 查询数据
function queryData(){
if(db){
var sql = "select * from StuInfo";
db.transaction(function(tx) {
tx.executeSql(sql,[],
function(tx, results){
var len = results.rows.length,i;
var htmlData = "";
for(i = 0; i < len; i++){
var item = results.rows.item(i);
var htmlitem = item.StuID + " " + item.Name + " " + item.Sex + " " + item.Score;
htmlData += htmlitem + "</br> ";
}
$$("info").innerHTML = htmlData;
},
function(tx,ex){
console.log(ex.message)
})
})
}
}
5. 删除数据
function deleteData(){
if (db) {
var strSQL = "delete from StuInfo where StuID = ?";
db.transaction(function(tx) {
tx.executeSql(strSQL,[
$$("txtStuID").value
],
function(){
alert("成功删除1条记录!");
},
function(tx,ex){
console.log(ex.message)
})
})
}
queryData();
}
完整的Code如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js" ></script>
<title>Hello World</title> <script type="text/javascript" charset="utf-8">
function $$(id) {
return document.getElementById(id);
}
var db;
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady(){
var db = creatDatabase();
createTable();
queryData();
} function creatDatabase(){
db = openDatabase('Student', '1.0', 'StuManage', 2 * 1024 * 1024);
} function createTable(){ if (db) {
var strSQL = "create table if not exists StuInfo ";
strSQL += " (StuID unique,Name text,Sex text,Score int)";
db.transaction(function(tx) {
tx.executeSql(strSQL)
},
function() {
console.log("创建表错误");
},
function() {
console.log("创建表成功");
})
}
} function addData() {
if (db) { var strSQL = "insert into StuInfo values";
strSQL += "(?,?,?,?)";
db.transaction(function(tx) {
tx.executeSql(strSQL,[
$$("txtStuID").value,$$("txtName").value,
$$("selSex").value,$$("txtScore").value
],
function(){
$$("txtName").value="";
$$("txtScore").value="";
alert("成功增加1条记录!");
},
function(tx,ex){
console.log(ex.message)
})
}) } queryData();
} function queryData(){
if(db){
var sql = "select * from StuInfo";
db.transaction(function(tx) {
tx.executeSql(sql,[],
function(tx, results){
var len = results.rows.length,i;
var htmlData = "";
for(i = 0; i < len; i++){
var item = results.rows.item(i);
var htmlitem = item.StuID + " " + item.Name + " " + item.Sex + " " + item.Score;
htmlData += htmlitem + "</br> "; }
$$("info").innerHTML = htmlData;
},
function(tx,ex){
console.log(ex.message)
})
})
}
} function deleteData(){
if (db) { var strSQL = "delete from StuInfo where StuID = ?";
db.transaction(function(tx) {
tx.executeSql(strSQL,[
$$("txtStuID").value
],
function(){
alert("成功删除1条记录!");
},
function(tx,ex){
console.log(ex.message)
})
}) } queryData();
} </script>
</head> <body>
<div id="page1" data-role="page" data-add-back-btn="true">
<div data-role="content">
<fieldset>
<legend>新增学生资料</legend>
<span class="spanl">
学号：<input type="text" id="txtStuID" size="10"><br>
姓名：<input type="text" id="txtName" size="15">
</span>
<span>
性别：<select id="selSex">
<option value="男">男</option>
<option value="女">女</option>
</select><br>
总分：<input type="text" id="txtScore" size="8">
</span>
<p class="btn">
<input id="btnAdd" type="button" value="提交" onClick="addData();">
</p> </fieldset>
<p id="info">显示结果</p>
<input type="button" value="删除记录" onClick="deleteData();">
</div>
</div> </body> </html>
PhoneGap下Web SQL实践的更多相关文章
- Phonegap下localStorage使用实践
HTML5的Web Storage API提供了两种客户端存储数据的方法 localStorage和sessionStorage. localStorage没有时间限制,程序升级也不会消失,可以满足持 ...
- Java JDBC下执行SQL的不同方式、参数化预编译防御
相关学习资料 http://zh.wikipedia.org/wiki/Java数据库连接 http://lavasoft.blog.51cto.com/62575/20588 http://blog ...
- 20155326《网路对抗》Exp8 WEB基础实践
20155326<网路对抗>Exp8 WEB基础实践 实践内容 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写 ...
- 20145236《网络对抗》Exp8 WEB基础实践
20145236<网路对抗>Exp8 WEB基础实践 一.基础问题回答 什么是表单 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框. ...
- 20155206 Exp8 WEB基础实践
20155206 Exp8 WEB基础实践 基础问题回答 (1)什么是表单 表单在网页中主要负责数据采集功能. 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以 ...
- 20155210 Exp8 WEB基础实践
Exp8 WEB基础实践 Apache环境配置 apache是kali下的web服务器,通过访问ip地址+端口号+文件名称可以打开对应的网页. 输入命令vi /etc/apache2/ports.co ...
- 20155216 Exp8 WEB基础实践
Exp8 WEB基础实践 实践内容 Apache环境配置 apache是kali下的web服务器,通过访问 ip地址+端口号+文件名称 打开对应的网页. 输入命令 vi /etc/apache2/po ...
- 20155223 Exp8 WEB基础实践
20155223 Exp8 WEB基础实践 基础问题回答 什么是表单? 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素. 表单使 ...
- 20155317王新玮《网络对抗技术》实验8 WEB基础实践
20155317王新玮<网络对抗技术>实验8 WEB基础实践 一.实验准备 1.0 实验目标和内容 Web前端HTML.能正常安装.启停Apache.理解HTML,理解表单,理解GET与P ...
随机推荐
- SQL学习笔记四之MySQL数据操作
阅读目录 一 介绍 二 插入数据INSERT 三 更新数据UPDATE 四 删除数据DELETE 五 查询数据SELECT 六 权限管理 一 介绍 MySQL数据操作: DML =========== ...
- 20145201李子璇 《网络对抗》 Web安全基础实践
1.实验后回答问题 (1)SQL注入攻击原理,如何防御 原理:通过构建特殊的输入作为参数传入web应用程序.即把SQL命令注入到Web表单的输入域或页面请求的查询字符串,和之前已经设定好的查询语句构成 ...
- CSS设置文本末行显示省略号...
首先设置文本标签或文字所在标签的宽度 最主要是以下三点: ①white-space:nowrap;如果是中文需要设置行末不断行 ②overflow:hidden;设置控 ...
- (转载)CUDA、tensorflow与cuDNN的版本匹配问题
转载:https://blog.csdn.net/MahoneSun/article/details/80809042 CUDA.tensorflow与cuDNN的版本匹配问题 一.问题现象 CUDA ...
- python strip()函数 os.popen（）
函数原型 声明:s为字符串,rm为要删除的字符序列 s.strip(rm) 删除s字符串中开头.结尾处,位于 rm删除序列的字符 s.lstrip(rm) 删除s字符串中开头处,位于 rm删除序列的字 ...
- BZOJ4811 [Ynoi2017]由乃的OJ
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- php 格式化时间
<?php echo date("Y/m/d") . "<br>"; echo date("Y.m.d") . " ...
- 单例模式（Singleton-Pattern）百媚生
1 动机 对于系统中的某些类来说,只有一个实例很重要,例如,一个系统中可以存在多个打印任务,但是只能有一个正在工作的任务;一个系统只能有一个窗口管理器或文件系统;一个系统只能有一个计时工具或ID(序号 ...
- window下rabbitmq环境安装
最近项目想用个MQ来做业务分离,看了市面上众多产品,最后选了rabbitmq,理由很简单,对window的支持很到位(其实是公司的系列产品都是.net的). 安装方法什么的就不说了,直接到官网下载双击 ...
- 51nod1284容斥定理
1284 2 3 5 7的倍数 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 给出一个数N,求1至N中,有多少个数不是2 3 5 7的倍数. 例如N = 10, ...