【Ajax】使用jQuery的load/get/post方法加载本地txt文件并进行数据过滤

最新推荐文章于 2024-03-29 16:23:45 发布
最新推荐文章于 2024-03-29 16:23:45 发布
阅读量3.9k 收藏 3
点赞数 4
分类专栏： WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenhanxuan1999/article/details/104073551
版权

使用原生的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。 

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("./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!");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>

</body>
</html>

2.3 解释

$("#div1").load("./resources/test.txt #p1");

 上面这行代码将本地文件'./resources/test.txt'中的 #p1标签的内容加载到当前的页面的具有id === 'div1'的元素上。

 

3. 效果

按下按钮之前：

按下按钮之后：

4. 拓展说明

4.1. 对txt的文件内容进行过滤

指定加载的元素标签

即使用jQuery进行过滤，仅仅加载指定的内容，此时可以使用指定的标签：

$("#div1").load("./resources/test.txt #p1");

此时加载的效果：

4.2 load方法使用data

因为data会最终被发送给server，这里我们并没有写server程序，所以加上自己定义的javascript Object发送给服务器程序之后，也不会被处理，但是写了不处理并不会报错，但是会改变数fa据发送的方式：

如果没有加上这个object发送给服务器，默认采用的数据发送方式为get，加上发送这个object之后默认采用的数据发送方式为post（可以发送更多的数据的方式），例如：

