您的位置：首页 > Web前端 > JQuery

jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

2016-05-14 15:19 1146 查看

首先需要详看：

/article/11425985.html

/article/1208025.html

所示的内容，写的很好，

这里只是检测了一下，

test.html

<!DOCTYPE>
<html  style="width:100%;height:100%;margin:0;">
<head>
<meta charset="utf-8">
<title>Ajax</title>
<style>
#userlist{margin:4px; height:42px}
#userlist li{float:left; width:80px; line-height:42px; height:42px; font-size:14px;
font-weight:bold}
#info{clear:left; padding:6px; border:1px solid #b6d6e6; background:#e8f5fe}
#info p{line-height:24px}
#info p span{font-weight:bold}
</style>
<script type="text/javascript" src="./jquery/1.8.2/jquery.js"></script>
<script>
$(function(){
$("#userlist a").bind("click",function(){
var hol = $(this).attr("rel");
var data = "action=getlink&id="+hol;

$.getJSON("test.php",data, function(json){
$("#name").html(json.name);
$("#sex").html(json.sex);
$("#tel").html(json.tel);
$("#email").html(json.email);
});
});
});
</script>
</head>
<body>
<ul id="userlist">
<li><a href="#" rel="1">张三</a></li>
<li><a href="#" rel="2">李四</a></li>
<li><a href="#" rel="3">王五</a></li>
</ul>
<div id="info">
<p>姓名：<span id="name"></span></p>
<p>性别：<span id="sex"></span></p>
<p>电话：<span id="tel"></span></p>
<p>邮箱：<span id="email"></span></p>
</div>
</body>
</html>

test.php文件

<?php
header("content-type:text/html;charset=utf-8");
@mysql_connect("localhost",'root','123456');
mysql_select_db('test') or die(mysql_error());
mysql_set_charset("utf8");
$action=@$_GET['action'];
$id=intval($_GET['id']);
if($action=="getlink"){
$sql="select * from user where id='$id'";
$query=mysql_query($sql) or die(mysql_error());
/*
//多条数据  前台的name的访问：json[0].name

$sql="select * from user";
$list=[];
while($row=mysql_fetch_assoc($query)){
$list[]=array("name"=>$row['username'],"sex"=>$row['sex'],"tel"=>$row['tel'],"email"=>$row['email']);
}
$a=json_encode($list);
echo json_encode($list);
//可以选择直接写入文件，也可以选择直接返回数据(常用)
$myfile=fopen("data.php",'w');
fwrite($myfile,$a);
fclose($myfile);
*/
$row=mysql_fetch_assoc($query);
$list=array("name"=>$row['username'],"sex"=>$row['sex'],"tel"=>$row['tel'],"email"=>$row['email']);
echo json_encode($list);
//将数据保存在文件中

}

创建表和数据库

create database test;
use test;
CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL auto_increment,
`username` varchar(100) NOT NULL,
`sex` varchar(6) NOT NULL,
`tel` varchar(50) NOT NULL,
`email` varchar(64) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `user` (`id`, `username`, `sex`, `tel`, `email`) VALUES
(1, '张三', '男', '15690697321', '2074992572@qq.com'),
(2, '李四', '男', '15690697322', '20749925224@qq.com'),
(3, '王五', '男', '15690697323', '2074992573@qq.com');

个人觉得$.getJSON()用于显示多个或单个的前台数据，比如oj的题目显示结合多个(html)文件创建，$.post()等应该是在发送电子邮件方面

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航