jQuery系统的学习（六）

最新推荐文章于 2024-05-05 12:58:08 发布

飞鸿酱

最新推荐文章于 2024-05-05 12:58:08 发布

阅读量310

点赞数

分类专栏： front-end-jqurey

本文链接：https://blog.csdn.net/weixin_38465623/article/details/80425820

版权

front-end-jqurey 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

因为要学习ajax了，这个很重要，所以我要换章了。

什么是ajax？

ajax=异步javascript和xml（asynchronous javascript and xml）；

简单地说就是在不重载整个网页的情况下，ajax通过后台加载数据，并在网页上进行显示。

使用ajax的应用程序案例有谷歌地图，腾讯微博，优酷视频，人人网等等。

关于jquery和ajax

jquery提供很多个与ajax有关的方法。

通过jquery ajax方法，能够使用http get和http post从远程服务器上请求文本，html，xml或json

同时能够把这些外部数据直接载入网页的被选元素中。

如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

ajax load（）方法

该方法是简单但强大的ajax方法。

load（）从服务器加载数据，并把返回的数据放入被选元素中。

语法如下

$(selector).load(url,data,callback)

url是必须的，规定要加载的url；
data是可选的，规定与请求一同发送的查询字符串键值对集合。
callback是可选的，是load方法完成后所执行的函数名称。

new_file.txt

<div>一起加油</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<script>
		$(document).ready(function(){
			$("button").click(function(){
			$(".div1").load("new_file.txt");
		});
			});
	</script>
	<body>
		<div class="div1">好好学js</div>
		<button>确定</button>
	</body>
</html>

也可以把选择器添加到url参数里。

下面的例子是“new_file.txt”中的<a>标签的内容加载到指定的div元素中，

<div>一起加油</div>
<a>哈哈哈</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<script>
		$(document).ready(function(){
			$("button").click(function(){
			$(".div1").load("new_file.txt a");
		});
			});
	</script>
	<body>
		<div class="div1">好好学js</div>
		<button>确定</button>
	</body>
</html>

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

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<script>
		$(document).ready(function() {
			$("button").click(function() {
				$(".div1").load("new_file.txta", function(responsetxt, statustxt, xhr) {
					if(statustxt == "success") {
						alert("加载成功");
					}
					if(statustxt == "error") {
						alert("加载失败" + xhr.status + xhr.statusText);
					}
				});
			});
		});
	</script>

	<body>
		<div class="div1">好好学js</div>
		<button>确定</button>
	</body>

</html>

把加红的一行txt和a之中加空格即可

jquery ajax get（）方法和post（）方法

用于通过http get或post请求从服务器请求数据。

http请求：get 和post

两种在客户端和服务器端请进请求-相应的常用方法。

get 从指定的资源请求数据
post 向指定的资源提交要处理的数据

get基本上用于从服务器获得数据。会缓存数据。

post也可以用于从服务器获得数据，不过，post方法不会缓存数据，并且常用语连同请求一起发送数据。

jquery $.get()方法

通过http get请求从服务器上请求数据。

语法：

$.get{url,callback}

必须的url参数规定要请求的url。
可选的callback是请求成功后所执行的函数名。

<?php
echo '这是get方法';
?>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<script>
		$(document).ready(function() {
			$("button").click(function() {
				$.get("new_file.php", function(data, status) {
					alert("数据" + data + "\n状态" + status);
				});
			});
		});
	</script>

	<body>
		<button>http get请求并获取返回结果。</button>
	</body>

</html>

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

不知道为什么无法运行

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<script>
	$(document).ready(function() {
		$("button").click(function() {
			$.post("new_file.php", {
					name: "csdn欢迎你",
					url: "http://www.baidu.com"
				},

				function(data, status) {
					alert("数据" + data + "\n状态" + status);
				});
		});
	});
</script>

<body>
	<button>http post请求并获取返回结果。</button>
</body>

</html>

$.post() 的第一个参数是我们希望请求的 URL ("new_file.php")。

然后我们连同请求（name 和 url）一起发送数据。

"new_file.php" 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

//<?php
//echo '这是get方法';
//?>

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>

飞鸿酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery系统的学习（六）

因为要学习ajax了，这个很重要，所以我要换章了。什么是ajax？ajax=异步javascript和xml（asynchronous javascript and xml）；简单地说就是在不重载整个网页的情况下，ajax通过后台加载数据，并在网页上进行显示。使用ajax的应用程序案例有谷歌地图，腾讯微博，优酷视频，人人网等等。关于jquery和ajaxjquery提供很多个与ajax有关的方法。...
复制链接

扫一扫

专栏目录