HTML code
The code is as follows |
Copy Code |
<! DOCTYPE html> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> <title>ajax</title> <link href= "Css/share.css" rel= "stylesheet"/> <script src= "Js/jquery-1.10.1.min.js" ></script> <style> Body {background: #00BDEC;} header,footer {height:120px; overflow:hidden; line-height:120px;} header {font-size:3.125em; font-weight:bold; color: #fff; text-align:center;} #sideBar {float:left width:20%;min-height:600px; background: #339;} #content {float:right; width:80%; min-height:600px; background: #fff;} . boxsizing {box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;} #menu {padding-top:10px;} Www.111cn.net #menu >li {height:36px; line-height:36px;} #menu >li > a {display:block; color: #fff; padding:0 10px; Transition:background 0.3s; -webkit-transition:background 0.3s;} #menu >li > a:hover {background: #208FFF; font-weight:bold;} </style>
<body> <section id= "Main" > <section class= "Clear" > <aside id= "SideBar" class= "boxsizing" > <ul id= "Menu" > <li><a href= "#" id= "data1" >panel department</a></li> <li><a href= "#" id= "Data2" >Somchit</a></li> <li><a href= "#" id= "Data3" > Manager</a></li> <li><a href= "#" id= "Data4" >iPanelonline</a></li> </ul> </aside> <article id= "Content" class= "boxsizing" ></article> </section> <footer></footer> </section> </body> |
jquery Code
The
code is as follows |
copy code |
<script> $ (' #menu '). On (' Click ', ' a ', function () { var Username=this.id; $.ajax ({ type: "POST", URL: "data_php.php", data: "Userna Me= "+ username,//parameter (corresponding ID) error:function () { alert (' Error '); return false; } }). Done (function (msg) {//Receive PHP array return & nbsp; $ (' #content '). Text ('). Text (msg); }); }) </script> |
PHP Processing Code
The code is as follows |
Copy Code |
<?php Header (' Http-equiv=content-type charset= "Utf-8");
$username =$_post[' username '];//receive the parameters that Ajax passes over
$arr =array (' data1 ' =>111111111111111, ' data2 ' =>22222222222222, ' data3 ' =>4333333333, ' data4 ' => 4444444444);
echo $arr [$username];
?> |
Summarize
Why not use JS Ajax in this area using jquery ajax, the reason is very simple Ajax integration of a variety of data sent also accept the method fast and easy to do well.