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

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

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

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

注意：如果要引用其中一个包含jquery的多个JS文件，那么jquery文件一定要放在第一位

下面是我在首页把显示的表格进行了美化，用了条纹表格，相对来说更美观了

内容加载

水果名称水果价格水果产地操作

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

PHP;"> $ids=$_POST["ids"];

include("DADB.class.php");
$db=new DADB();
$sql="select * from fruit where ids='{$ids}' ";
$arr=$db->Query($sql,1);

$str="";
foreach($arr as $v)
{
$str=$str.implode("^",$v)."|"; //每一行之间用“|”连接，这样最后就会多出一个“|”
}
$str=substr($str,strlen($str)-1); //把最后多出的“|”用截取字符串的方式删去
echo $str;
?>

ajax部分代码如下：

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 + "<tr&gt;<td&gt;" + lie[1] + "</td&gt;<td&gt;"
  + lie[2] + "</td&gt;<td&gt;" + lie[3] + "</td&gt;<td&gt; <button type='button' ids='"+lie[0]+"' class='btn btn-primary sc'><a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a></button><button type='button' ids='"+lie[0]+"' class='btn btn-primary ck' data-toggle='modal' data-target='#myModal'>查看</button></td&gt;</tr&gt;" //用bootstrp写<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>和查看的按钮

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

 addshanchu();
 chakan();
}

})
}

//删除页面的方法
function addshanchu(){
$(".sc").click(function() {
var ids = $(this).attr("ids");
$.ajax({
url: "shanchu.PHP",data: {ids:ids},type: "POST",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="<div>水果<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>:"+lie[1]+"</div><div>水果价格："+lie[2]+"</div><div>水果产地："+lie[3]+"</div>";

 $("#nr").html(aa);
}

})
})
}

模态框的HTML代码如下所示，点击查看会蹦出模态框：

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

猜你在找的Ajax相关文章