Ajax经典dome
Ajax经典dome （这是牛人写的
）
<!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>
<title>jquery dome</title>
<style>.display-none{display:none;}</style>
</head>
<body>
<ul class="">
<li><a href="#" data="1">shanchu</a><b>xiugai</b></li>
<li><a href="#" data="2">bbb</a></li>
<li><a href="#" data="3">ccc</a></li>
<li><a href="#" data="4">ddd</a></li>
<li><a href="#" data="5">eee</a></li>
<li><a href="#" data="6">fff</a></li>
</ul>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
//添加
$("添加按钮").click(function () {
//获取urlname
//获取url
$.ajax({
data:{},
success: function (data) {
if(添加成功){
输出html到列表中
$("列表的父级").append("HTML");
}else{
alert("提交失败");
}
}
});
});
//显示要修改的数据
$("ul li b").click(function () {
//获取该被点击元素ID
//声明被点击元素的ID赋值给变量id
var id = $(this).attr("ID属性");
//声明被点击元素的urlname
var urlname = $(this).closest(".list-style").find("a").text();
//声明被点击元素的url
var url = $(this).closest(".list-style").find("a").attr("href");
//将修改前的数据显示在文本框中
$("urlname的文本框").val(urlname);
$("url的文本框").val(url);
$("id的隐藏文本框").val(id);
//显示模拟弹出框
//声明模拟弹出框对象
var box = $("已存在的模拟弹出框");
if(box.has("display-none")) {
//显示BOX,删除这个样式
box.removeClass("display-none");
}
});
//执行修改
$("执行修改的按钮").click(function () {
//获取要提交的数据
$.ajax({
//提交数据到数据库
success:function (data) {
if(提交修改成功) {
//提示成功
if(!box.has("display-none")) {
//
box.addClass("display-none");
}
}
}
})
});
//删除
$("执行要删除的按钮").click(function (){
var id = $(this).attr(id);
var urlname = $(this).attr(urlname);
var url = $(this).attr(url);
//提交数据到数据库
//执行删除
$(this).closest(".list-style").remove();
});
//绑定事件
$("ul li a").bind("click", function() {
//添加HTML元素
//$("ul").append("<li><a href='#'>fuck</a></li>");
//获取属性
//alert($(this).attr("data"));
//声明data id 的变量
var data_id = $(this).attr("data");
//输出点击元素的属性
$("ul").append("<li><a href='#'>"+data_id+"</a></li>");
});
//绑定事件
$("ul li b").bind("click", function () {
alert();
});
});
</script>
</body>
</html>
相关推荐
kentrl 2020-11-10
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05
坚持着执着 2020-07-05