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

jquery应用 php和html交互

2015-10-08 17:15 585 查看
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

php服务端和html数据交互。主要应用jquery库。

主要html body代码如下：

<body>
<h2 class="titleup">boss message</h2>
<ul id="userlist">
<li><a href="#" rel="1">刘董事</a></li>
<li><a href="#" rel="2">张董事</a></li>
<li><a href="#" rel="3">立董事</a></li>
<li><a href="#" rel="4">行董事</a></li>
<li><a href="#" rel="5">海董事</a></li>
</ul>
<div class="part1">
<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>
<h2 class="titleup">emplpyees message</h2>
<div class="part2">
<ul id="userlist1">
<li><a href="#" rel="1">路人甲</a></li>
<li><a href="#" rel="2">路人乙</a></li>
<li><a href="#" rel="3">路人丙</a></li>
<li><a href="#" rel="4">路人丁</a></li>
<li><a href="#" rel="5">路人戊</a></li>
</ul>
<div class="msg">
<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>
</div>
</body>
head 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="jquery.css" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#userlist a").bind("click",function(){
// $(".part1").hide();
var hol = $(this).attr("rel");
var data = "action=getlink&id="+hol;
// alert(data);
$.getJSON("bossinfo.php",data, function(json){
// alert(json);
$("#name").html(json.name);
$("#sex").html(json.sex);
$("#tel").html(json.tel);
$("#email").html(json.email);
});
// $("#userlist a").bind('click',function() {
// 		$(".info").slideDown('slow');
// 	/* Act on the event */
// });
$(".part1").toggle('slow');
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".part2 #userlist1 a").bind("click",function(){
// $(".part1").hide();
var hol = $(this).attr("rel");
var data = "action=getinfo&id="+hol;
// alert(data);
$.getJSON("bossinfo.php",data, function(json){
// alert(json);
$(".msg #name").html(json.name);
$(".msg #sex").html(json.sex);
$(".msg #tel").html(json.tel);
$(".msg #email").html(json.email);
});
// $("#userlist a").bind('click',function() {
// 		$(".info").slideDown('slow');
// 	/* Act on the event */
// });
$(".msg").toggle('slow');
});
});
</script>
</head>
jquery.css
<pre name="code" class="html">@charset "utf-8";
/* CSS Document */
.part1{
margin: 5px;
border: solid 1px #c3c3c3;
background: #A5A552;
clear: left;
padding: 6px;
display: none;
}
.msg{
margin: 5px;
border: solid 1px #c3c3c3;
background: #A5A552;
clear: left;
padding: 6px;
display: none;
}
.titleup{
margin: 5px;
border: solid 1px #c3c3c3;
background: #00DB00;
text-align: center;
padding: 6px;
}
p{
line-height: 24px;
}
p span{
font-weight: bold;
}
#userlist{margin:4px; height:42px}
#userlist li{float:left; width:80px; line-height:42px; height:42px; font-size:18px;
font-weight:bold}
#userlist1{margin:4px; height:42px}
#userlist1 li{float:left; width:80px; line-height:42px; height:42px; font-size:18px;
font-weight:bold}
body{
height: 800px;
width: 1000px;
border: solid 1px 	#000079;
}



php代码如下：

<?php
$con = mysql_connect("localhost","root","") or die("connect mysql failed! error:".mysql_error());
mysql_select_db("my_db",$con);
$action=$_GET['action'];
if ($action=="getlink") {
$id=intval($_GET['id']);
// var_dump($action);
//如何做保护需要查一下；
$row = mysql_query("SELECT * FROM bossinfo WHERE id=$id");

$result = mysql_fetch_array($row);
mysql_close($con);
$list = array('name'=>$result['name'],'sex'=>$result['sex'],'tel'=>$result['tel'],'email'=>$result['email']);
echo json_encode($list);
}elseif ($action == "getinfo") {
$id=intval($_GET['id']);
// var_dump($action);
//如何做保护需要查一下；
$row = mysql_query("SELECT * FROM userinfo WHERE id=$id");

$result = mysql_fetch_array($row);
mysql_close($con);
$list = array('name'=>$result['username'],'sex'=>$result['sex'],'tel'=>$result['tel'],'email'=>$result['email']);
echo json_encode($list);
}

?>
基本给出json数据html就可以接收到！

部分备注和注释可以帮助调试程序。

效果图如下：

点击后效果如下：

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                jquery应用
                                                php
                                                html
                                                css
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航