AJAX_day02

hello_funnychou

已于 2022-09-21 09:05:45 修改

阅读量208

点赞数

分类专栏： AJAX 文章标签： servlet javascript 前端 ajax 服务器

于 2022-09-20 19:38:33 首次发布

本文链接：https://blog.csdn.net/Funny_Chou/article/details/126959960

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.JSON

二.跨域错误

三.post请求

一.JSON

JS对象表示法，是前后端数据交换的一种格式

JSON.parse( ) 将JSON转为JS

JSON.stringify() 将JS转为JSON

通常JSON只有数组和对象

    <script>
			var person={
				name:'新哥',
				sex:'男',
				salary:50000
			}
			// console.log(person,typeof person)
			// 转为json
			// json：将数据以对象形式表现
			var str=JSON.stringify(person)
			// console.log(str,typeof str)
			// 将json转为js对象
			console.log(JSON.parse(str))
			
			var city=['北京','上海','广州','深圳','杭州']
			console.log(city,typeof city)
			var str1=JSON.stringify(city)
			console.log(str1,typeof str1)
			console.log(JSON.parse(str1))
	</script>

练习：完成删除功能，点击删除，获取传递的编号，请求删除的接口（DELETE http://127.0.0.1:3000/v1/emps/拼接编号），如果删除成功，警示框弹出‘删除成功’，否则弹出‘删除失败’

05_delete.html

<body>
		<input type="text" id="num" placeholder="请输入编号">
		<button id="btn">删除</button>
		<div id="cont"></div>
		<script>
			// 练习：请求删除员工的接口
			// 接口地址：http://127.0.0.1:3000/v1/emps/
			// 请求方法：delete
			btn.onclick=function(){
				// 获取文本框的值
				var id=num.value
				console.log(id)
				//创建HTTP请求对象
				var xhr=new XMLHttpRequest()
				//请求接口，传递编号
				xhr.open('DELETE','http://127.0.0.1:3000/v1/emps/'+id,true)
				// 发送请求
				xhr.send()
				// 添加事件，监听响应
				xhr.onload=function(){
					// 获取响应主体
					var result=xhr.responseText
					console.log(result)
					// 把JSON转为JS
					var obj=JSON.parse(result)
					console.log(obj)
					if(obj.code===200){
						alert('删除成功')
					}else{
						alert('删除失败')
					}
				}
			}
		</script>
</body>

