Web前端——Ajax练习

最新推荐文章于 2024-05-18 11:09:56 发布
最新推荐文章于 2024-05-18 11:09:56 发布
阅读量214 收藏 1
点赞数
分类专栏： Web前端练习 文章标签： 前端 ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52957637/article/details/126342061
版权

Web前端——Ajax练习

文章目录

一、Ajax初识

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

1、Ajax特点

1、优点
①不需要插件支持
②用户体验极佳。不刷新页面即可获取可更新的数据
③提升Web程序的性能。在传递数据方面做到按需发送，不必整体提交
④减轻服务器和带宽的负担。将服务器的一些操作转移到客户端
2、缺点
①前进、后退的功能被破坏。因为Ajax永远在当前页，不会记录前后页面
②搜索引擎的支持度不够。因为搜索引擎爬虫还不能理解JS引起数据的内容

2、常见状态码

1、100 ~ 199：表示连接接续
2、200 ~ 299：表示各种意义上的成功
3、300 ~ 399：表示重定向
4、400 ~ 499：表示各种客户端错误
5、500 ~ 599：表示各种服务器错误

二、jQuery.Ajax

1、语法格式

$.ajax({参数一:value, 参数二:value, ......})

2、参数

url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
data：要发送的数据
success：成功之后执行的回调函数(全局)

三、源码

在这里插入图片描述

1、登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
	<script src="./js/jquery-3.6.0.js"></script>
</head>
<body>
	<form action="http://110.42.140.234:8083/user/toLogin">
		<table border="0" align="center">
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username" id="username"><br></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="psw" id="psw"><br></td>
			</tr>
			<tr>
				<td><input value="登陆" type="button" onclick="login()"><br></td>
			</tr>
		</table>
	</form>
</body>

<script>
	function login(){
		$.ajax({
				url:'http://110.42.140.234:8083/user/toLogin',
				type:'get',
				data:{
				   username:$('#username').val(),
				   psw:$('#psw').val()
				 },
				success:function (e){
					let data = e.data;
					console.log(data);
					if(data.login_type.toString() == '登录成功！'){
						alert(data.login_type);
						message();
					}else if(data.login_type.toString() == '登录失败，账号或密码错误！'){
						alert(data.login_type);
					}
				}
		});
	}
	 
	 //跳转获取数据页面
	 function message(){
		 location.href = "./message.html";
	 }
</script>
</html>

2、获取数据界面

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>获取数据</title>
	<script src="./js/jquery-3.6.0.js"></script>
	<link rel="stylesheet" href="./css/bootstrap.min.css" />
</head>
<body>
	<input type="button" onclick="getMessage()" value="获取数据">
	<input type="button" onclick="addMessage()" value="添加数据">
	<input type="button" onclick="back()" value="返回登陆界面">
	<div class="container  table-striped">
		<table class="thead-dark" width="80%" align="center" >
			<tr>
				<td>用户ID</td>
				<td>用户名</td>
				<td>年龄</td>
				<td>地址</td>
				<td>电子邮件</td>
				<td>学历</td>
				<td>创建时间</td>
				<td>操作</td>
			</tr>
			<tbody id="content">
					
			</tbody>
		</table>
	</div>
		
	<script>
		var data = "";
		function getMessage(){
			$.ajax({
				url:'http://110.42.140.234:8083/user/getMessage',
				type:'get',
				success:function(e){
					data = e.data;
					let content = "";
					for (let i = 0; i < data.length; i++) {
						content += "<tr>" +
						"<td>" + data[i].id	+ "</td>" +
						"<td>" + data[i].name + "</td>" +
						"<td>" + data[i].age + "</td>" +
						"<td>" + data[i].adress + "</td>" +
						"<td>" + data[i].email + "</td>" +
						"<td>" + data[i].education + "</td>" +
						"<td>" + data[i].creatTime + "</td>" +
						"<td>" + "<button οnclick=\"dele("+data[i].id+")\">删除</button>" + "</td>" +
						"</tr>"
					}
					$('#content').html(content);
				}
			})
		}
		
		//跳转删除页面
		function dele(id){
			location.href = "./delete.html?id="+id;
		}
		
		//跳转到添加数据界面
		function addMessage(){
			location.href = "./addMessage.html";
		}
		
		//返回到登陆界面
		function back(){
			location.href = "./index.html";
		}
	</script>
</body>
</html>

