html代码
| 代码如下 | 复制代码 |
| <!DOCTYPE HTML> <html> <head> <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> </head> <body> <section id="main"> <header>pjax</header> <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> </html> |
|
jquery代码
| 代码如下 | 复制代码 |
|
<script> $('#menu').on('click','a',function(){ var username=this.id; $.ajax({ type: "POST", url: "data_php.php", data: "username=" + username,//传参（相对应的id） error: function(){ alert('error'); return false; } }).done(function( msg ) {//接收php数组返回 $('#content').text('').text(msg); }); }) </script> |
|
php处理代码
| 代码如下 | 复制代码 |
|
<?php header('http-equiv=Content-Type charset="utf-8"'); $username=$_POST['username'];//接收ajax传递过来的参数 $arr=array('data1'=>111111111111111,'data2'=>22222222222222,'data3'=>4333333333,'data4'=>4444444444 ); echo $arr[$username]; ?> |
|
总结
为何这里不用js ajax而使用jquery的ajax呢，原因非常的简单ajax集成了各种数据发送也接受方法快捷好用哦。
时间： 2024-10-24 18:29:41