jQuery_基础学习4

最新推荐文章于 2024-05-05 23:51:11 发布
最新推荐文章于 2024-05-05 23:51:11 发布
阅读量153 收藏
点赞数
分类专栏： jQuery 前端 JavaScript 文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_zhiyi/article/details/108664039
版权
前端 同时被 3 个专栏收录
39 篇文章 0 订阅
订阅专栏
JavaScript
27 篇文章 0 订阅
订阅专栏
jQuery
3 篇文章 0 订阅
订阅专栏

jQuery-Ajax简介
1.AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新

load()从服务器加载数据，并把返回的数据放置到指定的元素中

语法：
$(selector).load(url,data,function(response,status,xhr))

url必需。规定您需要甲在的URL
data可选。规定连同请求发送到服务器的数据
function(response,status,xhr)可选。规定load()方法完成时运行的回调函数。
额外的参数：
response-包含来自请求的结果数据
status-包含请求的状态
(“success”、“notmodified”、“timeout”、“parsererror”)
xhr-包含XMLHttpRequest对象
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#but1").click(function(){
					$("div").load("http://127.0.0.1:8080/ajaxdemo/studentall",
					function(resp,status,xhr){
						if(status=="success"){
							$("div").html("<table border='1px' width='500px'></table>");
							var jsonobj=eval("("+resp+")");
							$(jsonobj).each(function(index,element){
								var tdstring="<td>"+element.stuid+
							    "</td><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddress+
								"</td>";
								$('<tr></tr>').html(tdstring).appendTo('table');
							});
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="but1" value="测试load" />
		<div id="">
		</div>
	</body>
</html>

在这里插入图片描述

$.ajax()执行异步AJAX请求

定义和用法
ajax（）方法用于执行AJAX（异步HTTP）请求。
所有的jQuery AJAX方法都使用Ajax（）方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value,name:value,…})

url规定发送请求的URL。默认是当前页面。
type规定请求的类型（GET或POST）
data规定要发送到服务器的数据
dataType预期的服务器响应的数据类型
success(result,status,xhr)当请求成功时运行的函数
async布尔值，表示请求是否异步处理 。默认是true
error(xhr,status,error)如果请求失败要运行的函数。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#but1").click(function(){
					//jquery的ajax方法的get方式
					$.ajax({
						url:"http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid=1001&stuname=zhangsan",
						async:true,
						type:"GET",
						success:function(resp,status,xhr){
							$("#main").empty();
							$(resp).each(function(index,element){
								 rows="<tr><td>"+element.stuid+
							    "</td><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddress+
								"</td></tr>";
								 $("#main").append(rows);

							});
						},
						dataType:"json"
					});
				});
				$("#but2").click(function(){
					//jquery的Ajax方法的post方式1
					//发往服务器的数据跟随在url后面【查询字符串参数】
					/*
					$.ajax({
					url:"http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid=1001&stuname=zhangsan",
					async:true,
					type:"POST",
					success:function(resp,status,xhr){
					$("#main").empty();
					$(resp).each(function(index,element){
					rows="<tr><td>"+element.stuid+
					"</td><td>"+element.stuname+
					"</td><td>"+element.stuage+
					"</td><td>"+element.stuaddress+
					"</td></tr>";
					 $("#main").append(rows);
							   });
								},
							dataType:"json"
								});
							*/
						   //jQuery的ajax方法的post方式2
						   //发往服务器的数据封装到http协议中【form表单提交数据】
						   $.ajax({
						   	 	url:"http://127.0.0.1:8080/ajaxdemo/studentstuidstuname",
						    	async:true,
						  	type:"POST",
						  data:{stuid:'1001',stuname:'zhangsan'},
							success:function(resp,status,xhr){
							$("#main").empty();
				   	   $(resp).each(function(index,element){
						  rows="<tr><td>"+element.stuid+
						  "</td><td>"+element.stuname+
						   "</td><td>"+element.stuage+
						   	"</td><td>"+element.stuaddress+
						   		"</td></tr>";
						   		 $("#main").append(rows);
								  });
							  },
							  dataType:"json"
						  });
				    });
				  })
		</script>
	</head>
	<body>
		<input type="button" name="" id="but1" value="测试ajax()_get" />
		<input type="button" name="" id="but2" value="测试ajax()post" />
		<table border="1px" id="main" width="500px"></table>
	</body>
</html>

在这里插入图片描述

$.get()使用ajax的HTTP GET请求从服务器甲在数据

语法：
$.get(URL,data,function(data,status,xhr),dataType)

