ajax+bootstrap做弹窗

Posted 亮瞎我的猫眼。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax+bootstrap做弹窗相关的知识，希望对你有一定的参考价值。

建页面，引入bootstrap弹窗

<!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" />
<script src="jquery-1.11.2.min.js"></script>
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
<title>无标题文档</title>

<link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>

<body>

<input type="button" value="查看" id="ck" />

<table width="100%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td>代号</td>
        <td>名称</td>
        <td>操作</td>
    </tr>
    
    <tbody id="tb"></tbody>
</table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">详细信息</h4>
            </div>
            <div class="modal-body" id="nr">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
               
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>
</html>

运用ajax进行页面处理：

<script type="text/javascript">
$("#ck").click(function() {
    
    $.ajax({
        url:"1cl.php",
        dataType:"TEXT",
        success: function(data){
            
            var hang = data.split("|");

            var 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>
　　　　　　　　　　　　 <button class=‘btn btn-primary btn-lg xq‘ data-toggle=‘modal‘ data-target=‘#myModal‘ bs=‘"+lie[0]+"‘>开始演示模态框</button></td></tr>";
            }
            $("#tb").html(str);
            
            
            $(".sc").click(function(){
                alert("aa");
                })
            
            $(".xq").click(function() {
                
                var code = $(this).attr("bs");
                $.ajax({
                    
                    url:"11cl.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>";
                        
                        $("#nr").html(str);
                        }
                    })
            });
        }
    })
});



</script>

建处理界面1：

<?php

include("../fengzhuang.class.php");

$db = new fengzhuang();

$sql = "select * from nation";

echo $db->strquery($sql);

建处理界面2：

<?php

include("../fengzhuang.class.php");

$db = new fengzhuang();

$code = $_POST["code"];

$sql = "select * from nation where code=‘{$code}‘";

echo $db->strquery($sql);

 

以上是关于ajax+bootstrap做弹窗的主要内容，如果未能解决你的问题，请参考以下文章

11月10日下午 ajax做显示信息以后用ajaxBootstrp做弹窗显示信息详情

ajax做显示信息以后用ajaxBootstrp做弹窗显示信息详情

Bootstrap-modal Ajax弹窗传值缓存怎么清除

js中怎么获取bootstrap datetimepicker 弹出的位置

tp5+bootstrap+ajax进行基本的CRUD

JAVA的弹窗怎么做？