使用$.get()根据选项的不同从数据库异步请求数据

Ajax极大地改善了用户体验,对于web2.0来说必不可少,是前端开发人员必不可少的技能。

table.php

这个例子是这样的,当从select下拉框选择编程语言时时,根据选项的不同,异步请求不同的函数API描述。这种功能在现在web应用程序中是及其常见的。

复制代码 代码如下:

我们先来看一下$.get()的结构

<?php
header(“Content-Type:text/html;charset=utf-8”);
$mysqli=new MySQLi(“localhost”,”root”,”123456″,”xiaoqiangdb”);
if(mysqli_connect_errno){
echo “连接数据库失败”.mysqli_connect_error();
exit;
}
?>
<html>
<head>
<title>可编辑表格</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<script src=”jquery-1.3.2.min.js”></script>
<script src=”table.js”></script>
</head>
<body>
<?php
$sql=”select id,name,age,sex,email from users limit 0,20″;
$result=$mysqli->query($sql);
echo “<table>”;
echo “<caption>可编辑表格</caption>”;
echo “<tr>”;
echo
“<th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>邮箱</th>”;
echo “</tr>”;
while($row=$result->fetch_assoc()){
echo ‘<tr>’;
echo ‘<td class=”id”>’.$row[‘id’]正规网赌平台,'</td>’;
echo ‘<td>’.$row[‘name’]'</td>’;
echo ‘<td>’.$row[‘age’]'</td>’;
echo ‘<td>’.$row[‘sex’]'</td>’;
echo ‘<td>’.$row[’email’]'</td>’;
echo ‘</tr>’;
}
echo “</table>”;
$mysqli->close();
?>
</body>
</html>

复制代码 代码如下:

style.css

$.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如下

@charset “utf-8”;
/* CSS Document */
body{ font-size:12px; background:#EEE; text-align:center;}
table{ width:600px; border:1px solid #050; border-collapse:collapse;}
th,td{ border:1px solid #050; width:120px;}
th{ background:#282; color:white;}

复制代码 代码如下:

table.js

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));

// JavaScript Document
$(function(){
$(“tr:even”).css(“background-color”,”#ffff99″);
$(“tr td:not(.id)”).click(function(){
if($(this).children(‘input’).length > 0)
return;
//取出表格中原有的内容
var data=$(this).text();
//将内容设置为空
$(this).html(”);
var td=$(this);
//创建一个表格
var inp=$(‘<input type=”text”>’);
inp.val(data);
inp.css(“background-color”,$(this).css(“background-color”));
inp.css(“border-width”,”0px”);
inp.css(“width”,$(this).css(“width”));
//在表格中放一个input表单
inp.appendTo($(this));
//表单放入表格后触发焦点事件
inp.trigger(‘focus’);
//全选内容
inp.trigger(‘select’);
//添加键盘时间
inp.keydown(function(event){
switch(event.keyCode){
case 13:
td.html($(this).val());
//利用Ajax将数据传给服务器
//获取一行所有的列对象
var tds=td.parent(“tr”).children(“td”);
var i=tds.eq(0).text();
var n=tds.eq(1).text();
var a=tds.eq(2).text();
var s=tds.eq(3).text();
var e=tds.eq(4).text();
//var user={id:i,name:n,age:a,sex:s,email:e}
$.post(“save.php”,{id:i,name:n,age:a,sex:s,email:e},function(data){
alert(data);
});
break;
case 27:
td.html(data);
break;
}
}).blur(function(){
td.html($(this).val());
//利用Ajax将数据传给服务器
//获取一行所有的列对象
var tds=td.parent(“tr”).children(“td”);
var i=tds.eq(0).text();
var n=tds.eq(1).text();
var a=tds.eq(2).text();
var s=tds.eq(3).text();
var e=tds.eq(4).text();
//var user={id:i,name:n,age:a,sex:s,email:e}
$.post(“save.php”,{id:i,name:n,age:a,sex:s,email:e},function(data){
alert(data);
});
});
});
});

下面是插入数据的SQL

save.php

复制代码 代码如下:

复制代码 代码如下:

INSERT INTO language (id, languageName) VALUES
(1, ‘PHP’),
(2, ‘jQuery’);

<?php
header(“Content-Type:text/html;charset=utf-8”);
$mysqli=new MySQLi(“localhost”,”root”,”123456″,”xiaoqiangdb”);
if(mysqli_connect_errno){
echo “连接数据库失败”.mysqli_connect_error();
exit;
}
$sql=”update users set
name='{$_POST[“name”]}’,age='{$_POST[“age”]}’,sex='{$_POST[“sex”]}’,email='{$_POST[“email”]}’
where id='{$_POST[“id”]}'”;
$result=$mysqli->query($sql);
if($result){
echo “修改成功”;
}else{
echo “保存失败”;
}
$mysqli->close();
?>

相关文章