3、删除数据界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除界面</title>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<script src="./js/jquery-3.6.0.js"></script>
	</head>
	<body>
		<input type="button" id="btn" onclick="backMessage()" value="返回">
		<div class="container  table-striped">
			<table class="thead-dark" width="80%" align="center" >
				<tr>
					<td>用户ID</td>
					<td>用户名</td>
					<td>年龄</td>
					<td>地址</td>
					<td>电子邮件</td>
					<td>学历</td>
					<td>创建时间</td>
					<td>操作</td>
				</tr>
				<tbody id="content">
						
				</tbody>
			</table>
		</div>
	</body>
	<script>
		function getPar(par){
		    //获取当前URL
		    var local_url = document.location.href; 
		    //获取要取得的get参数位置
		    var get = local_url.indexOf(par +"=");
		    if(get == -1){
		        return false;   
		    }   
		    //截取字符串
		    var get_par = local_url.slice(par.length + get + 1);    
		    //判断截取后的字符串是否还有其他get参数
		    var nextPar = get_par.indexOf("&");
		    if(nextPar != -1){
		        get_par = get_par.slice(0, nextPar);
		    }
		    return get_par;
		}
		//请使用Get请求使点击删除时，页面发生跳转，并传递用户参数“id”到本页面
		var local_id = getPar("id");
		console.log("获得页面传参：id："+local_id);
		
		$.ajax({
			url:'http://110.42.140.234:8083/user/deleteMessage',
			tpye:'get',
			data:{
				messageId:local_id
			},
			success:function(e){
				console.log(e);
				alert(e.data.delete_type);
			}
		});
		
		$.ajax({
			url:'http://110.42.140.234:8083/user/getMessage',
			type:'get',
			success:function(e){
				data = e.data;
				let content = "";
				for (let i = 0; i < data.length; i++) {
					if(i == local_id) i++;
					content += "<tr>" +
					"<td>" + data[i].id	+ "</td>" +
					"<td>" + data[i].name + "</td>" +
					"<td>" + data[i].age + "</td>" +
					"<td>" + data[i].adress + "</td>" +
					"<td>" + data[i].email + "</td>" +
					"<td>" + data[i].education + "</td>" +
					"<td>" + data[i].creatTime + "</td>" +
					"<td>" + "<button οnclick=\"dele("+data[i].id+")\">删除</button>" + "</td>" +
					"</tr>"
				}
				$('#content').html(content);
			}
		})
		
		function backMessage(){
			location.href = "./message.html";
		}
	</script>
</html>

4、添加数据界面

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>添加数据</title>
		<script src="./js/jquery-3.6.0.js"></script>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
	</head>
	<body>
		  <form action="http://110.42.140.234:8083/user/addMessage" id="form">
		      <table border="0" align="center">
				  <tr>
					  <td>用户ID：</td>
					  <td><input type="text" name="id" id="id"><br></td>
				  </tr>
				  <tr>
					  <td>用户名：</td>
					  <td><input type="text" name="name" id="name"><br></td>
				  </tr>
				  <tr>
					  <td>年龄：</td>
					  <td><input type="text" name="age" id="age"></input><br></td>
				  </tr>
				  <tr>
					  <td>地址：</td>
					  <td><input type="text" name="adress" id="adress"><br></td>
				  </tr>
				  <tr>
					  <td>电子邮件：</td>
					  <td><input type="text" name="email" id="email"><br></td>
				  </tr>
				  <tr>
					  <td>学历：</td>
					  <td><input type="text" name="education" id="education"><br></td>
				  </tr>
				  <tr>
					  <td><input type="button" value="添加" onclick="submitMessage()"></td>
					  <td><input type="button" value="返回" onclick="back()"></td>
				  </tr>
			  </table>
		  </form>
		  <div class="container  table-striped">
			  <div id='content'>
							  
			  </div>
		  </div>
	  <script>
		
		//返回按钮
		function back(){
			location.href = "./message.html";
		}
		
		//提交按钮
		let new_data = "";
		function submitMessage(){
			$.ajax({
				url:'http://110.42.140.234:8083/user/addMessage',
				type:'get',
				data:
				{
					id:$('#id').val(),
					name:$('#name').val(),
					age:$('#age').val(),
					adress:$('#adress').val(),
					email:$('#email').val(),
					education:$('#education').val(),
					creatTime:$('#creatTime').val()
				},
				success:function(e){
					alert(e.data.add_type);
					$('#form').remove();
					$.ajax({
						url:'http://110.42.140.234:8083/user/getMessage',
						type:'get',
						success:function(e1){
							data = e1.data;
							//创建表头
							let content = "<table class='thead-dark' width='80%' align='center' >" +
							"<tr>" +
							"<td>用户ID</td>" +
							"<td>用户名</td>" +
							"<td>年龄</td>" +
							"<td>地址</td>" +
							"<td>电子邮件</td>" +
							"<td>学历</td>" +
							"<td>创建时间</td>" +
							"<td>操作</td>" +
							"</tr><tbody>" ;
							for (let i = 0; i < data.length; i++) {
								//获取添加前的数据
								content += 
								"<tr>" +
								"<td>" + data[i].id	+ "</td>" +
								"<td>" + data[i].name + "</td>" +
								"<td>" + data[i].age + "</td>" +
								"<td>" + data[i].adress + "</td>" +
								"<td>" + data[i].email + "</td>" +
								"<td>" + data[i].education + "</td>" +
								"<td>" + data[i].creatTime + "</td>" +
								"<td>" + "<button οnclick=\"dele("+data[i].id+")\">删除</button>" + "</td>" +
								"</tr>" 
								
							}
							//获取添加后的数据
							content += 
							"<tr>" +
							"<td>" + e.data.add_message.id	+ "</td>" +
							"<td>" + e.data.add_message.name + "</td>" +
							"<td>" + e.data.add_message.age + "</td>" +
							"<td>" + e.data.add_message.adress + "</td>" +
							"<td>" + e.data.add_message.email + "</td>" +
							"<td>" + e.data.add_message.education + "</td>" +
							"<td>" + e.data.add_message.creatTime + "</td>" +
							"<td>" + "<button οnclick=\"dele("+e.data.add_message.id+")\">删除</button>" + "</td>" +
							"</tr>" 
							"</tbody></table>";
						
							$('#content').html(content);
						}
					});
					
				}
			});
		}
	  </script>
	</body>