URL必需。规定您需要请求的URL
data可选。规定连同请求发送到服务器的数据
unction(data,status,xhr)可选。规定当请求成功时运行的函数。
额外的参数：
data - 包含来自请求的结果数据
status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）xhr - 包含 XMLHttpRequest 对象
dataType可选。规定预期的服务器响应的数据类型。
默认地，jQuery 会智能判断。
可能的类型：
“xml” - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"script" - 以 JavaScript 运行响应，并以纯文本返回
"json" - 以 JSON 运行响应，并以 JavaScript 对象返回
"jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$.get("http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid=1001&stuname=zhangsan",
					     function(resp,status,xhr){
							 $("#main").empty();
							 $(resp).each(function(index,element){
								var row="<tr><td>"+element.stuid+
								"</td><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddress+"</td></tr>";
								 $("#main").append(row);
							 });
						 },"json");
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试get()"/>
		<table id="main" border="1px" width="500px"></table>
	</body>
</html>

在这里插入图片描述

$.post()使用 AJAX 的 HTTP POST 请求从服务器加载数据

语法
$(selector).post(URL,data,function(data,status,xhr),dataType)

URL必需。规定将请求发送到哪个 URL。
data可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。规定当请求成功时运行的函数。
额外的参数：
data - 包含来自请求的结果数据
status - 包含请求的状态
（“success”、“notmodified”、“error”、“timeout”、“parsererror”）xhr - 包含 XMLHttpRequest 对象
dataType可选。规定预期的服务器响应的数据类型。
默认地，jQuery 会智能判断。可能的类型：
“xml” - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"script" - 以 JavaScript 运行响应，并以纯文本返回
"json" - 以 JSON 运行响应，并以 JavaScript 对象返回
"jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
				    $.post("http://127.0.0.1:8080/ajaxdemo/studentstuidstuname",
					     {stuid:'1001',stuname:'zhangsan'},
					     function(resp,status,xhr){
							 $("#main").empty();
							 $(resp).each(function(index,element){
							 	var row="<tr><td>"+element.stuid+
							 	"</td><td>"+element.stuname+
							 	"</td><td>"+element.stuage+
							 	"</td><td>"+element.stuaddress+"</td></tr>";
							 	$("#main").append(row);
							 });
						 },"json");
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试post()"/>
		<table id="main" border="1px" width="500px"></table>
	</body>
</html>

在这里插入图片描述

