zoukankan html css js c++ java

例题.点击按钮显示内容+弹窗效果+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>
<script src="jquery-1.11.2.min.js"></script>/*引入jquery*/
<script src="tanchuang.js"></script>/*引入弹窗*/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="tanchuang.css" rel="stylesheet" type="text/css" />/*引入弹窗css*/
</head>

<body>
<input type="button" value="显示" id="btn" />
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr id="sj">
    <td>代号</td>
    <td>名称</td>
    <td>操作</td>
  </tr>
  <tbody id="tb"></tbody>
</table>

<script type="text/javascript">
    $("#btn").click(function(){
            $.ajax({
                
                    url:"nationchuli.php",
                    dataType:"TEXT",
                    success: function(data){
                            var hang=data.split("|");
                            str="";
                            for(var i=0;i<hang.length;i++){
                                    var lie=hang[i].split("^");
                                    str=str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><span class='sc' bs='"+lie[0]+"'>删除</span><span class='xq' bs='"+lie[0]+"'>查看详情</span></td></tr>";
                                    
                                }
                                $("#tb").html(str);
                                $(".sc").click(function(){
                                        alert("aa");
                                    });
                                $(".xq").click(function(){
                                        var code=$(this).attr("bs");
                                        $.ajax({
                                                url:"xqchuli.php",
                                                data:{code:code},
                                                type:"POST",
                                                dataType:"TEXT",
                                                success:function(data){
                                                    
                                                    var lie1=data.split("^");
                                                    var str="<div>代号:"+lie1[0]+"</div><div>名称:"+lie1[1]+"</div>";
                                                    var btn="<input type='button' value='确定' class='qd' />";
                                                    var tc=new Window({
                                                            title:"详细信息",
                                                            content:str,
                                                            buttons:btn,
                                                        });
                                                        $(".qd").click(function(){
                                                                $(".zhuti").remove();
                                                                $("#zz").remove();
                                                            });
                                                    }
                                            });
                                    });
                        }
                    
                });
        
        });
</script>

</body>
</html>

2.处理页面nationchuli.php

<?php
    include("./lei/AAA.class.php");
    $db=new AAA();
    $sql="select * from nation";
    echo $db->StrQuery($sql);
    
?>

3.处理页面xqchuli.php

<?php

    include("./lei/AAA.class.php");
    $db=new AAA();
    $code=$_POST["code"];
    $sql="select * from nation where code='{$code}'";
    echo $db->StrQuery($sql);
?>

查看全文

相关阅读:
Linux系统自带服务罗列
 几个有用的shell命令
 Zabbix
RaspberryPi3安装CentOS7教程
 grafana简介
 负载均衡之Haproxy配置详解（及httpd配置）
CentOS7版本的新特性
 文件系统目录结构
 openstack部署dashboard
openstack核心组件--cinder存储服务（6）

原文地址：https://www.cnblogs.com/zxl89/p/6054524.html