（六）jQuery ajax

最新推荐文章于 2023-05-28 23:07:33 发布

朝屯暮蒙vi

最新推荐文章于 2023-05-28 23:07:33 发布

阅读量219

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_35418250/article/details/77991892

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

（六）jQuery ajax

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

URL 参数要加载的 URL。

Data 与请求一同发送的查询字符串键/值对集合。

callback 参数是 load() 方法完成后所执行的回调函数名称。

加载txt文件的内容：（是把文件中内容都添加到页面中，有HTML语言也会有用的；但是可以在指定url之后再次指定，从而只加载指定的标签）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("div").load("txt/a.txt");
//$("div").load("txt/a.txt #p1");//加载文件中标签id为p1的元素
	});
});
</script>
</head>
<body>
<div id="div1">使用 jQuery AJAX加载内容到div中</div>
<button>从外部获取txt内容</button>
</body>
</html>

callback 参数规定当load()方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态success和error

xhr - 包含 XMLHttpRequest 对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("div").load("txt/a.txt",function(responseTxt,statusTxt,xhr){
		    if(statusTxt=="success")
		        alert("外部内容加载成功!");
		      if(statusTxt=="error")
		        alert("Error: "+xhr.status+": "+xhr.statusText);
		});
	});
});
</script>
</head>
<body>
<div id="div1">使用 jQuery AJAX 修改文本内容</div>
<button>从外部获取txt内容</button>
</body>
</html>

jQuery get()和post()方法用于通过GET或POST请求从服务器请求数据。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);回调函数data,status两个参数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.get("txt/a.txt",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>
<div id="div1">使用 jQuery AJAX 修改文本内容</div>
<button>从外部获取txt内容</button>
</body>
</html>

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);

URL 参数规定您希望请求的 URL。

data 参数规定连同请求发送的数据。可选的，可以传入参数给php存入，在返回信息

callback 参数是请求成功后所执行的函数名。data,status两种状态

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.post("txt/a.txt",{},function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>
<div id="div1">使用 jQuery AJAX 修改文本内容</div>
<button>从外部获取txt内容</button>
</body>
</html>

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){});//之后是不能再用$表示jQuery了
var jq = $.noConflict();
jq(document).ready(function(){});
$.noConflict();
jQuery(document).ready(function($){});//在function中声明后后面也能用$

朝屯暮蒙vi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（六）jQuery ajax

（六）jQuery ajaxload()方法从服务器加载数据，并把返回的数据放入被选元素中。$(selector).load(URL,data,callback);URL 参数要加载的 URL。Data 与请求一同发送的查询字符串键/值对集合。callback 参数是 load()方法完成后所执行的回调函数名称。加载txt文件的内容：（是把文件中内容都添加到
复制链接

扫一扫