jQuery之AJAX学习与使用

最新推荐文章于 2024-03-13 07:00:00 发布
最新推荐文章于 2024-03-13 07:00:00 发布
阅读量220 收藏
点赞数 1
分类专栏： jQuery 文章标签： js ajax java jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qibulemingzi/article/details/109358184
版权

一、jQuery - AJAX 简介

  Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
  通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二、jQuery - AJAX的常用方法

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

  语法

$(selector).load(url,data,function(response,status,xhr))
url必需。规定您需要加载的 URL。
data可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)可选。规定 load() 方法完成时运行的回调函数。  额外的参数：response - 包含来自请求的结果数据  status - 包含请求的状态  （“success”、“notmodified”、“error”、“timeout”、“parsererror”）  xhr - 包含 XMLHttpRequest 对象
$.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)如果请求失败要运行的函数。
$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据

  语法

$.get(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 来规定回调
$.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>jquery ajax</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
 $(function(){
	//测试load
	$("#but1").click(function(){
		$("#div1").load("http://localhost:8080/JqueryAjax/main",
				function(resp,status){
					if(status=="success"){
						$("div").html("<table border='1px' width='500px'></table>");
						//将得到的json字符串转换成json对象
						var jsonobj=eval("("+resp+")");
						$(jsonobj).each(function(index,element){
							var tdstring="<td>"+element.userid+
					        "</td><td>"+element.username+
							"</td><td>"+element.userage+
							"</td><td>"+element.useraddress+
							"</td>";
							//$('<tr></tr>').html(tdstring).appendTo('table');
							$("table").append($('<tr></tr>').html(tdstring));
						});
					}
		});
	});
	
	//测试ajax的get请求，不带参数
	$("#but2").click(function(){
		$.ajax({
			url:"http://localhost:8080/JqueryAjax/main",
			type:"GET",
			dataType:"json",
			success:function(resp,status){
				$("#main1").empty();
				$(resp).each(function(index,element){
					var trstring="<tr><td>"+element.userid+
			        "</td><td>"+element.username+
					"</td><td>"+element.userage+
					"</td><td>"+element.useraddress+
					"</td></tr>";
			  		$("#main1").append(trstring);
				});
			},
			async:true,
			error:function(){}
		});
	});
	
	//测试ajax的get请求，带参数
	$("#but3").click(function(){
		//从文本框中得到请求参数
		var userid=$("#text1").val();
		var urlString="http://localhost:8080/JqueryAjax/findOne?userid="+userid;
		$.ajax({
			url:urlString,
			type:"GET",
			dataType:"json",
			success:function(resp,status){
				$("#main1").empty();
				$(resp).each(function(index,element){
					var trstring="<tr><td>"+element.userid+
			        "</td><td>"+element.username+
					"</td><td>"+element.userage+
					"</td><td>"+element.useraddress+
					"</td></tr>";
			  		$("#main1").append(trstring);
				});
			},
			async:true,
			error:function(){}
		});
	});
	
	
	//测试ajax的POST请求，不带参数
	$("#but4").click(function(){
		$.ajax({
			url:"http://localhost:8080/JqueryAjax/main",
			type:"POST",
			dataType:"json",
			success:function(resp,status){
				$("#main1").empty();
				$(resp).each(function(index,element){
					var trstring="<tr><td>"+element.userid+
			        "</td><td>"+element.username+
					"</td><td>"+element.userage+
					"</td><td>"+element.useraddress+
					"</td></tr>";
			  		$("#main1").append(trstring);
				});
			},
			async:true,
			error:function(){}
		});
	});
	
	//测试ajax的POST请求，带参数
	/*
	$("#but5").click(function(){
		//从文本框中得到请求参数
		var userid=$("#text1").val();
		var urlString="http://localhost:8080/JqueryAjax/findOne?userid="+userid;
		$.ajax({
			url:urlString,
			type:"POST",
			dataType:"json",
			success:function(resp,status){
				$("#main1").empty();
				$(resp).each(function(index,element){
					var trstring="<tr><td>"+element.userid+
			        "</td><td>"+element.username+
					"</td><td>"+element.userage+
					"</td><td>"+element.useraddress+
					"</td></tr>";
			  		$("#main1").append(trstring);
				});
			},
			async:true,
			error:function(){}
		});
	});
	*/
	
	//测试ajax的POST请求，带参数
	$("#but5").click(function(){
		//从文本框中得到请求参数
		var userid=$("#text1").val();
		$.ajax({
			url:"http://localhost:8080/JqueryAjax/findOne",
			type:"POST",
			data:{userid:userid},
			dataType:"json",
			success:function(resp,status){
				$("#main1").empty();
				$(resp).each(function(index,element){
					var trstring="<tr><td>"+element.userid+
			        "</td><td>"+element.username+
					"</td><td>"+element.userage+
					"</td><td>"+element.useraddress+
					"</td></tr>";
			  		$("#main1").append(trstring);
				});
			},
			async:true,
			error:function(){}
		});
	});
	
	
	//测试jquery的get方法
	$("#but6").click(function(){
		$.get("http://localhost:8080/JqueryAjax/main",
			  function(resp,status){
				$("#main2").empty();
				$(resp).each(function(index,element){
					var trstring="<tr><td>"+element.userid+
			        "</td><td>"+element.username+
					"</td><td>"+element.userage+
					"</td><td>"+element.useraddress+
					"</td></tr>";
			  		$("#main2").append(trstring);
				});
			  },
			  "json");
	});
	
	//测试jquery的post方法
	$("#but7").click(function(){
		$.post("http://localhost:8080/JqueryAjax/main",
			  function(resp,status){
				$("#main2").empty();
				$(resp).each(function(index,element){
					var trstring="<tr><td>"+element.userid+
			        "</td><td>"+element.username+
					"</td><td>"+element.userage+
					"</td><td>"+element.useraddress+
					"</td></tr>";
			  		$("#main2").append(trstring);
				});
			  },
			  "json");
	});
	
 });
</script>
</head>
<body>
	<center>
	<input id="but1" type="button" value="测试load"/>
	<div id="div1"></div>
	<hr>
	<input id="but2" type="button" value="测试ajax-get"/>
	<input id="but3" type="button" value="测试ajax-get带参数"/><br>
	<input id="text1" type="text" /><br>
	<input id="but4" type="button" value="测试ajax-post"/>
	<input id="but5" type="button" value="测试ajax-post带参数"/>
	<table id="main1" border="1px" width="500px"></table>
	<hr>
	<input id="but6" type="button" value="测试get"/>
	<input id="but7" type="button" value="测试post"/>
	<table id="main2" border="1px" width="500px"></table>
	</center>
</body>
</html>
夏至青柠
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript发送AJAX请求的代码
u012988209的专栏
05-05 876
var xmlhttp; if ( window.XMLHttpRequest ){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); }else{// code for IE6, IE5 xmlhttp = new ActiveXObject("
jQuery-Ajax 详解
m0_48982503的博客
12-14 1万+
一、什么是Ajax Ajax的全称是Asynchronous JavaScript And XML（异步JavaScript和XML）我们可以理解为：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax，它可以帮助我们轻松实现网页与服务器之间的数据交互。 二，jQuery中的Ajax 在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。 ...
「jQuery系列」jQuery中Ajax的运用
最新发布
日常笔记/总结/系列知识梳理
03-13 1110
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
jQuery Ajax 详细通俗讲解
lucien_ma的博客
08-25 2万+
jQuery Ajax Ajax 是一种异步、无刷新(或者说局部页面刷新)技术。 同步： 现在的大部分请求都是基于同步，所谓同步就是说必须等待请求之后给我返回结果了我才能继续往下操作。好比你要烧水，切菜，做饭。现在是同步，你必须等水烧开再去干其他事情。 异步： 异步就是，请求发送之后，不管你是否返回结果，我继续往下操作。比如，你烧水的同时，不管水烧没烧开，你继续你其他的工作，去切菜。 刷新： 类似我们的 <a></a>标签的点击链接，以及表单元素的提交，都会刷新页面
jquery的函数实现Ajax
兮遥
08-21 1047
1、$.ajax() $.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax( { name:value, name:value, ... } ) async ： 布尔值，表示请求是否异步处理。默认是 true (可以不写) contentType ：发送数据到服务器时所使用的内容类型。默认是"application/x-www-form-urlencoded"。 data：规定要发送到服务器的数据，可...
Ajax基础（应用场景｜jquery实现Ajax｜注意事项｜Ajax发送json数据｜Ajax携带文件数据）
Mchen的博客
11-20 3410
AJAX翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互也是用XML进行数据传输（当然，传输的数据不只是XML，目前更多的使用Json数据）。（XML应用于Web开发的许多方面，常用于简化数据的存储和共享）AJAX不是什么新的编程语言，而是一种使用现有标准的新方法AJAX最大的优点就是不需要重新加载整个页面的情况下，可以与服务器交换数据并更新网页内容（简单来说就是，在网页前端刚输入完数据，后端其实已经验证完数据了，不需要等点击提交了）
Jquery之Ajax运用 学习运用篇
01-19
还是先说一些基础知识： 语法：$.ajax({option}) option表示参数。以key/value形式出现。 常用参数：type:post/get。 url:发送请求的地址。 data:{object:object} 发送到服务器的数据，必须为key/value格式。可以...
使用jQuery简化Ajax开发
03-02
本文内容包括：jQuery是什么？一些简单的代码简化使Ajax变得简单为HTML...学习jQuery基本原理，探索其特性和功能，执行一些常见的Ajax任务并掌握如何使用插件扩展jQuery。jQuery是什么？jQuery由JohnResig创建于2006年
jquery、ajax学习电子书.zip
07-25
ajax、jquery这个是实际开发中使用最多的脚本，js在兼容性上有待提高，学会这些电子书，那么已经可以算是初步入门，可以进行实际开发了。
jQuery 学习第五课 Ajax 使用说明
01-19
jQuery提供了若干个ajax函数，他们大同小异，只是为了处理不同类型的数据而分开来。最简单的是get(url,parameters,callback),这个函数发起一个GET请求，将服务器返回的数据传递给callback处理。 下面的例子实现了当...
用jQuery实现Ajax
m0_53698336的博客
11-01 6571
Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，它并不是一种技术，而是多种技术的综合体，其中包括 JavaScript、XML、JSON、DOM、CSS、HTML 以及最重要的 XMLHttpRequest 对象。通过 Ajax 可以异步从服务器请求数据并将数据更新到网页中，整个过程不需要重载（刷新）整个网页，可以将网页的内容更快的呈现给用户。 这里的异步是指，当程序执行到 Ajax 代码时，将
jQuery 与 Ajax
Wzc0720的博客
10-28 3620
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。种类型的适合用 ajax，避免了属性整个页面带来的资源浪费。
jQuery中的Ajax
weixin_45375510的博客
10-11 4451
jQuery×Ajax jquery提供多个与ajax有关的方法，通过jquery ajax方法，能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON，同时能够把接收的数据更新到DOM对象。代替XMLHttpRequest，但其实jquery还是封装的异步对象。 (1)$.ajax() $.ajax()是jquery中ajax请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax({key: value, key: value, ...})
JQuery发送Ajax请求的5种简单使用方式，一看就会~
冷芝士鸭的学习笔记
10-19 8140
JQuery发送Ajax请求的5种简单使用方式，一看就会~ 1、Ajax简介 1.1 什么是Ajax Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的新方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在
jQuery的Ajax实例（附完整代码）
热门推荐
Yuan_mingyu的博客
02-02 8万+
目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白，想在这里分享一下我的学习内容，就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程，所以遇到不懂得问题，也只有求助于网络，通过度娘，了解到了一些论坛、博客。在发现了众多技术大牛的同时，我也发现，一些像我这样的小白，由于能力有限，在查找相关资料的时候，对于大佬的一些操作理解困难，虽说能照猫...
jQuery-Ajax（详解）
sunshao904
05-30 2万+
安装Web环境 Ajax方法需要与Web服务器端进行交互，需要有环境才可正常使用，安装环境的工具包有很多，可以选择自行下载。 jQuery中的Ajax 在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。 一、 load( ) 方法 结构load( url , [data] , [callback] ) 参数解释 捕获.PNG 1.1 应用 1.1.1首先构建一
jquery实现Ajax请求
qq_51635297的博客
11-09 7662
jquery实现Ajax请求
Ajax和JQuery
捌椒的博客
09-18 1488
是什么?javascript 的代码框架。有什么用?简化代码，提高效率。核心write less do more , 写得更少，做的更多。
Ajax和jQuery
weixin_56341892的博客
04-09 4242
Ajax和jQuery 一、Ajax 1、Ajax概述 ajax：Asynchronous JavaScript and XML（Asynchronous：异步的 JavaScript 和 XML）。 Asynchronous: 异步的意思 JavaScript：javascript脚本，在浏览器中执行 xml : 是一种数据格式 ajax是一种做局部刷新的方法，不是一种语言。 是浏览器客户端上的前端技术，是多个技术联合实现的产物。 ajax包含的技术主要有javascript，dom，css,，x
jquery ajax请求实例
04-29
jQuery是一种JavaScript库，ajax是一种能够向服务器端发送和接收请求的技术。在Web开发中，ajax技术可以让页面在不...通过这个实例，我们可以学习到如何使用jQuery来进行ajax请求，以及如何处理请求成功和失败的情况。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值