</html>

四、运行结果

1、登陆界面

1

2

2、获取数据界面

1

2

3、删除数据界面

1

删除id为3的数据
在这里插入图片描述

4、添加数据界面

1
2
3
4

望丶穿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端网络——Ajax使用
01-08
AJAX是什么？ AJAX 可以用于创建快速动态的网页。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ajax(Asynchronous javaScript and XML 异步的javascript和xml)可实现异步，局部的获取数据...
web前端--js、jquery和Ajax练习
Inmaturity_7的博客
06-10 256
web前端–js、jquery和Ajax练习 一、js实现交换两个输入框的值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>交换字符</title> </head> <style> input{ width: 50px; height: 25px; color: coral; } .Chars{
ajax入门练习
m0_45016353的博客
12-28 507
系列文章目录 文章目录系列文章目录前言一、ajax是什么？二、使用步骤1.写静态html（动态jsp）页面2.带有ajax技术的前段代码3.响应的servlet代码效果图 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、ajax是什么？ AJAX = Asynchronous JavaScript and XML（异步的 Java
简单练习ajax
qq_44255648的博客
07-07 178
1、load()函数 <h3>你最喜欢读什么书？</h3> <p id="cont"></p> <button>点击</button> $(function(){ $("button").click(function () { $("#cont").load("book.php"); }) ...
前端复习——AJAX（一）
weixin_45792414的博客
07-05 469
前端Ajax
AJAX的实例练习
wy230_221的博客
11-21 2442
AJAX的实例练习 几乎每个Web应用都能从Ajax技术中获益，但不是所有都能达到最好的效果。从验证开始就很合适，但是不要限制你的主动性。你当然可以使用Ajax提交数据，但也许不能把它作为提交数据的主要方法。 其次，要注意浏览器版本问题，。如果大量用户（或者特别重要的用户）还在使用比较旧的浏览器，如IE 5、Safari 1.2或Mozilla 1.0之前的版本，Ajax技术就不能奏效。如果这
web前端开发AJAX学习笔记
06-24
web前端开发AJAX学习笔记
谷歌浏览器插件—— Ajax Interceptor
03-16
一个用于修改 ajax 请求响应的 chrome 扩展，修改ajax请求数据
前端经典——ajax前后数据交互.rar
11-29
前端经典——ajax前后数据交互
13_JavaWeb——AJAX配套资源
05-02
此资源与我的博客13_JavaWeb——AJAX中的两个案例对应，其中Demo5使用AJAX异步处理页面实现对用户输入的实时校验，Demo6使用Axios+JSON完成对品牌列表的展示和添加，取代了先前的JSP。希望有所帮助
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 668
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1108
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 506
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器
最新发布
shijialeya
05-18 379
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器进行数据格式化。
综合性练习-验证码
cj13106811623的博客
05-15 822
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
【VueRouter 的基本使用】
2302_76611599的博客
05-17 172
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
前端之电力系统SVG图低代码
weixin_38233449的博客
05-14 262
有了线，当然需要面，这时候一个polygon类就可以解决，唯一和polyline不同的是，path最后一个点需要Z闭合。两点一线，只要知道两个点的坐标就可以，但是基础图元可以旋转，也可以闪烁，所以这些属性都需要动态计算。其实所有的图形都是由点，线，面组成的。ployline也是用path就可以了，但是中间的点需要连起来，样式的计算需要循环拼接字符串。两点可以组成线，多点可以组成折线，这就需要一个polyline类去解析每个折线。svg里面的渲染最有难度的大圆弧和小圆弧，需要用到三角函数。
python EEL + vue3.js 简单示例
bigcarp的专栏
05-15 185
eel官方示例中暴露的js函数是全局函数，vue中的自定义函数作用域通常都是组件范围内。要让eel.js调用，需要将其升为全局可用。一般方法有 app.config.globalProperties 或 mixin等。
web前端基础练习题
02-28
以下是一些常见的Web前端基础练习题： 1. 创建一个简单的HTML页面，包含一个标题、一个段落和一个图片。 2. 使用CSS样式设置页面的背景颜色、字体样式和大小。 3. 创建一个导航栏，包含多个链接，并使用CSS样式进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值