<!DOCTYPE html>
<html>
<head>
<script src="./scripts/jquery.min.js"></script>
<script>
$(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!");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>

</body>
</html>

 

4.3.load方法添加回调函数

<!DOCTYPE html>
<html>
<head>
<script src="./scripts/jquery.min.js"></script>
<script>
$(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!");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>

</body>
</html>

效果：

5. 使用 get 与 post 方法

<!DOCTYPE html>
<html>
<head>
<script src="./scripts/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  	
  	// jQuery load 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)'});
    
    // jQuery get method
    // format : $.get(URL,callback);
	$.get("./resources/test.txt", function(data,status){
		alert("From get Method : Data: " + data + "\nStatus: " + status);
	});
	

    // jQuery post method
    // format : $.post(URL,data,callback);
	$.post("./resources/test.txt",
	{
		name:"youheng",
		city:"ChangSha",
		country: 'China'
	},
	// 第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
	function(data, status){
		console.log("From post Method : Data: " + data + "\nStatus: " + status);
	});


    // alert("Ajax loaded!");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>

</body>
</html>

效果：

6. 另一种写法：$.ajax() 

<!DOCTYPE html>
<html>
<head>
<script src="./scripts/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  	
  	// jQuery load 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)'});
    
    // jQuery get method
    // format : $.get(URL,callback);
	$.get("./resources/test.txt", function(data,status){
		alert("From get Method : Data: " + data + "\nStatus: " + status);
	});
	

    // jQuery post method
    // format : $.post(URL,data,callback);
	$.post("./resources/test.txt",
	{
		name:"youheng",
		city:"ChangSha",
		country: 'China'
	},
	// 第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
	function(data, status){
		console.log("From post Method : Data: " + data + "\nStatus: " + status);
	});

	// $.ajax method
	htmlobj=$.ajax({url:"./resources/test.txt", async:false});
 	$("#div2").html(htmlobj.responseText);


    // alert("Ajax loaded!");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<div id='div2'><p>Div2 Zone </p></div>
<button>获得外部内容</button>

</body>
</html>

代码位置：

// $.ajax method
	htmlobj=$.ajax({url:"./resources/test.txt", async:false});
 	$("#div2").html(htmlobj.responseText);

效果：

完整文档参考：

https://api.jquery.com/jQuery.ajax/

 

kikook
关注
专栏目录
Jquery ajax方式读取txt文件、Jquery分页.
11-18
Jquery ajax 读取txt文件 Jquery分页 Jquery ajax 读取txt文件 Jquery分页
使用jquery的load方法加载本地文件
qq_34500270的博客
10-09 9395
1. 方法一（图一）：使用chrome浏览器，关掉浏览器，通过截图的两条命令运行chrome浏览器，再运行test.html文件。方法二（图二）：选择chrome浏览器快捷方式，右键选择属性，再点击快捷方式，在目标"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"的后面加空格，输入 --allow-file-access-fr...
ajax请求本地文件
weixin_30399155的博客
10-03 1263
这是一个小随笔，真的很简短！ 主要入坑点有两个 一、Chrome浏览器默认不支持ajax读取本地文件 　　解决：1、关闭所有Chrome网页 　　　　　2、右击Chrome浏览器，打开“属性” 　　　　 3、弹出属性对话框，--》“快捷方式” ---》“目标” 　　　　　4、目标栏原有内容不动，紧接着跟“空格”和“--args --disable-web-security --...
Ajax异步请求，获取本地json数据
m0_73341533的博客
03-13 2396
Ajax的核心是XMLHttpRequest对象。2、jQuery的Ajax请求。
104 使用Ajax请求纯文本
Blog of Lytracy
09-11 618
使用Ajax请求纯文本
Ajax读取本地json文件
guoxuying的博客
01-21 5454
Ajax读取本地json文件
ajax与jquery无刷新验证用户之load()之post方法二
10-28
本文档主要讲述Ajax与jquery相结合实现的无数新验证用户时常用的post()方法之二，服务器端以json方式返回数据时的处理办法
jquery 读取页面load get post ajax 四种方式代码写法
10-28
在jQuery中，有四种主要的方法用于读取页面内容：`load`、`get`、`post`和`ajax`。这些方法都是基于Ajax技术实现的，允许我们在不刷新整个页面的情况下与服务器进行异步交互，从而提升用户体验。下面将详细解释这四...
jQuery中ajax的load()与post()方法实例详解
11-23
在jQuery中，`ajax`是用于异步数据交互的核心技术，它可以实现页面的无刷新更新。其中，`load()`和`post()`是两种常见的方法，分别适用于不同的场景。 ### 一、`load()`方法 `load()`方法是jQuery提供的一种简单...
jQuery中Ajax的get、post等方法详解
12-02
在jQuery中，Ajax技术是用于实现页面异步更新的关键，它可以使得网页在不重新加载整个页面的情况下与服务器交换数据并局部更新。`load()`方法是最基础的Ajax操作，主要用于加载服务器上的HTML片段，但它的功能相对...
详谈jQuery Ajax(load,post,get,ajax)的用法
10-20
jQuery的load方法是jQuery Ajax方法中最简单便捷的方式之一，用于从服务器加载数据，并将其插入到选定的元素中。load方法的基本语法为： ```javascript $(selector).load(url, [data], [callback]); ``` 其中，`...
JQuery读取txt文件
热门推荐
steven.yang
10-22 2万+
读取txt文件分两种情况： 一、如果txt文件存放在项目中： var htmlobj=$.ajax({url:"txt文件的路径",async:false}); htmlobj.responseText  二、如果txt文件存放在本地（服务） 首先需要配置tomcat的虚拟路径，因为项目启动tomcat只能访问项目中的文件。配置Tomcat的虚拟路径方法：https://blog.csd...
Jquery 动态添加txt文档到textarea
夢工場
03-13 3484
背景：若需要动态在一个moal窗里面加入text里面的内容，          textarea  name :df_blacklist //加载默认的黑名单 $(document).on('click','input[name=df_blacklist]',function(){ if($(this).is(":checked")){
Ajax访问本地服务器案例
qq_50951790的博客
12-01 916
ajax请求本地服务器案例
JavaScript中通过ajax请求文件
Alexms01的博客
08-09 1035
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 一、Ajax是什么？ 二、Ajax的使用 1.创建ajax对象 2.初始化请求 3.发送请求并监听 4.onreadystatechange事件 一、Ajax是什么？ AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX为向服务器发送请求和解析服务器响应提供了流畅的接口。以异步方式从服务器取得信息，在不重新加载网页的前提下更新网页内...
JQuery介绍，包括load(),get(),post()以及赋值等方法（案例分析
最新发布
03-29 1092
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】链图片转存中…(img-3x7ZYgqK-1711700614645)]小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ajax中中loaddate,jQuery中ajax的load()与post()方法实例详解
weixin_30572265的博客
08-05 550
本文实例讲述了jQuery中ajax的load()与post()方法。分享给大家供大家参考，具体如下：一、load()方法在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别，但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦。load()方法默认使用 GET 方式, 如果传递了data参数则使...
jq ajax读取txt,使用JQuery或Ajax加载.txt文件
weixin_33359523的博客
08-05 1173
我该如何修复下面的脚本，以便每次都能使用！有时它起作用，有时却不起作用。 Pro JQuery解释了造成这种情况的原因，但没有讨论如何解决。我几乎肯定它与ajaxready状态有关，但是我不知道如何编写它。Web显示了大约99种不同的方式来编写Ajax和JQuery，这有点让人不知所措。我的目标是创建一个HTML外壳，该外壳可以填充基于服务器的文本文件中的文本。例如：假设服务器上有一个名为AG的文...
JQuery介绍，包括load(),get(),post()以及赋值等方法
coderxz的博客
05-20 1135
1.JQuery是什么 JQuery 是 javascript 的一个框架集合 ， 并不是什么新的技术。 2.Jquery有什么用 - 写少代码,做多事情【write less do more】 - 免费，开源且轻量级的js库，容量很小 注意：项目中，提倡引用min版的js库 - 兼容市面上主流浏览器，例如 IE，Firefox，Chrome 注意：jQuery不是将所有JS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值