【Ajax】使⽤jQuery的loadgetpost⽅法加载本地txt⽂件并进⾏
数据过滤
使⽤原⽣的Ajax可以参考我的这⼀篇博客：jquery ajax例子
为了使⽤Ajax，需要解决跨域问题，可以
⽬录
1. ⽬录结构
最终运⾏的⽂件是learnjQueryQWithAjax.html。
2. 代码
2.1 函数说明
Ajax提供了⼀个函数接⼝load()，这个函数很简单，⽽且很强⼤。
该函数从服务器端拿到指定路径的⽂件内容，并提供了⼀整套过滤机制，来保证最终只有⽤户感兴趣的数据被展⽰到前端。
格式：
$(selector).load(URL, data, callback);
URL为要加载的数据的路径，为⼀个String，我⽤相对路径测试没有问题，⽤绝对路径测试（在WIN10上）没有读到数据。
其中data和callback是可选参数，data是指定的要查询的键值对，为⼀个javascript Object，callback是⽤户指定的在加载结束之后执⾏的回调函数为⼀个function。
2.2 ⼀个⽂件
<!DOCTYPE html>
<html>
<head>
<script src="./scripts/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// alert("Button clicked");
// $("#div1").load("./ #p1");  // Get the resources from the file : ./ and load the label with class '#p1';
$("#div1").load("./");
$("#div1").css({'color' : 'red', 'background-color' : 'rgba(128, 128, 182, 0.5)'});
alert("Ajax loaded!");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使⽤ jQuery AJAX 来改变⽂本</h2></div>
<button>获得外部内容</button>
</body>
</html>
2.3 解释
$("#div1").load("./ #p1");
上⾯这⾏代码将本地⽂件'./'中的 #p1标签的内容加载到当前的页⾯的具有id === 'div1'的元素上。
3. 效果
按下按钮之前：
按下按钮之后：
4. 拓展说明
4.1. 对txt的⽂件内容进⾏过滤
指定加载的元素标签
即使⽤jQuery进⾏过滤，仅仅加载指定的内容，此时可以使⽤指定的标签：
$("#div1").load("./ #p1");
此时加载的效果：
4.2 load⽅法使⽤data
因为data会最终被发送给server，这⾥我们并没有写server程序，所以加上⾃⼰定义的javascript Object发送给服务器程序之后，也不会被处理，但是写了不处理并不会报错，但是会改变数fa据发送的⽅式：
如果没有加上这个object发送给服务器，默认采⽤的数据发送⽅式为get，加上发送这个object之后默认采⽤的数据发送⽅式为post（可以发送更多的数据的⽅式），例如：
<script>
$(document).ready(function(){
$("button").click(function(){
/
/ alert("Button clicked");
// $("#div1").load("./ #p1");  // Get the resources from the file : ./ and load the label with class '#p1';    $("#div1").load("./ #p1", {author:"youheng", age:"21", 'school' : 'HNU'}, function(responseTxt, statusTxt, xhr){
// responseText：请求返回的内容
// textStates：请求状态：'success' / 'error'
// XMLHttpRequest：XMLHttpRequest对象
if(statusTxt=="success") {
alert("外部内容加载成功！");
} else if(statusTxt=="error") {
alert("Error: "+xhr.status+": "+xhr.statusText);
}
});
$("#div1").css({'color' : 'red', 'background-color' : 'rgba(128, 128, 182, 0.5)'});
// alert("Ajax loaded!");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使⽤ jQuery AJAX 来改变⽂本</h2></div>
<button>获得外部内容</button>
</body>
</html>
4.3.load⽅法添加回调函数
<script>
$(document).ready(function(){
$("button").click(function(){
// alert("Button clicked");
// $("#div1").load("./ #p1");  // Get the resources from the file : ./ and load the label with class '#p1';    $("#div1").load("./ #p1", function(responseTxt, statusTxt, xhr){
// responseText：请求返回的内容
// textStates：请求状态：'success' / 'error'
// XMLHttpRequest：XMLHttpRequest对象
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
$("#div1").css({'color' : 'red', 'background-color' : 'rgba(128, 128, 182, 0.5)'});
alert("Ajax loaded!");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使⽤ jQuery AJAX 来改变⽂本</h2></div>
<button>获得外部内容</button>
</body>
</html>
效果：
5. 使⽤ get 与 post ⽅法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。