使用$.get()根据选项的不同从数据库异步请求数据
程序员文章站
2022-06-21 08:42:21
ajax极大地改善了用户体验，对于web2.0来说必不可少，是前端开发人员必不可少的技能。 这个例子是这样的，当从select下拉框选择编程语言时时，根据选项的不同，异步请...
ajax极大地改善了用户体验，对于web2.0来说必不可少，是前端开发人员必不可少的技能。
这个例子是这样的，当从select下拉框选择编程语言时时，根据选项的不同，异步请求不同的函数api描述。这种功能在现在web应用程序中是及其常见的。
我们先来看一下$.get()的结构
$.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));
下面是插入数据的sql
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;
?>
现在所有的代码都编写好了，看下最后的效果
这样简单的效果就出来了。
这个例子是这样的，当从select下拉框选择编程语言时时，根据选项的不同，异步请求不同的函数api描述。这种功能在现在web应用程序中是及其常见的。
我们先来看一下$.get()的结构
复制代码 代码如下:
$.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));
下面是插入数据的sql
复制代码 代码如下:
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;
?>
现在所有的代码都编写好了，看下最后的效果
这样简单的效果就出来了。
下一篇： iframe式ajax调用示例代码