练习：完成员工列表，点击提交，请求接口(get http://127.0.0.1:3000/v1/emps/list?pno=当前页码&count=每页数据量)，完成以下效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工列表</title>
		<style>
			table{
				border-collapse: collapse;
				text-align: center;
				width: 200px;
			}
			thead {
				background-color: lightgray;
			}
		</style>
	</head>
	<body>
		当前页码<input type="text" id="pno">
		每页数据量<input type="text" id="count">
		<button id="btn">提交</button>
		<hr>
		<table border='1px solid'>
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
				</tr>
			</thead>
			<tbody id="cont">
				
			</tbody>
		</table>
		<script>
			btn.onclick=function(){
				var id1=pno.value,id2=count.value
				console.log(id1,id2)
				// 创建http请求对象
				var xhr=new XMLHttpRequest()
				// 请求接口
				xhr.open('GET',`http://127.0.0.1:3000/v1/emps/list?pno=${id1}&count=${id2}`,true)
				// 发送请求
				xhr.send()
				// 绑定事件，监听响应
				xhr.onload=function(){
					// 获取响应主体
					var result=xhr.responseText
					console.log(result)
					// 把JSON转为JS
					var obj=JSON.parse(result)
					console.log(obj)
					if(obj.code===200){
						var emp=obj.data
						for(var i=0,str='';i<emp.length;i++){
							str+=`
								<tr>
									<td>${emp[i].eid}</td>
									<td>${emp[i].ename}</td>
								</tr>
							`
						}
						cont.innerHTML=str
					}else{
						alert('查询失败')
					}
				}
			}
		</script>
	</body>
</html>

练习：07_add.html添加员工，点击按钮，获取用户输入的值，请求添加员工的接口(post http://127.0.0.1:3000/v1/emps)，警示框弹出'添加成功'

    <body>
		姓名<input type="text" id="ename"><br>
		性别<input type="radio" name="sex" id="men" value="1">男
			<input type="radio" name="sex" id="women" value="0">女<br>
		生日<input type="text" id="birthday"><br>
		工资<input type="text" id="salary"><br>
		部门<select id="dept">
				<option value="10">研发部</option>
				<option value="20">运营部</option>
				<option value="30">市场部</option>
				<option value="40">测试部</option>
			</select><br>
		<button id="btn">提交</button>
	</body>
	<script>
		btn.onclick=function(){
			var n1=ename.value
			var n2=men.value
			var n3=women.value
			var n4=birthday.value
			var n5=salary.value
			var n6=dept.value
			console.log(n1,n2,n3,n4,n5,n6)
			// 创建http请求对象
			var xhr=new XMLHttpRequest()
			// 请求接口
			xhr.open('POST',`http://127.0.0.1:3000/v1/emps`,true)
			// POST请求需要设置请求的内容类型
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8')
			// 发送POST请求，将参数放入请求主体
			xhr.send(`ename=${n1}&sex=${n2===1 ? n2 : n3}&birthday=${n4}&salary=${n5}&deptid=${n6}`)
			// 绑定事件，监听响应
			xhr.onload=function(){
				// 获取响应主体
				var result=xhr.responseText
				console.log(result)
				// 把JSON转为JS
				var obj=JSON.parse(result)
				console.log(obj)
				if(obj.code===200){
					alert('添加成功')
				}else{
					alert('添加失败')
				}
			}
		}
	</script>

二.跨域错误

三.post请求

Ajax中，post请求传递的参数放入到了请求主体，还需设置请求的内容类型

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') 设置请求的内容类型，传递参数编码为 a=1&b=2

xhr.send('a=1&b=2') 传递的参数放入到了请求主体

注意事项：post和put两种都是将参数放入到请求主体

练习：08_put.html 完成修改员工，点击提交，获取用户输入的值，请求接口(put http://127.0.0.1:3000/v1/emps)，如果修改成功，警示框弹出‘修改成功’，否则‘修改失败’

    <body>
		编号<input type="text" id="eid"><br>
		姓名<input type="text" id="ename"><br>
		性别<input type="radio" name="sex" id="men" value="1">男
			<input type="radio" name="sex" id="women" value="0">女<br>
		生日<input type="text" id="birthday"><br>
		工资<input type="text" id="salary"><br>
		部门<select id="dept">
				<option value="10">研发部</option>
				<option value="20">运营部</option>
				<option value="30">市场部</option>
				<option value="40">测试部</option>
			</select><br>
		<button id="btn">提交</button>
	</body>
	<script>
		btn.onclick=function(){
			var n1=eid.value
			var n2=ename.value
			var n3=men.value
			var n4=women.value
			var n5=birthday.value
			var n6=salary.value
			var n7=dept.value
			console.log(n1,n2,n3,n4,n5,n6,n7)
			// 参数
			var params=`eid=${n1}&ename=${n2}&sex=${n3===1 ? n3 : n4}&birthday=${n5}&salary=${n6}&deptid=${n7}`
			// 创建http请求对象
			var xhr=new XMLHttpRequest()
			// 请求接口
			xhr.open('PUT',`http://127.0.0.1:3000/v1/emps`,true)
			// PUT请求需要设置请求的内容类型
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8')
			// 发送PUT请求，将参数放入请求主体
			xhr.send(params)
			// 绑定事件，监听响应
			xhr.onload=function(){
				// 获取响应主体
				var result=xhr.responseText
				console.log(result)
				// 把JSON转为JS
				var obj=JSON.parse(result)
				console.log(obj)
				if(obj.code===200){
					alert('修改成功')
				}else{
					alert('修改失败')
				}
			}
		}
	</script>