(六)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中声明后后面也能用$