jQuery Ajax 操作函数

最新推荐文章于 2024-11-11 22:05:17 发布

LW0512

最新推荐文章于 2024-11-11 22:05:17 发布

阅读量235

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/LW0512/article/details/109228658

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了jQuery中的AJAX操作，包括load()函数用于动态加载HTML内容，get()和post()方法分别进行GET和POST请求，以及通用的$.ajax()方法。示例代码展示了如何使用这些方法从服务器获取数据并处理响应。重点讨论了参数设置和数据类型的处理。

摘要由CSDN通过智能技术生成

jQuery Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据

load()

load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中

load(url,data,function(response,status,xhr))

参数	描述
url	规定要将请求发送到哪个URL
data	可选，规定连同请求发送到服务器的数据
function（response,status,xhr）	可选，规定当请求完成时运行的函数额外的参数： - response-包含来自包含的结果数据 - status-包含请求的状态（“success”，“notmodified”，“error”，“timeout”或“parsererror”） - xhr-包含XMLHttpRequest对象

在这里插入图片描述

<button id="btn">点击按钮</button>
	<p>替换p里面的内容</p>
<script>
	$(function(){
		$("#btn").click(function(){
			$("p").load("one.txt");
		})
	})
		</script>

get()

get() 方法通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

$(selector).get(url,data,success(response,status,xhr),dataType)

在这里插入图片描述
$.get() 等价

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

<script>
			$(function(){
				$.get("data/list.json",function(data){
					console.log(data);
				},"json")
				
				$.ajax({
				  url: "data/list.json",
				  success: function(data){
				  	console.log(data);
				  },
				  dataType: "json"
				});
			})
		</script>

post()

post() 方法通过 HTTP POST 请求从服务器载入数据。

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

在这里插入图片描述

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

ajax()

jQuery.ajax([settings])
$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType,
error:error,
async:true
});

在这里插入图片描述

getScript()

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件
在这里插入图片描述

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

$(function(){
	$.getScript("one.js",function(){
		console.log("获取成功");
	})
	$.getScript("one.js");
				
	$.ajax({
		 url: "one.js",
		dataType: "script",
		success: function(){
	console.log("获取成功");
	}
});
})