ajax练习习题一弹窗查看

显示页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../../popwindow/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../../popwindow/tanchuang.js"></script>
<link href="../../popwindow/tanchuang.css" rel="stylesheet" type="text/css" />
</head>

<body>

<table border=1px>
 <tr>
 <td>车名</td>
 <td>上市时间</td>
 <td>油耗</td>
 <td>查看</td>
 <?php
  $dbn="mysql:host=localhost;dbname=1";
  $db=new PDO($dbn,"root","");
  $sql="select * from car";
  $result=$db->query($sql);
  $attr=$result->fetchALL();
  foreach ($attr as $v)
  {
      echo"
      <tr>
      <td>{$v[1]}</td>
      <td>{$v[3]}</td>
      <td>{$v[4]}</td>
      <td><input type='button' value='详情' class='btn1' code='{$v[0]}' ></td>  
      </tr>
      ";
  }
 ?>
 </tr>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {    
    $(".btn1").click(function(e) {
        //找主键值
        var code =$(this).attr("code")
        //根据主键查询
        $.ajax({
        url: "16623-2.php",
        type:"POST",
        dataType:"TEXT",
         data:{c:code}, 
         success: function(data)
        {  
            var lie=data.split("^");
            //引用外部弹窗样式
            var html = "<div style='color:red'>代号名"+lie[0]+"</div><div>汽车名"+lie[1]+"<div></div>汽车系列"+lie[2]+"<div></div>上市时间"+lie[3]+"<div></div>油耗"+lie[4]+"<div></div>功率"+lie[5]+"<div></div>排量"+lie[6]+"<div></div>价格"+lie[7]+"</div>";
            //var button ="<input type='button' value='确定' /><input type='button' value='取消' />";
            var win = new Window({
                
                width : 500, //宽度
                height : 400, //高度
                title : '测试弹窗', //标题 
                content : html, //内容
                isMask : false, //是否遮罩
                //buttons : button, //按钮
                isDrag:true, //是否移动
                
                });
        
        
    
        }
        });
    });    
});
</script>

处理页面

?php
include("../DBDA.class.php");
$db=new DBDA();
$sql="select * from nation";
$attr=$db->query($sql);
$str="";
foreach($attr as $v)
{
    $str=$str.implode("^",$v);
    $str=$str."|";
}
substr($str,0,strlen($str)-1);
echo $str;

posted on 2016-06-24 15:45 。。小兵阅读(260) 评论(0) 编辑收藏举报