首页 > 其他分享> > ajax英雄案列笔记

ajax英雄案列笔记

2020-11-27 22:30:28 作者：互联网

英雄信息案列

文件目录创建好
在这里插入图片描述

获取英雄数据

使用ajax请求服务器获取到数据
服务器响应后使用模板引擎把数据渲染到页面中
图片路径使用服务器基地址获取

代码错误注意：

dataType:不能写错，如果这个值写错了，对于jq的ajax而言，默认类型是text/html
如果人为修改了数据，那么一定要注意保存文件的编码格式
记得引入js文件，默认的id一定要对应

获取数据操作

<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Hero - Admin</title>
		<link rel="stylesheet" href="../css/bootstrap.css">
		<style>
			.hero-list img {
				 width: 100px;
				     height: 94px;
				     display: block;
				     border-radius: 80px;
			}

			.hero-list td {
				height: 50px;
				line-height: 50px;
			}
		</style>
	</head>
	<script src="../libs/jquery-1.12.4.js"></script>
	<script src="../libs/template-web.js"></script>
	<script src="../libs/index.js"></script>
	<body>
		<header>
			<div class="page-header container">
				<h1>王者荣耀 <small>英雄管理器</small></h1>
			</div>
		</header>
		<div class="container hero-list">
			<a class="btn btn-success pull-right" href="edit.html">添加英雄</a>
			<table class="table table-hover">
				<thead>
					<tr>
						<th>编号</th>
						<th>名称</th>
						<th>性别</th>
						<th>头像</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">

				</tbody>
			</table>
		</div>
	</body>

</html>
<!-- 使用模本引擎渲染数据 -->
<!-- 图片路径改成服务器基地址 -->
<script type="text/template" id="userTemp">
	{{each data}},
		<tr>
			<td>{{$index+1}}</td>
			<td>{{$value.name}}</td>
			<td>{{$value.gender}}</td>
			<td><img src="http://127.0.0.1:3002/images/{{$value.img}}"></td>
			<td><a href="#">查看</a> <a href="javascript:;">修改</a>
				<a href="javascript:;">删除</a></td>
		</tr>
	{{/each}}
</script>
<script>
	//获取所有英雄数据
	$.ajax({
		// - 请求路径：http://127.0.0.1:3002/getalldata
		// - 请求方法：get
		url: "http://127.0.0.1:3002/getalldata",
		dataType: "json",
		success: function(res) {
			console.log(res);
			$('tbody').html(template('userTemp', res));
		}
	})
</script>

新增英雄数据

实现新增英雄页面的跳转
实现图片的上传
- 选择好文件触发change事件
- 使用formdata收集文件数据
- 将文件数据追加到formdata中
- ajax请求，用formdata做参数
- 设置两个属性： processsData:false （不要让ajax进行数据的处理）、contentType:false（不要让ajax进行编码的处理）
- 分析返回数据，返回图片名称
- 获取到图片后，预览在相对应的元素中
实现英雄数据添加
1. 在表单中添加一个表单域
2. 在图片上传成功之后将他的名称隐藏到文件域
3. 通过表单serialize方法获取数据
4. 数据收集之后实现ajax请求
图片路径使用基地址
引入相对应的js文件

添加英雄操作

<script>
	$("#img").on("change", function() {
		//引入上传文件模块
		//使用formdata收集数据
		let formdata = new FormData();
		// 获取图片数据的方式需要使用原生方式
		let file = document.querySelector("#img").files[0];
		// 将文件数据追加到formdata
		formdata.append("img", file);
		$.ajax({
			//请求方式
			type: "post",
			// 请求路径
			url: "http://127.0.0.1:3002/uploadFile",
			dataType: "json",
			data: formdata,
			// processData:不要让ajax进行数据的处理，因为formdata已经处理了
			// contentType:不要让ajax进行数据的编码，formdata已经实现编码了
			processData: false,
			contentType: false,
			success: function(res) {
				console.log(res)
				if (res.code == 200) {
					//图片文件预览
					$('#photo').attr('src', 'http://127.0.0.1:3002/images/' + res.img)
					//图片上传成功后，将文件名称隐藏到文件域
					$('#img1').val(res.img);
				};
			}
		})
		
		$('#sub').on("click",function(){
			$.ajax({
				type:"post",
				url:"http://127.0.0.1:3002/add",
				data:$("#myform").serialize(),
				dataType:"json",
				success:function(res){
					if(res.code==200){
						alert(res.msg);
						location.href="index.html";
					}
				}
				
			})
		})
	});
</script>

修改英雄信息

先获取到当前英雄信息显示在编辑页面

页面跳转：传入当前用户的Id

在这里插入图片描述

页面跳转在这里插入图片描述

根据id拿到数据
data：{id:id}
数据显示在页面中，模板-dom操作
传递数据是一个对象
图片文件上传操作
还有按钮是动态渲染生成的，所以要单击事件要用事件委托
编辑操作
1. Id是进行编辑必要的标识，没有id，编辑不可能成功
2. 添加两个隐藏域，分别用户存储用户Id和img
3. 在进行获取用户数据之后，对这个两个隐藏域赋值
4. 发送请求，返回结果，编辑成功
  
  编辑英雄信息操作


<script>
	//截取拿到id的值
	let id=itcast.getParameter(location.search).id;
	$.ajax({
		type:"get",
		url:"http://127.0.0.1:3002/getHeroById",
		dataType:"json",
		data:{id:id},
		success:function(res){
			console.log(res)
			if(res.code==200){
				$("tbody").html(template("heroTemp", res.data));
			}
		}
	})
	// 实现图片文件上传
	$("tbody").on("change", "#img", function() {
		let myfile = document.querySelector("#img").files[0];
		let formdata = new FormData();
		formdata.append("img", myfile);
		$.ajax({
			type: "post",
			url: 'http://127.0.0.1:3002/uploadFile',
			data: formdata,
			processData: false,
			contentType: false,
			dataType: "json",
			success: function(res) {
				if (res.code == 200) {
					$("#photo").attr("src", 'http://127.0.0.1:3002/images/' + res.img);
					// 将图片名称存储到隐藏域中
					$('.myimg').val(res.img);
				}
			}
		})
	})
	
	// - 请求路径：http://127.0.0.1:3002/edit
	// - 请求方法：post
	$("tbody").on("click","#sub",function(){
		$.ajax({
			type:"post",
			url:"http://127.0.0.1:3002/edit",
			dataType:"json",
			data:$("form").serialize(),
			success:function(res){
				if(res.code==200){
					alert(res.msg);
					location.href = "index.html";
					// $('.myimg').val(res.img);
				}
			}
		})
	})
</script>

删除英雄信息

根据Id删除对应英雄信息
先传入单击事件并指定删除指定函数，传入Id
提示用户是否要删除，确定之后进行删除操作
实现ajax请求

删除操作

function del(id) {
		if (window.confirm("确定要删除吗，小可爱？？")) {
			$.ajax({
				type: "get",
				url: "http://127.0.0.1:3002/delete",
				dataType: "json",
				data: {
					id: id
				},
				success: function(res) {
					if (res.code == 200) {
						alert(res.msg);
						location.href = "14.使用模本引擎实现英雄渲染.html";
					} else if (res.code == 201) {
						alert("删除失败！！")
					}
				}
			})
		}
	}

标签：function,img,res,formdata,案列,笔记,ajax,id
来源： https://blog.csdn.net/weixin_43434858/article/details/110222847