java中的接口是类吗
195
2023-06-03
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
由于有些的程序员可能不是很会Photoshop,所以为了美化页面,我们可以借助工具bootstrap,实现起来相对就要比之前做的美观一些,
今天我用bootstrap把之前做的显示表格进行了一下美化,同时也把ajax部分进行了优化,看起来会更清晰
我没有下载bootstrap的包,直接从网页引用的
注意:如果要引用其中一个包含jquery的多个JS文件,那么jquery文件一定要放在第一位
下面是我在首页把显示的表格进行了美化,用了条纹表格,相对来说更美观了
水果名称 水果价格 水果产地 操作
昨天写的ajax 部分也进行了优化,以防太多的括号之类的出现问题导致程序不运行,昨天的jiazaiym.php,shanchu.php已经写过了,今天再补上查看页面xiangqing.php
header("Content-type:text/html;charset=utf-8");
$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.implRGORXode("^",$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[2] + "
}
$("#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="
$("#nr").html(aa);
}
})
})
}
模态框的html代码如下所示,点击查看会蹦出模态框:
写完后页面如下所示:
这样看起来页面就美观多了,而且代码用不同的方法封装后也显得整齐有序了。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~