小编给大家分享一下ajax如何实现加载页面、删除、查看详细信息 bootstrap美化页面，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
10年积累的成都做网站、网站制作、成都外贸网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站后付款的网站建设流程，更有鸡西梨树免费网站建设让你可以放心的选择与我们合作。
由于有些的程序员可能不是很会Photoshop，所以为了美化页面，我们可以借助工具bootstrap，实现起来相对就要比之前做的美观一些，
今天我用bootstrap把之前做的显示表格进行了一下美化，同时也把ajax部分进行了优化，看起来会更清晰
我没有下载bootstrap的包，直接从网页引用的
注意：如果要引用其中一个包含jquery的多个JS文件，那么jquery文件一定要放在第一位
下面是我在首页把显示的表格进行了美化，用了条纹表格，相对来说更美观了
内容加载
| 水果名称 |
水果价格 |
水果产地 |
操作 |
昨天写的ajax 部分也进行了优化，以防太多的括号之类的出现问题导致程序不运行,昨天的jiazaiym.php,shanchu.php已经写过了，今天再补上查看页面xiangqing.php
Query($sql,1);
$str="";
foreach($arr as $v)
{
$str=$str.implode("^",$v)."|"; //每一行之间用“|”连接，这样最后就会多出一个“|”
}
$str=substr($str,0,strlen($str)-1); //把最后多出的“|”用截取字符串的方式删去
echo $str;
?>ajax部分代码如下：
Load();
function Load() {
$.ajax({
url: "jiazaiym.php",
dataType: "TEXT",
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 + "| " + lie[1] + " | "
+ lie[2] + " | " + lie[3] + " | 删除查看 |
" //用bootstrp写删除和查看的按钮
}
$("#tb").html(str);
addshanchu();
chakan();
}
})
}
//删除页面的方法
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") {
alert("删除成功");
Load();
}
else {
alert("删除失败");
}
}
})
})
}
//查看的方法：
function chakan()
{
$(".ck").click(function(){
//显示模态框
// $('#myModal').modal('show');
//往模态框里面加内容
var ids =$(this).attr("ids");
$.ajax({
url:"xiangqing.php",
data:{ids:ids},
type:"POST",
dataType:"TEXT",
success:function(chakan)
{
var lie=chakan.split("^");
var aa="水果名称:"+lie[1]+"
水果价格："+lie[2]+"
水果产地："+lie[3]+"
";
$("#nr").html(aa);
}
})
})
}
模态框的html代码如下所示，点击查看会蹦出模态框：
×
详细信息
