ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!

ajax实现加载页面、删除、查看详细信息实现加载页面、删除、查看详细信息 bootstrap美化页面美化页面!

主要为大家详细介绍了ajax实现加载页面、删除、查看详细信息，利用bootstrap美化页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

由于有些的程序员可能不是很会Photoshop，所以为了美化页面，我们可以借助工具bootstrap，实现起来相对就要比之前做的美观一些，

今天我用bootstrap把之前做的显示表格进行了一下美化，同时也把ajax部分进行了优化，看起来会更清晰

我没有下载bootstrap的包，直接从网页引用的

<script src="jquery-3.1.1.min.js"></script>

<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<th>水果名称</th>

<th>水果价格</th>

<th>水果产地</th>

<th>操作</th>

</tr>

</thead>

<tbody id="tb">

</tbody>

</table>

昨天写的ajax 部分也进行了优化，以防太多的括号之类的出现问题导致程序不运行,昨天的jiazaiym.php,shanchu.php已经写过了，今天再补上查看页面xiangqing.php

$arr=$db->Query($sql,1);

$str="";

foreach($arr as $v)

{

$str=$str.implode("^",$v)."|"; //每一行之间用“|”连接，这样最后就会多出一个“|”

}

$str=substr($str,0,strlen($str)-1); //把最后多出的“|”用截取字符串的方式删去

echo $str;

?>

ajax部分代码如下：

success: function (data) {

//alert(data);

var str = "";

var hang = data.split("|");

for (var i = 0; i < hang.length; i++) {

var lie = hang[i].split("^");

str = str + "<tr><td>" + lie[1] + "</td><td>"

+ lie[2] + "</td><td>" + lie[3] + "</td><td> <button type='button' ids='"+lie[0]+"' class='btn btn-primary sc'>删除</button><button type='button' ids='"+lie[0]+"' class='btn btn-primary ck' data-toggle='modal' data-target='#myModal'>查看</button></td></tr>" //用bootstrp写删除和查看的按钮

}

$("#tb").html(str);

function addshanchu(){

$(".sc").click(function() {

var ids = $(this).attr("ids");

$.ajax({

url: "shanchu.php",

data: {ids:ids},

type: "POST",

dataType: "TEXT",

success: function (aa) { //去空格

if (aa.trim() == "OK") {

}

})

})

}

//查看的方法：

function chakan()

{

$(".ck").click(function(){

//显示模态框

// $('#myModal').modal('show');

dataType:"TEXT",

success:function(chakan)

{

var lie=chakan.split("^");