H之一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery 基础知识学习（详尽版）
菜鸟心声：学的不仅是技术，更是梦想！
03-13 3043
JQuery 详尽的基础知识学习jQuery 语法jQuery 选择器jQuery 选择器（大全）jQuery 事件ready()holdReady()on()off()one()其他事件案例01jQuery CSS样式案例02jQuery DOM遍历遍历父元素案例03遍历同级元素案例04遍历子元素案例05first()last()eq(number)filter(selector)not(selector)jQuery 增删元素增加元素删除元素案例06jQuery 尺寸jQuery 效果显示隐藏淡入淡出滑
jQuery_基础教程学习
12-25
Jquery的知识 pdf格式的
学习jQuery这一篇就够了
热门推荐
轻松的小希
11-25 9万+
目录第一章 jQuery简介1.1、jQuery简介1.2、jQuery官网1.3、jQuery版本介绍1.4、jQuery引入方式1.5、jQuery快速使用1.6、jQuery两把利器第二章 jQuery核心函数2.1、选择器2.1.1、基本选择器2.1.1.1、标签选择器2.1.1.2、id选择器2.1.1.3、class选择器2.1.1.4、通配符选择器2.1.1.5、并集选择器2.1.1.6、交集选择器2.1.2、层级选择器2.1.2.1、子代选择器2.1.2.2、后代选择器2.1.2.3、兄弟选
JQuery基础学习
十九万里的博客
12-19 694
jquery基础学习笔记
jQuery的基础学习
weixin_49794837的博客
09-18 519
jQuery的基础 jQuery框架的概念：jQuery框架是在JavaScript的基础上，将常用操作进行封装，使页面特效实现更加容易、快速。 一、jQuery的概念 jQuery是一个JavaScript函数库。另外，jQuery也是一个轻量级“写得少，做得多”的JavaScript库。其实，这就跟Java中的那个API很相似。 jQuery库包含以下功能： HTML元素选取； HTML元素操作； CSS操作； HTML事件函数； JavaScript特效和动画； HTML DOM遍历和修改； AJ
JQuery学习总结
qq_38176216的博客
11-29 1807
一、安装Jquery 1.下载Jquery 下载地址：https://jquery.com/download/ 2.通过CDN(内容分发网络)引用它 百度CDN：https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js //可在浏览器中使用$.fn.jquery命令查看当前jQuery使用的版本 二、Jquery语法 1.Jquer是选取HTML元素，并对选取的元素执行某些操作 基础语法： $(selector).action() 实例: $(
Java Web 06_JQuery基础
weixin_64646820的博客
12-22 1214
文章目录 如何学习jQuery 如何在项目中使用jQuery jQuery构造函数 jQuery语法及如何获取页面元素 jQuery选择器分类 jQuery基本选择器 jQuery层次选择器 jQuery属性选择器 DOM操作的分类 jQuery查找元素节点 jQuery设置内容和属性 创建元素节点 删除元素/内容 追加DOM CSS样式 为什么要学习jQuery动画和特效？ 幻灯片效果 Ajax的原理介绍 Ajax的优势 Json数据
jQuery学习笔记·jQuery基础
zjlwdqca的博客
01-08 2237
jQuery学习笔记·jQuery基础 jQuery目录jQuery学习笔记·jQuery基础jQuery资源jQuery和Js入口函数的区别jQuery入口函数的四种写法jQuery的冲突问题jQuery静态方法和实例方法静态方法创建和调用实例方法创建和调用静态方法each方法js原生函数forEach遍历数组jQuery的each静态方法遍历数组静态方法map方法利用原生JS的map方法遍历利用jQuery的map方法遍历jQuery中的each静态方法和map静态方法的区别jQuery的其他静态方法$
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1267
本文主要介绍有关jQuery的相关知识点
jquery基础学习记录
xjw的博客
06-30 3946
入口函数 再昨天过了一遍JavaScript之后，我觉得有必要了解一下，jQuery的使用，我主要看的是菜鸟教程，也比较简单易懂，先暂时有个印象了解一下吧，后面需要用到也方便查，在实践中去深入学习。 点击开发参考手册 另外，过了一下基础知识之后，我接下来可能去稍微看一下css，然后就学习前后端分离的知识吧。 ...
jQuery 学习
最新发布
2401_84152991的博客
05-05 909
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Jquery_基础学习笔记
08-28
Jquery_基础学习笔记 jquery还是要好好看看 不错的框架
jQuery-Lerning.zip_Jquery 基础教程_javascript 教程_jquery_web前端
09-22
4. **动画效果**：jQuery的动画功能包括`fadeIn()`, `fadeOut()`, `slideToggle()`等，这些方法可以轻松创建出平滑的过渡效果。`animate()`方法则允许自定义复杂的动画效果。 5. **Ajax交互**：jQuery的`$.ajax()`,...
jQuery_EasyUI_jc.rar_JQ_easyui_jquery_jquery easyui
09-24
1. **jQuery基础**：首先，你需要理解jQuery，这是一个强大的JavaScript库，简化了DOM操作、事件处理和Ajax交互。它通过简洁的API让JavaScript编程变得简单易行。 2. **jQuery EasyUI介绍**：jQuery EasyUI 是...
Jquery_学习笔记.zip
11-01
总的来说，这个学习笔记覆盖了jQuery的基础用法，如选择器、DOM操作、事件处理和动画，同时也展示了Layui如何与jQuery协同工作，提供一个用户友好的前端界面。对于任何想要提升前端开发技能，尤其是掌握jQuery和...
web表格制作
H_zhiyi的博客
08-20 1万+
1.表格的制作 1、表格元素–<table> 表格中的行–<tr> 表格中的列–<td> 表格中的表头–【居中/加粗】 table标记的边框–border table标记的宽度–width table标记的高度–height table标记的水平对齐方式–align table标记的表格背景色–bgcolor table标记的表格边框色–bordercolor table标记的表格中的内容与边框之间的距离–cellpadding table标记的表格中的边框与边框之间的距
HTML标签书写格式大全
H_zhiyi的博客
09-28 3591
一、常用浏览器与浏览器内核 1.常用浏览器 chromo(推荐谷歌) Firefox(火狐) IE浏览器 Opera浏览器 safari浏览器 2.浏览器内核 浏览器内核的主要组成部分： 渲染引擎（layout或engine）和JS引擎 渲染引擎：负责获取网页的内容（HTML.XML.图像等）、整理信息（加入CSS等），已经计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有所不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序
查找字符串中所有某个字符出现的位置
H_zhiyi的博客
11-05 1355
//查找字符串中所有i出现的位置 function search(str){ //index 为 i出现的位置 var index = str.indexOf('i') //num为i出现的次数 var num = 0 while(index !== -1){ console.log(index); num ++ index += 1 index = st
HTML表单元素简介
H_zhiyi的博客
08-21 1118
1表单元素 input 文本框/密码框/单选按钮/复选框… 1.1文本框<input type=”text” name=”username” value=”初始值”></input> 属性type=”text”–表示文本框 属性name=”username”—告诉后台处理程序文本框中输入的数据值 属性value=”初始值”-------初始值 1.2密码框<input type=”password” name=”password” value=”初始密码”></
jQuery_Succinctly：英文PDF版
"jQuery_Succinctly" 《jQuery_Succinctly》是由Cody ...《jQuery_Succinctly》是一本深入浅出的jQuery教程，适合初学者和有一定经验的开发者阅读，通过学习，读者将能够熟练运用jQuery提升网页开发的效率和质量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值