| 【Ajax】使用jQuery的load/get/post方法加载本地txt文件并进行数据过滤 | 您所在的位置：网站首页 › 一个简单的ajax请求文件怎么弄 › 【Ajax】使用jQuery的load/get/post方法加载本地txt文件并进行数据过滤 |
【Ajax】使用jQuery的load/get/post方法加载本地txt文件并进行数据过滤
|
使用原生的Ajax可以参考我的这一篇博客：详解Ajax实现网页数据异步更新并实时自动刷新 为了使用Ajax，需要解决跨域问题，可以 参考博客 目录 1. 目录结构 2. 代码 2.1 函数说明 2.2 一个文件 2.3 解释 3. 效果 4. 拓展说明 4.1. 对txt的文件内容进行过滤 4.2 load方法使用data 4.3.load方法添加回调函数 5. 使用 get 与 post 方法 6. 另一种写法：$.ajax() 1. 目录结构最终运行的文件是learnjQueryQWithAjax.html。
Ajax提供了一个函数接口load()，这个函数很简单，而且很强大。 该函数从服务器端拿到指定路径的文件内容，并提供了一整套过滤机制，来保证最终只有用户感兴趣的数据被展示到前端。
格式： $(selector).load(URL, data, callback);URL为要加载的数据的路径，为一个String，我用相对路径测试没有问题，用绝对路径测试（在WIN10上）没有读到数据。 其中data和callback是可选参数，data是指定的要查询的键值对，为一个javascript Object，callback是用户指定的在加载结束之后执行的回调函数为一个function。
2.2 一个文件 $(document).ready(function(){ $("button").click(function(){ // alert("Button clicked"); // $("#div1").load("./resources/test.txt #p1"); // Get the resources from the file : ./resource/test.txt and load the label with class '#p1'; $("#div1").load("./resources/test.txt"); $("#div1").css({'color' : 'red', 'background-color' : 'rgba(128, 128, 182, 0.5)'}); alert("Ajax loaded!"); }); }); 使用 jQuery AJAX 来改变文本 获得外部内容 2.3 解释 $("#div1").load("./resources/test.txt #p1"); 上面这行代码将本地文件'./resources/test.txt'中的 #p1标签的内容加载到当前的页面的具有id === 'div1'的元素上。 3. 效果 按下按钮之前：
按下按钮之后：
指定加载的元素标签 即使用jQuery进行过滤，仅仅加载指定的内容，此时可以使用指定的标签： $("#div1").load("./resources/test.txt #p1");此时加载的效果：
因为data会最终被发送给server，这里我们并没有写server程序，所以加上自己定义的javascript Object发送给服务器程序之后，也不会被处理，但是写了不处理并不会报错，但是会改变数fa据发送的方式： 如果没有加上这个object发送给服务器，默认采用的数据发送方式为get，加上发送这个object之后默认采用的数据发送方式为post（可以发送更多的数据的方式），例如： $(document).ready(function(){ $("button").click(function(){ // alert("Button clicked"); // $("#div1").load("./resources/test.txt #p1"); // Get the resources from the file : ./resource/test.txt and load the label with class '#p1'; $("#div1").load("./resources/test.txt #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!"); }); }); 使用 jQuery AJAX 来改变文本 获得外部内容4.3.load方法添加回调函数 $(document).ready(function(){ $("button").click(function(){ // alert("Button clicked"); // $("#div1").load("./resources/test.txt #p1"); // Get the resources from the file : ./resource/test.txt and load the label with class '#p1'; $("#div1").load("./resources/test.txt #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!"); }); }); 使用 jQuery AJAX 来改变文本 获得外部内容 效果：
效果：
Div2 Zone 获得外部内容代码位置： // $.ajax method htmlobj=$.ajax({url:"./resources/test.txt", async:false}); $("#div2").html(htmlobj.responseText);效果：
完整文档参考： https://api.jquery.com/jQuery.ajax/
|
【本文地址】
公司简介
联系我们