使用$.get()根据选项的不同从数据库异步请求数据
Ajax极大地改善了用户体验，对于web2.0来说必不可少，是前端开发人员必不可少的技能。
这个例子是这样的，当从select下拉框选择编程语言时时，根据选项的不同，异步请求不同的函数API描述。这种功能在现在web应用程序中是及其常见的。
$.get(url, [, data], [, callback] [, type])
//url：请求的HTML页的URL地址；
//data（可选),发送至服务器的key/value数据作为QueryString附加到请求URL中；
//callback(可选):载入成功时的回调函数（只有当Response的返回状态是success才调用该方法；
//type（可选):服务器端返回内容格式，包括xml，html，script，json，text和_default
首先创建examplDB数据库，建立language和functions表，SQL如下
代码如下:
CREATE TABLE IF NOT EXISTS language (
id int(3) NOT NULL AUTO_INCREMENT,
languageName varchar(50) NOT NULL,
PRIMARY KEY (id));
CREATE TABLE IF NOT EXISTS functions (
id int(3) NOT NULL AUTO_INCREMENT,
languageId int(11) NOT NULL,
functionName varchar(64) NOT NULL,
summary varchar(128) NOT NULL, //功能概述
example text NOT NULL, //举例
PRIMARY KEY (id));
INSERT INTO language (id, languageName) VALUES
(1, 'PHP'),
(2, 'jQuery');
INSERT INTO functions (id, languageId, functionName, summary, example) VALUES
(1, 1, 'simplexml_load_file', 'Interprets an XML file into an object ', '$xml = simplexml_load_file(''test.xml'');\r\nprint_r($xml);\r\n'),
(2, 1, 'array_push', 'Push one or more elements onto the end of array', '$arrPets = array(''Dog'', ''Cat'', ''Fish'' );\r\narray_push($arrPets, ''Bird'', ''Rat'');\r\n'),
(3, 1, 'ucfirst', 'Make a string''s first character uppercase', '$message = ''have a nice day;\r\n$message = ucfirst($message); // output: Have A Nice Day\r\n'),
(4, 1, 'mail', 'used to send email', '$message = "Example message for mail";\r\nif(mail(''test@test.com'', ''Test Subject'', $message))\r\n{\r\n echo ''Mail sent'';\r\n}\r\nelse\r\n{\r\n echo ''Sending of mail failed'';\r\n}\r\n'),
(5, 2, '$.get', 'Load data from the server using a HTTP GET request.', '$.ajax({\r\n url: url,\r\n data: data,\r\n success: success,\r\n dataType: dataType\r\n});\r\n'),
(6, 2, 'hover', 'hover method accepts 2 functions as parameters which execute alternativelt when mouse enters and leaves an element.', '$(selector).hover(\r\nfunction()\r\n{\r\n//executes on mouseenter\r\n},\r\nfunction()\r\n{\r\n//executes on mouseleave\r\n});'),
(7, 2, 'bind', 'Attach a handler to an event for the elements.', '$(element).bind(''click'', function() \r\n{\r\n alert(''click happened'');\r\n});\r\n'),
(8, 2, 'jQuery.data', 'Store arbitrary data associated with the specified element.', 'jQuery.data(element, key, value);'),
(9, 1, 'add class', 'Adds a class', '(''p'').addClass(''myClass yourClass'');');
都是比较简单的SQL操作，一切准备就绪后就可以编码了。总共有两个脚本文件，一个index.php，一个results.php用于处理请求，先编写index.php
代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {font-family:"Trebuchet MS", Verdana, Arial; width:600px;}
div {background-color:#f5f5dc;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<?php
$mysqli = new mysqli('localhost', 'root', 'passwd', 'exampledb');//将passwd改为你的数据库密码
if (mysqli_connect_errno())
{
die('Unable to connect');
}
else
{
$query = 'SELECT * FROM language'; //这里开始是核心代码，都是很简单的语句，主要是在language中取得记录，然后循环输出到select选项
if ($result = $mysqli->query($query))
{
if ($result->num_rows > 0)
{
?>
<p>
Select a languae
<select id="selectLanguage">
<option value="">select</option>
<?php
while($row = $result->fetch_assoc()) //以编程语言的id作为option的value，以语言作为选项。
{
?>
<option value="<?php echo $row['id'];?>"><?php echo $row['languageName']; ?></option>
<?php
}
?>
</select>
</p>
<p id="result"></p>
<?php
}
else
{
echo 'No records found';
}
$result->close();
}
else
{
echo 'Error in query: $query.'.$mysqli->error;
}
}
$mysqli->close();
?>
<script type="text/javascript">
$(function() {
$('#selectLanguage').change(function() {
if($(this).val() == '') return;
$.get(
'results.php',
{id: $(this).val()},
function(data) {
$('#result').html(data);
}
);
});
});
</script>
</body>
</html>
引入jquery，给#selectLanguage添加change事件处理程序，并放在index.php中body结束前
代码如下:
<script src="scripts/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#selectLanguage').change(function() {
if($(this).val() == '') return;
$.get(
'results.php',
{id: $(this).val()},
function(data) {
$('#result').html(data);
}
);
});
});
</script>
下面就是results.php了。它先连接到数据库，然后取得index.php发送到id，根据id在数据库里选择相应的编程语言记录，并将每条记录放到ul列表中
代码如下:
<?php
$mysqli = new mysqli('localhost', 'root', 'passwd', 'exampledb'); //这里也要用你的数据库密码改写passwd
$resultStr = '';
$query = 'SELECT functionName, summary, example FROM functions where languageId ='.$_GET['id']; //$_GET['id']就是index.php中用$.get()发送的id
if ($result = $mysqli->query($query))
{
if ($result->num_rows > 0)
{
$resultStr .= '<ul>';
while($row = $result->fetch_assoc()) //和index.php的语句差不多，也是先从数据库取得记录，然后格式化输出
{
$resultStr .= '<li><strong>'.$row['functionName'].'</strong>-'.$row['summary'];
$resultStr .= '<div><pre>'.$row['example'].'</pre></div>'.'</li>';
}
$resultStr .= '</ul>';
}
else
{
$resultStr = 'Nothing found';
}
}
echo $resultStr;
?>
现在所有的代码都编写好了，看下最后的效果 
这样简单的效果就出来了。
相关推荐
-
使用$.get()根据选项的不同从数据库异步请求数据
Ajax极大地改善了用户体验,对于web2.0来说必不可少,是前端开发人员必不可少的技能. 这个例子是这样的,当从select下拉框选择编程语言时时,根据选项的不同,异步请求不同的函数API描述.这种功能在现在web应用程序中是及其常见的. 我们先来看一下$.get()的结构 复制代码 代码如下: $.get(url, [, data], [, callback] [, type]) //url:请求的HTML页的URL地址: //data(可选),发送至服务器的key/value数据作为Que
-
MySQL数据库结构和数据的导出和导入
正在看的db2教程是:MySQL数据库结构和数据的导出和导入. 导出要用到MySQL的mysqldump工具,基本用法是: shell> mysqldump [OPTIONS] database [tables] 如果你不给定任何表,整个数据库将被导出. 通过执行mysqldump --help,你能得到你mysqldump的版本支持的选项表. 注意,如果你运行mysqldump没有--quick或--opt选项,mysqldump将在导出结果前装载整个结果集到内存中,如果你正在导出一个大的数据
-
sql2005 数据库转为sql2000数据库的方法(数据导出导入)
假如你用SQL2005做一个数据库备份,然后把这个备份到装有SQL2000的服务器去恢复,是恢复不了,同样,你把SQL2005数据库附加到SQL2000,也是失败,怎么办,见如下 1. 生成for 2000版本的数据库脚本 2005 的manger studio -- 打开"对象资源管理器"(没有的话按F8), 连接到你的实例 -- 右键要转到2000的库 -- 任务 -- 生成脚本 -- 在"脚本向导"的"选择数据库"中, 确定选择的是要转到2
-
Oracle数据库升级或数据迁移方法研究
一.数据库升级的必要性 数据库升级是数据库管理员经常要面对的问题,如果你的应用要使用新版本数据库的新特性:如果数据库运行负载过重,而通过软硬件调整又不能有根本性的改善:如果要更换操作系统平台:如果要增强数据库的安全性:还有一个原因是随着新版本数据库的出现与成熟,oracle停止了对旧版本数据库的技术支持,升级到高版本,可以继续获得oracle的支持,还可以利用新版本数据库的新特新,可以改善系统的性能,健壮性,可扩张性和可用性,等等,面对这些问题,需要通过数据库升级才得以解决.不过,如果你的系统运
-
很全面的Mysql数据库、数据库表、数据基础操作笔记（含代码）
Mysql数据库.数据库表.数据基础操作笔记分享给大家,供大家参考,具体内容如下 一.数据库操作 1.创建数据库 Create database db name[数据库选项]; tip:语句要求使用语句结束符";"来结束服务. 标识符(数据库名)命名规则: 大小写取决于当前操作系统. 见名知意,推荐使用下划线法. 标识符的字符: 使用任意字符,数字,甚至中文.但是一些特殊的组合,例如纯数字组合,特殊符号等需使用标识符限定符来包裹. 限定符:反引号`` 中文可以:但要求客户端编码 在my
-
详解数据库中跨库数据表的运算
1. 简单合并(FROM) 所谓跨库数据表,是指逻辑上同一张数据表被分别存储在不同数据库中.其原因有可能是因为数据量太大,放在一个数据库难以处理,也可能在业务上就需要将生产库和历史库分开.而不同的数据库,可能只是部署在不同的机器上的同种数据库,也可能是连类型都不同的数据库系统. 在面对跨库数据表,特别是数据库类型都不相同的情况时,数据库自带的工具往往就力所不及了,一般都需要寻找能够很好地支持多数据源类型的第三方工具,而集算器,可以说是其中的佼佼者了.下面,我们就针对几种常见的跨库混合运算情况详细
-
如何将postgresql数据库表内数据导出为excel格式(推荐)
在上篇文章给大家介绍了如何将postgresql数据库表内数据导出为excel格式(推荐) 感兴趣的朋友点击查看. 本文主要用于介绍如何使用copy或者\copy命令将postgresql数据库内表的数据导出为excel格式,方便用户查看编辑. copy命令同\copy命令语法上相同,区别在于copy必须使用能够超级用户使用,copy - to file 中的文件都是数据库服务器所在的服务器上的文件,而\copy 一般用户即可执行且\copy 保存或者读取的文件是在客户端所在的服务器.本文主要以
-
Node.js下向MySQL数据库插入批量数据的方法
项目(nodejs)中需要一次性插入多笔数据到数据库,数据库是mysql的,由于循环插入的性能太差,就像使用批量插入的方法提高数据的插入性能. 批量插入的数据库的表结构如下: 1.数据库连接 var mysql = require('mysql'); // 数据库信息 var connection = mysql.createConnection({ host : 'localhost', user : '数据库用户名', password : '数据库登录密码', database : '操作
-
Sqlite数据库里插入数据的条数上限是500
今天在向Sqlite数据库里插入数据的时候,报了这样一个错: 复制代码 代码如下: "too many terms in compound SELECT" 去Stackoverflow上查了一下,发现有人回答这个问题:链接 原来一次性向数据库里插入数据的条数不能太多,上限是500条.超出会报错. 解决方案就是只好分多次插入数据库了.
-
如何在Java程序中访问mysql数据库中的数据并进行简单的操作
在上篇文章给大家介绍了Myeclipse连接mysql数据库的方法,通过本文给大家介绍如何在Java程序中访问mysql数据库中的数据并进行简单的操作,具体详情请看下文. 创建一个javaProject,并输入如下java代码: package link; import java.sql.*; /** * 使用JDBC连接数据库MySQL的过程 * DataBase:fuck, table:person: * 使用myeclipse对mysql数据库进行增删改查的基本操作. */ public