jQuery实例--Ajax信息的增删改查等操作

最新推荐文章于 2022-08-30 16:32:52 发布

梦康

最新推荐文章于 2022-08-30 16:32:52 发布

阅读量1.1w

点赞数 6

分类专栏： JS

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>jQuery实例</title>
		<style>
			
		</style>
		<script type="text/javascript" src="jquery-1.8.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//调用加载数据函数
				loadstu();
				
				//为添加按钮绑定一个添加动作
				$("#aid").click(function(){
					$("#fill").show();
					$("#myform").show();
				});
			});
			
			//加载学生信息
			function loadstu(){
				$.ajax({
					url:"./model/action.php?a=index",
					type:"GET",
					dataType:"json",
					success:function(data){
						//alert(data);
						var str=null;
						for(var i=0;i<data.length;i++){
							str+="<tr>";
							str+="<td>"+data[i].id+"</td>";
							str+="<td>"+data[i].name+"</td>";
							str+="<td>"+data[i].sex+"</td>";
							str+="<td>"+data[i].age+"</td>";
							str+="<td>"+data[i].classid+"</td>";
							str+="<td><a href=\"javascript:void(0);\" οnclick='doDel("+data[i].id+",this)'>删除</a></td>";
							str+="</tr>";
							
						}
						$("#stuid tbody").empty();
						$("#stuid tbody").append(str);
					}
				});
			}
			
			//删除函数
			function doDel(sid,ob){
				//执行ajax删除
				if(confirm("确定要删除吗？"))
				$.ajax({
					url:"./model/action.php?a=del",
					type:"POST",
					data:{id:sid},
					dataType:"json",
					success:function(res){
						//判断是否删除成功
						if(res.num>0){
							//alert(res.num);
							$(ob).parents("tr").remove();
						}
					},
					error:function(){
						alert('error');
					}
				});
			}
			
			//执行添加
			function doAdd(form){
				//alert($(form).serialize());
				$.ajax({
					url:"./model/action.php?a=insert",
					type:"POST",
					data:$(form).serialize(),
					dataType:"json",
					success:function(res){
						if(res.id>0){
							$('#fill').hide();
							$('#myform').hide();
							$(form).find(":reset").trigger("click");
							loadstu();//重新加载
						}else{
							alert('添加失败！');
						}
					}
				});
				
				return false;
			}
		</script>	
	</head>
	<body>
		<h2>jQuery实例--Ajax信息的增删改查等操作</h2>
		<h3>学生信息</h3><button id="aid">添加</button>
		<table id="stuid" width="500" border="1">
			<thead>
				<tr>
					<th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>班级号</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		
		
		<div id="fill" style="width:100%;height:100%;background-color:#000;position:absolute;top:0px;left:0px;opacity:0.3;display:none;z-index:100">
		</div>
		
		<div id="myform" style="width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:101;display:none">
			<form  action="" method="post" οnsubmit="return doAdd(this)">
			<table width="340" border="0" style="margin:20% auto;background-color:#fff">
				<tr>
					<td>姓名：</td>
					<td><input type='text' name="name"/></td>
				</tr>
				<tr>
					<td>年龄：</td>
					<td><input type='text' name="age"/></td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type='radio' name="sex" value="m"/>男
						<input type='radio' name="sex" value="w"/>女
					</td>
				</tr>
				<tr>
					<td>班级：</td>
					<td><input type='text' name="classid"/></td>
				</tr>
				<tr>
					<td> </td>
					<td >
						<input type='submit' value="添加"/> 
						<input type='reset' value="重置"/> 
						<input type="button" οnclick="$('#fill').hide();$('#myform').hide();" value="关闭"/>
					</td>
				</tr>
			</table>
			</form>
		</div>
		
		
	</body>
</html>

梦康

关注

6
点赞
踩
37

收藏

觉得还不错? 一键收藏
0
评论
jQuery实例--Ajax信息的增删改查等操作

jQuery实例 $(function(){ //调用加载数据函数 loadstu(); //为添加按钮绑定一个添加动作 $("#aid").click(function(){ $("#fill").show(); $("#myform").show(); }); });
复制链接

扫一扫